Sky’s the Limit

CSS

:root {
  --sky-s-the-limit: #bbcee0;
  --sky-s-the-limit-rgb: 187 206 224;
  --sky-s-the-limit-oklch: oklch(0.843 0.033 246.7);
}

.element {
  color: var(--sky-s-the-limit);
  background-color: hsl(209 37% 81%);
  border-color: oklch(0.843 0.033 246.7);
}

Tailwind CSS v4

@theme {
  --color-sky-s-the-limit: #bbcee0;
  --color-sky-s-the-limit-50: #eef6fe;
  --color-sky-s-the-limit-100: #e0e9f3;
  --color-sky-s-the-limit-200: #cad6e2;
  --color-sky-s-the-limit-300: #abb9c8;
  --color-sky-s-the-limit-400: #8fa1b1;
  --color-sky-s-the-limit-500: #75899b;
  --color-sky-s-the-limit-600: #637483;
  --color-sky-s-the-limit-700: #4f5d69;
  --color-sky-s-the-limit-800: #39444d;
  --color-sky-s-the-limit-900: #272f36;
  --color-sky-s-the-limit-950: #151b21;
}

SCSS

$sky-s-the-limit: #bbcee0;
$sky-s-the-limit-rgb: 187, 206, 224;
$sky-s-the-limit-light: mix(#fff, $sky-s-the-limit, 20%);
$sky-s-the-limit-dark: mix(#000, $sky-s-the-limit, 20%);

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