Beyond the Clouds

CSS

:root {
  --beyond-the-clouds: #aaeeff;
  --beyond-the-clouds-rgb: 170 238 255;
  --beyond-the-clouds-oklch: oklch(0.91 0.071 215);
}

.element {
  color: var(--beyond-the-clouds);
  background-color: hsl(192 100% 83%);
  border-color: oklch(0.91 0.071 215);
}

Tailwind CSS v4

@theme {
  --color-beyond-the-clouds: #aaeeff;
  --color-beyond-the-clouds-50: #dffbff;
  --color-beyond-the-clouds-100: #ceeef8;
  --color-beyond-the-clouds-200: #b3dce8;
  --color-beyond-the-clouds-300: #8ec1cf;
  --color-beyond-the-clouds-400: #6baab9;
  --color-beyond-the-clouds-500: #4792a4;
  --color-beyond-the-clouds-600: #3d7c8a;
  --color-beyond-the-clouds-700: #31636f;
  --color-beyond-the-clouds-800: #214951;
  --color-beyond-the-clouds-900: #163338;
  --color-beyond-the-clouds-950: #071e23;
}

SCSS

$beyond-the-clouds: #aaeeff;
$beyond-the-clouds-rgb: 170, 238, 255;
$beyond-the-clouds-light: mix(#fff, $beyond-the-clouds, 20%);
$beyond-the-clouds-dark: mix(#000, $beyond-the-clouds, 20%);

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