Wind of Change

CSS

:root {
  --wind-of-change: #c8deea;
  --wind-of-change-rgb: 200 222 234;
  --wind-of-change-oklch: oklch(0.888 0.029 231.5);
}

.element {
  color: var(--wind-of-change);
  background-color: hsl(201 45% 85%);
  border-color: oklch(0.888 0.029 231.5);
}

Tailwind CSS v4

@theme {
  --color-wind-of-change: #c8deea;
  --color-wind-of-change-50: #eef7fc;
  --color-wind-of-change-100: #dfeaf0;
  --color-wind-of-change-200: #c9d7df;
  --color-wind-of-change-300: #aabac4;
  --color-wind-of-change-400: #8ea2ad;
  --color-wind-of-change-500: #748a96;
  --color-wind-of-change-600: #62757f;
  --color-wind-of-change-700: #4e5d66;
  --color-wind-of-change-800: #38444a;
  --color-wind-of-change-900: #272f34;
  --color-wind-of-change-950: #151c1f;
}

SCSS

$wind-of-change: #c8deea;
$wind-of-change-rgb: 200, 222, 234;
$wind-of-change-light: mix(#fff, $wind-of-change, 20%);
$wind-of-change-dark: mix(#000, $wind-of-change, 20%);

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