Navajo Turquoise

CSS

:root {
  --navajo-turquoise: #007c78;
  --navajo-turquoise-rgb: 0 124 120;
  --navajo-turquoise-oklch: oklch(0.529 0.091 190.8);
}

.element {
  color: var(--navajo-turquoise);
  background-color: hsl(178 100% 24%);
  border-color: oklch(0.529 0.091 190.8);
}

Tailwind CSS v4

@theme {
  --color-navajo-turquoise: #007c78;
  --color-navajo-turquoise-50: #d8fefc;
  --color-navajo-turquoise-100: #c6f2f0;
  --color-navajo-turquoise-200: #a7e1df;
  --color-navajo-turquoise-300: #7ec7c4;
  --color-navajo-turquoise-400: #56b0ab;
  --color-navajo-turquoise-500: #1f9994;
  --color-navajo-turquoise-600: #1f817d;
  --color-navajo-turquoise-700: #196864;
  --color-navajo-turquoise-800: #104c49;
  --color-navajo-turquoise-900: #0a3532;
  --color-navajo-turquoise-950: #00201e;
}

SCSS

$navajo-turquoise: #007c78;
$navajo-turquoise-rgb: 0, 124, 120;
$navajo-turquoise-light: mix(#fff, $navajo-turquoise, 20%);
$navajo-turquoise-dark: mix(#000, $navajo-turquoise, 20%);

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