Reef Encounter

CSS

:root {
  --reef-encounter: #00968f;
  --reef-encounter-rgb: 0 150 143;
  --reef-encounter-oklch: oklch(0.607 0.105 189);
}

.element {
  color: var(--reef-encounter);
  background-color: hsl(177 100% 29%);
  border-color: oklch(0.607 0.105 189);
}

Tailwind CSS v4

@theme {
  --color-reef-encounter: #00968f;
  --color-reef-encounter-50: #d4fffc;
  --color-reef-encounter-100: #c0f4f0;
  --color-reef-encounter-200: #9fe3df;
  --color-reef-encounter-300: #73c9c4;
  --color-reef-encounter-400: #44b2ab;
  --color-reef-encounter-500: #009c94;
  --color-reef-encounter-600: #00847d;
  --color-reef-encounter-700: #006a64;
  --color-reef-encounter-800: #004e48;
  --color-reef-encounter-900: #003632;
  --color-reef-encounter-950: #00211e;
}

SCSS

$reef-encounter: #00968f;
$reef-encounter-rgb: 0, 150, 143;
$reef-encounter-light: mix(#fff, $reef-encounter, 20%);
$reef-encounter-dark: mix(#000, $reef-encounter, 20%);

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