First Rain

CSS

:root {
  --first-rain: #bdd8ec;
  --first-rain-rgb: 189 216 236;
  --first-rain-oklch: oklch(0.869 0.04 240.1);
}

.element {
  color: var(--first-rain);
  background-color: hsl(206 55% 83%);
  border-color: oklch(0.869 0.04 240.1);
}

Tailwind CSS v4

@theme {
  --color-first-rain: #bdd8ec;
  --color-first-rain-50: #ecf7ff;
  --color-first-rain-100: #ddeaf4;
  --color-first-rain-200: #c6d7e4;
  --color-first-rain-300: #a6bacb;
  --color-first-rain-400: #8aa2b4;
  --color-first-rain-500: #6e8a9e;
  --color-first-rain-600: #5e7586;
  --color-first-rain-700: #4b5e6b;
  --color-first-rain-800: #36454f;
  --color-first-rain-900: #252f37;
  --color-first-rain-950: #131c22;
}

SCSS

$first-rain: #bdd8ec;
$first-rain-rgb: 189, 216, 236;
$first-rain-light: mix(#fff, $first-rain, 20%);
$first-rain-dark: mix(#000, $first-rain, 20%);

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