Power Peony

CSS

:root {
  --power-peony: #ee5588;
  --power-peony-rgb: 238 85 136;
  --power-peony-oklch: oklch(0.667 0.192 3.4);
}

.element {
  color: var(--power-peony);
  background-color: hsl(340 82% 63%);
  border-color: oklch(0.667 0.192 3.4);
}

Tailwind CSS v4

@theme {
  --color-power-peony: #ee5588;
  --color-power-peony-50: #ffdfed;
  --color-power-peony-100: #ffcddf;
  --color-power-peony-200: #ffb1c9;
  --color-power-peony-300: #ff8aa9;
  --color-power-peony-400: #f66593;
  --color-power-peony-500: #e43879;
  --color-power-peony-600: #c13266;
  --color-power-peony-700: #9b2852;
  --color-power-peony-800: #731b3e;
  --color-power-peony-900: #51122b;
  --color-power-peony-950: #360318;
}

SCSS

$power-peony: #ee5588;
$power-peony-rgb: 238, 85, 136;
$power-peony-light: mix(#fff, $power-peony, 20%);
$power-peony-dark: mix(#000, $power-peony, 20%);

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