Frozen Whisper

CSS

:root {
  --frozen-whisper: #8bbbdb;
  --frozen-whisper-rgb: 139 187 219;
  --frozen-whisper-oklch: oklch(0.769 0.068 238);
}

.element {
  color: var(--frozen-whisper);
  background-color: hsl(204 53% 70%);
  border-color: oklch(0.769 0.068 238);
}

Tailwind CSS v4

@theme {
  --color-frozen-whisper: #8bbbdb;
  --color-frozen-whisper-50: #e4f8ff;
  --color-frozen-whisper-100: #d4ecfd;
  --color-frozen-whisper-200: #bbd9ef;
  --color-frozen-whisper-300: #98bdd7;
  --color-frozen-whisper-400: #78a5c3;
  --color-frozen-whisper-500: #598dae;
  --color-frozen-whisper-600: #4c7793;
  --color-frozen-whisper-700: #3c5f76;
  --color-frozen-whisper-800: #2a4657;
  --color-frozen-whisper-900: #1c313d;
  --color-frozen-whisper-950: #0c1d26;
}

SCSS

$frozen-whisper: #8bbbdb;
$frozen-whisper-rgb: 139, 187, 219;
$frozen-whisper-light: mix(#fff, $frozen-whisper, 20%);
$frozen-whisper-dark: mix(#000, $frozen-whisper, 20%);

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