Journey to the Sky

CSS

:root {
  --journey-to-the-sky: #cdeced;
  --journey-to-the-sky-rgb: 205 236 237;
  --journey-to-the-sky-oklch: oklch(0.921 0.032 199);
}

.element {
  color: var(--journey-to-the-sky);
  background-color: hsl(182 47% 87%);
  border-color: oklch(0.921 0.032 199);
}

Tailwind CSS v4

@theme {
  --color-journey-to-the-sky: #cdeced;
  --color-journey-to-the-sky-50: #ebf8f9;
  --color-journey-to-the-sky-100: #dcebec;
  --color-journey-to-the-sky-200: #c5d9da;
  --color-journey-to-the-sky-300: #a5bdbe;
  --color-journey-to-the-sky-400: #89a5a6;
  --color-journey-to-the-sky-500: #6d8d8e;
  --color-journey-to-the-sky-600: #5d7778;
  --color-journey-to-the-sky-700: #4a6060;
  --color-journey-to-the-sky-800: #354646;
  --color-journey-to-the-sky-900: #243031;
  --color-journey-to-the-sky-950: #131d1d;
}

SCSS

$journey-to-the-sky: #cdeced;
$journey-to-the-sky-rgb: 205, 236, 237;
$journey-to-the-sky-light: mix(#fff, $journey-to-the-sky, 20%);
$journey-to-the-sky-dark: mix(#000, $journey-to-the-sky, 20%);

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