Blue Slushie

CSS

:root {
  --blue-slushie: #008793;
  --blue-slushie-rgb: 0 135 147;
  --blue-slushie-oklch: oklch(0.569 0.097 205.8);
}

.element {
  color: var(--blue-slushie);
  background-color: hsl(185 100% 29%);
  border-color: oklch(0.569 0.097 205.8);
}

Tailwind CSS v4

@theme {
  --color-blue-slushie: #008793;
  --color-blue-slushie-50: #d6feff;
  --color-blue-slushie-100: #c3f2f9;
  --color-blue-slushie-200: #a3e1ea;
  --color-blue-slushie-300: #79c6d1;
  --color-blue-slushie-400: #4dafba;
  --color-blue-slushie-500: #0098a5;
  --color-blue-slushie-600: #09818c;
  --color-blue-slushie-700: #0a6770;
  --color-blue-slushie-800: #044c52;
  --color-blue-slushie-900: #043539;
  --color-blue-slushie-950: #002023;
}

SCSS

$blue-slushie: #008793;
$blue-slushie-rgb: 0, 135, 147;
$blue-slushie-light: mix(#fff, $blue-slushie, 20%);
$blue-slushie-dark: mix(#000, $blue-slushie, 20%);

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