Breath of Fresh Air

CSS

:root {
  --breath-of-fresh-air: #c7dbe4;
  --breath-of-fresh-air-rgb: 199 219 228;
  --breath-of-fresh-air-oklch: oklch(0.879 0.025 226.5);
}

.element {
  color: var(--breath-of-fresh-air);
  background-color: hsl(199 35% 84%);
  border-color: oklch(0.879 0.025 226.5);
}

Tailwind CSS v4

@theme {
  --color-breath-of-fresh-air: #c7dbe4;
  --color-breath-of-fresh-air-50: #eef7fb;
  --color-breath-of-fresh-air-100: #e0eaee;
  --color-breath-of-fresh-air-200: #cad7dd;
  --color-breath-of-fresh-air-300: #abbac2;
  --color-breath-of-fresh-air-400: #90a2aa;
  --color-breath-of-fresh-air-500: #758a93;
  --color-breath-of-fresh-air-600: #64757c;
  --color-breath-of-fresh-air-700: #4f5d64;
  --color-breath-of-fresh-air-800: #394449;
  --color-breath-of-fresh-air-900: #272f32;
  --color-breath-of-fresh-air-950: #151c1e;
}

SCSS

$breath-of-fresh-air: #c7dbe4;
$breath-of-fresh-air-rgb: 199, 219, 228;
$breath-of-fresh-air-light: mix(#fff, $breath-of-fresh-air, 20%);
$breath-of-fresh-air-dark: mix(#000, $breath-of-fresh-air, 20%);

.element {
  color: $breath-of-fresh-air;
  box-shadow: 0 0 0 2px rgba($breath-of-fresh-air, 0.35);
}