Peony Prize

CSS

:root {
  --peony-prize: #faddd4;
  --peony-prize-rgb: 250 221 212;
  --peony-prize-oklch: oklch(0.919 0.035 38);
}

.element {
  color: var(--peony-prize);
  background-color: hsl(14 79% 91%);
  border-color: oklch(0.919 0.035 38);
}

Tailwind CSS v4

@theme {
  --color-peony-prize: #faddd4;
  --color-peony-prize-50: #fff2ee;
  --color-peony-prize-100: #f3e4df;
  --color-peony-prize-200: #e2d0c9;
  --color-peony-prize-300: #c8b2aa;
  --color-peony-prize-400: #b29890;
  --color-peony-prize-500: #9b7f76;
  --color-peony-prize-600: #836b64;
  --color-peony-prize-700: #695650;
  --color-peony-prize-800: #4e3e3a;
  --color-peony-prize-900: #362b28;
  --color-peony-prize-950: #211816;
}

SCSS

$peony-prize: #faddd4;
$peony-prize-rgb: 250, 221, 212;
$peony-prize-light: mix(#fff, $peony-prize, 20%);
$peony-prize-dark: mix(#000, $peony-prize, 20%);

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