Malachite Blue Turquoise

CSS

:root {
  --malachite-blue-turquoise: #0e4f4f;
  --malachite-blue-turquoise-rgb: 14 79 79;
  --malachite-blue-turquoise-oklch: oklch(0.39 0.061 194.9);
}

.element {
  color: var(--malachite-blue-turquoise);
  background-color: hsl(180 70% 18%);
  border-color: oklch(0.39 0.061 194.9);
}

Tailwind CSS v4

@theme {
  --color-malachite-blue-turquoise: #0e4f4f;
  --color-malachite-blue-turquoise-50: #e2fbfb;
  --color-malachite-blue-turquoise-100: #d1efef;
  --color-malachite-blue-turquoise-200: #b7dddd;
  --color-malachite-blue-turquoise-300: #93c2c2;
  --color-malachite-blue-turquoise-400: #73aaa9;
  --color-malachite-blue-turquoise-500: #519393;
  --color-malachite-blue-turquoise-600: #467c7c;
  --color-malachite-blue-turquoise-700: #376463;
  --color-malachite-blue-turquoise-800: #274948;
  --color-malachite-blue-turquoise-900: #1a3332;
  --color-malachite-blue-turquoise-950: #0a1e1e;
}

SCSS

$malachite-blue-turquoise: #0e4f4f;
$malachite-blue-turquoise-rgb: 14, 79, 79;
$malachite-blue-turquoise-light: mix(#fff, $malachite-blue-turquoise, 20%);
$malachite-blue-turquoise-dark: mix(#000, $malachite-blue-turquoise, 20%);

.element {
  color: $malachite-blue-turquoise;
  box-shadow: 0 0 0 2px rgba($malachite-blue-turquoise, 0.35);
}