Impressionist Sky

CSS

:root {
  --impressionist-sky: #b9cee0;
  --impressionist-sky-rgb: 185 206 224;
  --impressionist-sky-oklch: oklch(0.841 0.034 244);
}

.element {
  color: var(--impressionist-sky);
  background-color: hsl(208 39% 80%);
  border-color: oklch(0.841 0.034 244);
}

Tailwind CSS v4

@theme {
  --color-impressionist-sky: #b9cee0;
  --color-impressionist-sky-50: #eef6ff;
  --color-impressionist-sky-100: #dfe9f3;
  --color-impressionist-sky-200: #c9d6e2;
  --color-impressionist-sky-300: #aabac8;
  --color-impressionist-sky-400: #8ea1b1;
  --color-impressionist-sky-500: #74899b;
  --color-impressionist-sky-600: #627483;
  --color-impressionist-sky-700: #4e5d69;
  --color-impressionist-sky-800: #38444d;
  --color-impressionist-sky-900: #272f36;
  --color-impressionist-sky-950: #151c21;
}

SCSS

$impressionist-sky: #b9cee0;
$impressionist-sky-rgb: 185, 206, 224;
$impressionist-sky-light: mix(#fff, $impressionist-sky, 20%);
$impressionist-sky-dark: mix(#000, $impressionist-sky, 20%);

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