Cool

CSS

:root {
  --cool: #96b3b3;
  --cool-rgb: 150 179 179;
  --cool-oklch: oklch(0.745 0.032 196.5);
}

.element {
  color: var(--cool);
  background-color: hsl(180 16% 65%);
  border-color: oklch(0.745 0.032 196.5);
}

Tailwind CSS v4

@theme {
  --color-cool: #96b3b3;
  --color-cool-50: #ebf8f8;
  --color-cool-100: #dcebec;
  --color-cool-200: #c5d9d9;
  --color-cool-300: #a5bdbd;
  --color-cool-400: #89a5a5;
  --color-cool-500: #6e8d8d;
  --color-cool-600: #5d7777;
  --color-cool-700: #4a5f60;
  --color-cool-800: #364646;
  --color-cool-900: #253030;
  --color-cool-950: #131d1c;
}

SCSS

$cool: #96b3b3;
$cool-rgb: 150, 179, 179;
$cool-light: mix(#fff, $cool, 20%);
$cool-dark: mix(#000, $cool, 20%);

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