Real Turquoise

CSS

:root {
  --real-turquoise: #008a4c;
  --real-turquoise-rgb: 0 138 76;
  --real-turquoise-oklch: oklch(0.556 0.139 154.3);
}

.element {
  color: var(--real-turquoise);
  background-color: hsl(153 100% 27%);
  border-color: oklch(0.556 0.139 154.3);
}

Tailwind CSS v4

@theme {
  --color-real-turquoise: #008a4c;
  --color-real-turquoise-50: #d6ffe5;
  --color-real-turquoise-100: #c3f7d5;
  --color-real-turquoise-200: #a3e7bc;
  --color-real-turquoise-300: #78cd9a;
  --color-real-turquoise-400: #50b678;
  --color-real-turquoise-500: #0aa05a;
  --color-real-turquoise-600: #12874d;
  --color-real-turquoise-700: #106c3d;
  --color-real-turquoise-800: #0e5029;
  --color-real-turquoise-900: #09371c;
  --color-real-turquoise-950: #00220c;
}

SCSS

$real-turquoise: #008a4c;
$real-turquoise-rgb: 0, 138, 76;
$real-turquoise-light: mix(#fff, $real-turquoise, 20%);
$real-turquoise-dark: mix(#000, $real-turquoise, 20%);

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