Rain

CSS

:root {
  --rain: #abbebf;
  --rain-rgb: 171 190 191;
  --rain-oklch: oklch(0.787 0.021 200.6);
}

.element {
  color: var(--rain);
  background-color: hsl(183 14% 71%);
  border-color: oklch(0.787 0.021 200.6);
}

Tailwind CSS v4

@theme {
  --color-rain: #abbebf;
  --color-rain-50: #eff7f8;
  --color-rain-100: #e0eaeb;
  --color-rain-200: #cbd7d8;
  --color-rain-300: #acbbbc;
  --color-rain-400: #91a2a3;
  --color-rain-500: #778b8c;
  --color-rain-600: #657576;
  --color-rain-700: #505e5f;
  --color-rain-800: #3a4545;
  --color-rain-900: #282f30;
  --color-rain-950: #161c1c;
}

SCSS

$rain: #abbebf;
$rain-rgb: 171, 190, 191;
$rain-light: mix(#fff, $rain, 20%);
$rain-dark: mix(#000, $rain, 20%);

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