Blue Chill

CSS

:root {
  --blue-chill: #408f90;
  --blue-chill-rgb: 64 143 144;
  --blue-chill-oklch: oklch(0.602 0.077 196.4);
}

.element {
  color: var(--blue-chill);
  background-color: hsl(181 38% 41%);
  border-color: oklch(0.602 0.077 196.4);
}

Tailwind CSS v4

@theme {
  --color-blue-chill: #408f90;
  --color-blue-chill-50: #ddfcfd;
  --color-blue-chill-100: #cbf0f1;
  --color-blue-chill-200: #aedfe0;
  --color-blue-chill-300: #88c4c6;
  --color-blue-chill-400: #64adae;
  --color-blue-chill-500: #3c9697;
  --color-blue-chill-600: #347f80;
  --color-blue-chill-700: #296666;
  --color-blue-chill-800: #1c4b4a;
  --color-blue-chill-900: #133434;
  --color-blue-chill-950: #041f1f;
}

SCSS

$blue-chill: #408f90;
$blue-chill-rgb: 64, 143, 144;
$blue-chill-light: mix(#fff, $blue-chill, 20%);
$blue-chill-dark: mix(#000, $blue-chill, 20%);

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