Ocean Liner

CSS

:root {
  --ocean-liner: #189086;
  --ocean-liner-rgb: 24 144 134;
  --ocean-liner-oklch: oklch(0.59 0.099 186);
}

.element {
  color: var(--ocean-liner);
  background-color: hsl(175 71% 33%);
  border-color: oklch(0.59 0.099 186);
}

Tailwind CSS v4

@theme {
  --color-ocean-liner: #189086;
  --color-ocean-liner-50: #d6fffa;
  --color-ocean-liner-100: #c3f3ee;
  --color-ocean-liner-200: #a4e2dc;
  --color-ocean-liner-300: #79c8c1;
  --color-ocean-liner-400: #4fb1a7;
  --color-ocean-liner-500: #029b90;
  --color-ocean-liner-600: #0e837a;
  --color-ocean-liner-700: #0d6961;
  --color-ocean-liner-800: #084d46;
  --color-ocean-liner-900: #063631;
  --color-ocean-liner-950: #00211d;
}

SCSS

$ocean-liner: #189086;
$ocean-liner-rgb: 24, 144, 134;
$ocean-liner-light: mix(#fff, $ocean-liner, 20%);
$ocean-liner-dark: mix(#000, $ocean-liner, 20%);

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