Partly Cloudy

CSS

:root {
  --partly-cloudy: #9dbbcd;
  --partly-cloudy-rgb: 157 187 205;
  --partly-cloudy-oklch: oklch(0.776 0.042 234.4);
}

.element {
  color: var(--partly-cloudy);
  background-color: hsl(203 32% 71%);
  border-color: oklch(0.776 0.042 234.4);
}

Tailwind CSS v4

@theme {
  --color-partly-cloudy: #9dbbcd;
  --color-partly-cloudy-50: #ebf7ff;
  --color-partly-cloudy-100: #dbeaf4;
  --color-partly-cloudy-200: #c4d7e4;
  --color-partly-cloudy-300: #a4bbca;
  --color-partly-cloudy-400: #87a3b4;
  --color-partly-cloudy-500: #6b8b9e;
  --color-partly-cloudy-600: #5b7685;
  --color-partly-cloudy-700: #495e6b;
  --color-partly-cloudy-800: #34454e;
  --color-partly-cloudy-900: #233037;
  --color-partly-cloudy-950: #121c21;
}

SCSS

$partly-cloudy: #9dbbcd;
$partly-cloudy-rgb: 157, 187, 205;
$partly-cloudy-light: mix(#fff, $partly-cloudy, 20%);
$partly-cloudy-dark: mix(#000, $partly-cloudy, 20%);

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