Blue Flax

CSS

:root {
  --blue-flax: #ddebed;
  --blue-flax-rgb: 221 235 237;
  --blue-flax-oklch: oklch(0.93 0.015 207.1);
}

.element {
  color: var(--blue-flax);
  background-color: hsl(188 31% 90%);
  border-color: oklch(0.93 0.015 207.1);
}

Tailwind CSS v4

@theme {
  --color-blue-flax: #ddebed;
  --color-blue-flax-50: #f0f6f7;
  --color-blue-flax-100: #e2e9ea;
  --color-blue-flax-200: #cdd6d8;
  --color-blue-flax-300: #afbabb;
  --color-blue-flax-400: #95a1a3;
  --color-blue-flax-500: #7b898b;
  --color-blue-flax-600: #687476;
  --color-blue-flax-700: #535d5e;
  --color-blue-flax-800: #3d4445;
  --color-blue-flax-900: #2a2f30;
  --color-blue-flax-950: #171b1c;
}

SCSS

$blue-flax: #ddebed;
$blue-flax-rgb: 221, 235, 237;
$blue-flax-light: mix(#fff, $blue-flax, 20%);
$blue-flax-dark: mix(#000, $blue-flax, 20%);

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