Pale Cornflower

CSS

:root {
  --pale-cornflower: #ced9e1;
  --pale-cornflower-rgb: 206 217 225;
  --pale-cornflower-oklch: oklch(0.879 0.016 239.1);
}

.element {
  color: var(--pale-cornflower);
  background-color: hsl(205 24% 85%);
  border-color: oklch(0.879 0.016 239.1);
}

Tailwind CSS v4

@theme {
  --color-pale-cornflower: #ced9e1;
  --color-pale-cornflower-50: #f1f6f9;
  --color-pale-cornflower-100: #e3e9ed;
  --color-pale-cornflower-200: #ced5db;
  --color-pale-cornflower-300: #b0b9bf;
  --color-pale-cornflower-400: #96a0a7;
  --color-pale-cornflower-500: #7d8890;
  --color-pale-cornflower-600: #6a737a;
  --color-pale-cornflower-700: #545c61;
  --color-pale-cornflower-800: #3d4347;
  --color-pale-cornflower-900: #2a2e31;
  --color-pale-cornflower-950: #181b1d;
}

SCSS

$pale-cornflower: #ced9e1;
$pale-cornflower-rgb: 206, 217, 225;
$pale-cornflower-light: mix(#fff, $pale-cornflower, 20%);
$pale-cornflower-dark: mix(#000, $pale-cornflower, 20%);

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