Sky Wanderer

CSS

:root {
  --sky-wanderer: #b8dced;
  --sky-wanderer-rgb: 184 220 237;
  --sky-wanderer-oklch: oklch(0.874 0.045 228.1);
}

.element {
  color: var(--sky-wanderer);
  background-color: hsl(199 60% 83%);
  border-color: oklch(0.874 0.045 228.1);
}

Tailwind CSS v4

@theme {
  --color-sky-wanderer: #b8dced;
  --color-sky-wanderer-50: #e9f8ff;
  --color-sky-wanderer-100: #daebf4;
  --color-sky-wanderer-200: #c2d8e4;
  --color-sky-wanderer-300: #a1bcca;
  --color-sky-wanderer-400: #83a4b3;
  --color-sky-wanderer-500: #678c9e;
  --color-sky-wanderer-600: #587785;
  --color-sky-wanderer-700: #465f6b;
  --color-sky-wanderer-800: #32464e;
  --color-sky-wanderer-900: #223036;
  --color-sky-wanderer-950: #111c21;
}

SCSS

$sky-wanderer: #b8dced;
$sky-wanderer-rgb: 184, 220, 237;
$sky-wanderer-light: mix(#fff, $sky-wanderer, 20%);
$sky-wanderer-dark: mix(#000, $sky-wanderer, 20%);

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