Paint the Sky

CSS

:root {
  --paint-the-sky: #11eeff;
  --paint-the-sky-rgb: 17 238 255;
  --paint-the-sky-oklch: oklch(0.866 0.146 204.1);
}

.element {
  color: var(--paint-the-sky);
  background-color: hsl(184 100% 53%);
  border-color: oklch(0.866 0.146 204.1);
}

Tailwind CSS v4

@theme {
  --color-paint-the-sky: #11eeff;
  --color-paint-the-sky-50: #c4ffff;
  --color-paint-the-sky-100: #adf7ff;
  --color-paint-the-sky-200: #83e6f3;
  --color-paint-the-sky-300: #42ccdc;
  --color-paint-the-sky-400: #00b6c6;
  --color-paint-the-sky-500: #009fb2;
  --color-paint-the-sky-600: #008797;
  --color-paint-the-sky-700: #006c79;
  --color-paint-the-sky-800: #005058;
  --color-paint-the-sky-900: #00383d;
  --color-paint-the-sky-950: #002227;
}

SCSS

$paint-the-sky: #11eeff;
$paint-the-sky-rgb: 17, 238, 255;
$paint-the-sky-light: mix(#fff, $paint-the-sky, 20%);
$paint-the-sky-dark: mix(#000, $paint-the-sky, 20%);

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