Cool Sky

CSS

:root {
  --cool-sky: #cfe0e4;
  --cool-sky-rgb: 207 224 228;
  --cool-sky-oklch: oklch(0.895 0.019 213.4);
}

.element {
  color: var(--cool-sky);
  background-color: hsl(191 28% 85%);
  border-color: oklch(0.895 0.019 213.4);
}

Tailwind CSS v4

@theme {
  --color-cool-sky: #cfe0e4;
  --color-cool-sky-50: #eff7f8;
  --color-cool-sky-100: #e1eaec;
  --color-cool-sky-200: #ccd6d9;
  --color-cool-sky-300: #adbabd;
  --color-cool-sky-400: #92a2a5;
  --color-cool-sky-500: #788a8e;
  --color-cool-sky-600: #667578;
  --color-cool-sky-700: #525d60;
  --color-cool-sky-800: #3b4446;
  --color-cool-sky-900: #292f31;
  --color-cool-sky-950: #161c1d;
}

SCSS

$cool-sky: #cfe0e4;
$cool-sky-rgb: 207, 224, 228;
$cool-sky-light: mix(#fff, $cool-sky, 20%);
$cool-sky-dark: mix(#000, $cool-sky, 20%);

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