Enchanted Evening

CSS

:root {
  --enchanted-evening: #d3e9ec;
  --enchanted-evening-rgb: 211 233 236;
  --enchanted-evening-oklch: oklch(0.919 0.024 206.6);
}

.element {
  color: var(--enchanted-evening);
  background-color: hsl(187 40% 88%);
  border-color: oklch(0.919 0.024 206.6);
}

Tailwind CSS v4

@theme {
  --color-enchanted-evening: #d3e9ec;
  --color-enchanted-evening-50: #eef7f9;
  --color-enchanted-evening-100: #dfeaec;
  --color-enchanted-evening-200: #c9d7da;
  --color-enchanted-evening-300: #aabbbe;
  --color-enchanted-evening-400: #8fa3a5;
  --color-enchanted-evening-500: #758b8e;
  --color-enchanted-evening-600: #637678;
  --color-enchanted-evening-700: #4f5e60;
  --color-enchanted-evening-800: #394546;
  --color-enchanted-evening-900: #273031;
  --color-enchanted-evening-950: #151c1d;
}

SCSS

$enchanted-evening: #d3e9ec;
$enchanted-evening-rgb: 211, 233, 236;
$enchanted-evening-light: mix(#fff, $enchanted-evening, 20%);
$enchanted-evening-dark: mix(#000, $enchanted-evening, 20%);

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