Ocean Reef

CSS

:root {
  --ocean-reef: #1f989b;
  --ocean-reef-rgb: 31 152 155;
  --ocean-reef-oklch: oklch(0.62 0.099 197.5);
}

.element {
  color: var(--ocean-reef);
  background-color: hsl(181 67% 36%);
  border-color: oklch(0.62 0.099 197.5);
}

Tailwind CSS v4

@theme {
  --color-ocean-reef: #1f989b;
  --color-ocean-reef-50: #d5feff;
  --color-ocean-reef-100: #c2f3f5;
  --color-ocean-reef-200: #a2e2e5;
  --color-ocean-reef-300: #77c7cb;
  --color-ocean-reef-400: #4ab0b3;
  --color-ocean-reef-500: #009a9d;
  --color-ocean-reef-600: #008285;
  --color-ocean-reef-700: #03686a;
  --color-ocean-reef-800: #014d4d;
  --color-ocean-reef-900: #033536;
  --color-ocean-reef-950: #002021;
}

SCSS

$ocean-reef: #1f989b;
$ocean-reef-rgb: 31, 152, 155;
$ocean-reef-light: mix(#fff, $ocean-reef, 20%);
$ocean-reef-dark: mix(#000, $ocean-reef, 20%);

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