Cold Blue

CSS

:root {
  --cold-blue: #88dddd;
  --cold-blue-rgb: 136 221 221;
  --cold-blue-oklch: oklch(0.844 0.083 195.7);
}

.element {
  color: var(--cold-blue);
  background-color: hsl(180 56% 70%);
  border-color: oklch(0.844 0.083 195.7);
}

Tailwind CSS v4

@theme {
  --color-cold-blue: #88dddd;
  --color-cold-blue-50: #dbfdfe;
  --color-cold-blue-100: #c9f1f2;
  --color-cold-blue-200: #abe0e1;
  --color-cold-blue-300: #84c5c6;
  --color-cold-blue-400: #5eaeae;
  --color-cold-blue-500: #329798;
  --color-cold-blue-600: #2c8080;
  --color-cold-blue-700: #246667;
  --color-cold-blue-800: #184b4b;
  --color-cold-blue-900: #103434;
  --color-cold-blue-950: #02201f;
}

SCSS

$cold-blue: #88dddd;
$cold-blue-rgb: 136, 221, 221;
$cold-blue-light: mix(#fff, $cold-blue, 20%);
$cold-blue-dark: mix(#000, $cold-blue, 20%);

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