Northern Sky

CSS

:root {
  --northern-sky: #8daccc;
  --northern-sky-rgb: 141 172 204;
  --northern-sky-oklch: oklch(0.732 0.058 249.4);
}

.element {
  color: var(--northern-sky);
  background-color: hsl(210 38% 68%);
  border-color: oklch(0.732 0.058 249.4);
}

Tailwind CSS v4

@theme {
  --color-northern-sky: #8daccc;
  --color-northern-sky-50: #eaf7ff;
  --color-northern-sky-100: #daeafb;
  --color-northern-sky-200: #c3d7ed;
  --color-northern-sky-300: #a2bad5;
  --color-northern-sky-400: #85a2c0;
  --color-northern-sky-500: #698aab;
  --color-northern-sky-600: #597491;
  --color-northern-sky-700: #475d74;
  --color-northern-sky-800: #324456;
  --color-northern-sky-900: #222f3c;
  --color-northern-sky-950: #111c26;
}

SCSS

$northern-sky: #8daccc;
$northern-sky-rgb: 141, 172, 204;
$northern-sky-light: mix(#fff, $northern-sky, 20%);
$northern-sky-dark: mix(#000, $northern-sky, 20%);

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