Barrier Reef

CSS

:root {
  --barrier-reef: #009bb5;
  --barrier-reef-rgb: 0 155 181;
  --barrier-reef-oklch: oklch(0.635 0.112 215.2);
}

.element {
  color: var(--barrier-reef);
  background-color: hsl(189 100% 35%);
  border-color: oklch(0.635 0.112 215.2);
}

Tailwind CSS v4

@theme {
  --color-barrier-reef: #009bb5;
  --color-barrier-reef-50: #d2feff;
  --color-barrier-reef-100: #bef2ff;
  --color-barrier-reef-200: #9de1f4;
  --color-barrier-reef-300: #6fc6dd;
  --color-barrier-reef-400: #3bafc8;
  --color-barrier-reef-500: #0098b4;
  --color-barrier-reef-600: #008098;
  --color-barrier-reef-700: #00677a;
  --color-barrier-reef-800: #004c59;
  --color-barrier-reef-900: #00353f;
  --color-barrier-reef-950: #002028;
}

SCSS

$barrier-reef: #009bb5;
$barrier-reef-rgb: 0, 155, 181;
$barrier-reef-light: mix(#fff, $barrier-reef, 20%);
$barrier-reef-dark: mix(#000, $barrier-reef, 20%);

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