The Big Freeze

CSS

:root {
  --the-big-freeze: #bbffff;
  --the-big-freeze-rgb: 187 255 255;
  --the-big-freeze-oklch: oklch(0.955 0.067 196.1);
}

.element {
  color: var(--the-big-freeze);
  background-color: hsl(180 100% 87%);
  border-color: oklch(0.955 0.067 196.1);
}

Tailwind CSS v4

@theme {
  --color-the-big-freeze: #bbffff;
  --color-the-big-freeze-50: #e0fcfc;
  --color-the-big-freeze-100: #cfeff0;
  --color-the-big-freeze-200: #b4dedf;
  --color-the-big-freeze-300: #8fc2c4;
  --color-the-big-freeze-400: #6dabab;
  --color-the-big-freeze-500: #4a9495;
  --color-the-big-freeze-600: #407d7e;
  --color-the-big-freeze-700: #336465;
  --color-the-big-freeze-800: #234a49;
  --color-the-big-freeze-900: #183333;
  --color-the-big-freeze-950: #081f1e;
}

SCSS

$the-big-freeze: #bbffff;
$the-big-freeze-rgb: 187, 255, 255;
$the-big-freeze-light: mix(#fff, $the-big-freeze, 20%);
$the-big-freeze-dark: mix(#000, $the-big-freeze, 20%);

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