Wild Orchid

CSS

:root {
  --wild-orchid: #d979a2;
  --wild-orchid-rgb: 217 121 162;
  --wild-orchid-oklch: oklch(0.694 0.128 353.9);
}

.element {
  color: var(--wild-orchid);
  background-color: hsl(334 56% 66%);
  border-color: oklch(0.694 0.128 353.9);
}

Tailwind CSS v4

@theme {
  --color-wild-orchid: #d979a2;
  --color-wild-orchid-50: #ffe7f6;
  --color-wild-orchid-100: #ffd7e9;
  --color-wild-orchid-200: #ffbed6;
  --color-wild-orchid-300: #ec9cba;
  --color-wild-orchid-400: #d87da4;
  --color-wild-orchid-500: #c55e8c;
  --color-wild-orchid-600: #a65076;
  --color-wild-orchid-700: #86405f;
  --color-wild-orchid-800: #632e47;
  --color-wild-orchid-900: #451f31;
  --color-wild-orchid-950: #2d0e1d;
}

SCSS

$wild-orchid: #d979a2;
$wild-orchid-rgb: 217, 121, 162;
$wild-orchid-light: mix(#fff, $wild-orchid, 20%);
$wild-orchid-dark: mix(#000, $wild-orchid, 20%);

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