Emerald Stone

CSS

:root {
  --emerald-stone: #016360;
  --emerald-stone-rgb: 1 99 96;
  --emerald-stone-oklch: oklch(0.451 0.077 191.1);
}

.element {
  color: var(--emerald-stone);
  background-color: hsl(178 98% 20%);
  border-color: oklch(0.451 0.077 191.1);
}

Tailwind CSS v4

@theme {
  --color-emerald-stone: #016360;
  --color-emerald-stone-50: #ddfdfb;
  --color-emerald-stone-100: #cbf1ef;
  --color-emerald-stone-200: #afdfdd;
  --color-emerald-stone-300: #88c4c2;
  --color-emerald-stone-400: #64ada9;
  --color-emerald-stone-500: #3c9692;
  --color-emerald-stone-600: #357f7c;
  --color-emerald-stone-700: #2a6663;
  --color-emerald-stone-800: #1d4b48;
  --color-emerald-stone-900: #133432;
  --color-emerald-stone-950: #051f1e;
}

SCSS

$emerald-stone: #016360;
$emerald-stone-rgb: 1, 99, 96;
$emerald-stone-light: mix(#fff, $emerald-stone, 20%);
$emerald-stone-dark: mix(#000, $emerald-stone, 20%);

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