Constellation

CSS

:root {
  --constellation: #bccedb;
  --constellation-rgb: 188 206 219;
  --constellation-oklch: oklch(0.842 0.027 239.1);
}

.element {
  color: var(--constellation);
  background-color: hsl(205 30% 80%);
  border-color: oklch(0.842 0.027 239.1);
}

Tailwind CSS v4

@theme {
  --color-constellation: #bccedb;
  --color-constellation-50: #eff6fc;
  --color-constellation-100: #e0e9f0;
  --color-constellation-200: #cbd6df;
  --color-constellation-300: #acb9c4;
  --color-constellation-400: #91a1ad;
  --color-constellation-500: #778996;
  --color-constellation-600: #64747f;
  --color-constellation-700: #505d66;
  --color-constellation-800: #3a444b;
  --color-constellation-900: #282f34;
  --color-constellation-950: #161b1f;
}

SCSS

$constellation: #bccedb;
$constellation-rgb: 188, 206, 219;
$constellation-light: mix(#fff, $constellation, 20%);
$constellation-dark: mix(#000, $constellation, 20%);

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