Crushed Peony

CSS

:root {
  --crushed-peony: #e4ddd8;
  --crushed-peony-rgb: 228 221 216;
  --crushed-peony-oklch: oklch(0.902 0.01 58.2);
}

.element {
  color: var(--crushed-peony);
  background-color: hsl(25 18% 87%);
  border-color: oklch(0.902 0.01 58.2);
}

Tailwind CSS v4

@theme {
  --color-crushed-peony: #e4ddd8;
  --color-crushed-peony-50: #f7f4f2;
  --color-crushed-peony-100: #eae7e4;
  --color-crushed-peony-200: #d8d3d0;
  --color-crushed-peony-300: #bbb6b2;
  --color-crushed-peony-400: #a39d99;
  --color-crushed-peony-500: #8c8580;
  --color-crushed-peony-600: #76706c;
  --color-crushed-peony-700: #5e5a56;
  --color-crushed-peony-800: #45413f;
  --color-crushed-peony-900: #302d2b;
  --color-crushed-peony-950: #1c1a19;
}

SCSS

$crushed-peony: #e4ddd8;
$crushed-peony-rgb: 228, 221, 216;
$crushed-peony-light: mix(#fff, $crushed-peony, 20%);
$crushed-peony-dark: mix(#000, $crushed-peony, 20%);

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