Break the Ice

CSS

:root {
  --break-the-ice: #b2e1ee;
  --break-the-ice-rgb: 178 225 238;
  --break-the-ice-oklch: oklch(0.881 0.052 216.5);
}

.element {
  color: var(--break-the-ice);
  background-color: hsl(193 64% 82%);
  border-color: oklch(0.881 0.052 216.5);
}

Tailwind CSS v4

@theme {
  --color-break-the-ice: #b2e1ee;
  --color-break-the-ice-50: #e6f9ff;
  --color-break-the-ice-100: #d6ecf4;
  --color-break-the-ice-200: #bddae3;
  --color-break-the-ice-300: #9bbec9;
  --color-break-the-ice-400: #7ca7b2;
  --color-break-the-ice-500: #5d8f9c;
  --color-break-the-ice-600: #507984;
  --color-break-the-ice-700: #3f616a;
  --color-break-the-ice-800: #2d474d;
  --color-break-the-ice-900: #1e3136;
  --color-break-the-ice-950: #0e1d21;
}

SCSS

$break-the-ice: #b2e1ee;
$break-the-ice-rgb: 178, 225, 238;
$break-the-ice-light: mix(#fff, $break-the-ice, 20%);
$break-the-ice-dark: mix(#000, $break-the-ice, 20%);

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