Cotton Clouds

CSS

:root {
  --cotton-clouds: #c2e1ec;
  --cotton-clouds-rgb: 194 225 236;
  --cotton-clouds-oklch: oklch(0.891 0.036 221.2);
}

.element {
  color: var(--cotton-clouds);
  background-color: hsl(196 53% 84%);
  border-color: oklch(0.891 0.036 221.2);
}

Tailwind CSS v4

@theme {
  --color-cotton-clouds: #c2e1ec;
  --color-cotton-clouds-50: #ebf8fd;
  --color-cotton-clouds-100: #dcebf1;
  --color-cotton-clouds-200: #c5d8e0;
  --color-cotton-clouds-300: #a4bcc5;
  --color-cotton-clouds-400: #88a4ae;
  --color-cotton-clouds-500: #6c8c97;
  --color-cotton-clouds-600: #5c7780;
  --color-cotton-clouds-700: #495f66;
  --color-cotton-clouds-800: #35464b;
  --color-cotton-clouds-900: #243034;
  --color-cotton-clouds-950: #131c1f;
}

SCSS

$cotton-clouds: #c2e1ec;
$cotton-clouds-rgb: 194, 225, 236;
$cotton-clouds-light: mix(#fff, $cotton-clouds, 20%);
$cotton-clouds-dark: mix(#000, $cotton-clouds, 20%);

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