Pale Bloom

CSS

:root {
  --pale-bloom: #f0eae1;
  --pale-bloom-rgb: 240 234 225;
  --pale-bloom-oklch: oklch(0.939 0.014 78.3);
}

.element {
  color: var(--pale-bloom);
  background-color: hsl(36 33% 91%);
  border-color: oklch(0.939 0.014 78.3);
}

Tailwind CSS v4

@theme {
  --color-pale-bloom: #f0eae1;
  --color-pale-bloom-50: #f7f5f1;
  --color-pale-bloom-100: #eae7e3;
  --color-pale-bloom-200: #d7d4ce;
  --color-pale-bloom-300: #bbb7b0;
  --color-pale-bloom-400: #a39e96;
  --color-pale-bloom-500: #8b857c;
  --color-pale-bloom-600: #767169;
  --color-pale-bloom-700: #5e5a54;
  --color-pale-bloom-800: #45423d;
  --color-pale-bloom-900: #302d2a;
  --color-pale-bloom-950: #1c1a18;
}

SCSS

$pale-bloom: #f0eae1;
$pale-bloom-rgb: 240, 234, 225;
$pale-bloom-light: mix(#fff, $pale-bloom, 20%);
$pale-bloom-dark: mix(#000, $pale-bloom, 20%);

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