Winter Bloom

CSS

:root {
  --winter-bloom: #582d48;
  --winter-bloom-rgb: 88 45 72;
  --winter-bloom-oklch: oklch(0.363 0.073 343);
}

.element {
  color: var(--winter-bloom);
  background-color: hsl(322 32% 26%);
  border-color: oklch(0.363 0.073 343);
}

Tailwind CSS v4

@theme {
  --color-winter-bloom: #582d48;
  --color-winter-bloom-50: #ffedfa;
  --color-winter-bloom-100: #fbdfed;
  --color-winter-bloom-200: #ecc8db;
  --color-winter-bloom-300: #d4a9c0;
  --color-winter-bloom-400: #be8daa;
  --color-winter-bloom-500: #a97393;
  --color-winter-bloom-600: #8f617c;
  --color-winter-bloom-700: #724e64;
  --color-winter-bloom-800: #54384a;
  --color-winter-bloom-900: #3b2633;
  --color-winter-bloom-950: #24151f;
}

SCSS

$winter-bloom: #582d48;
$winter-bloom-rgb: 88, 45, 72;
$winter-bloom-light: mix(#fff, $winter-bloom, 20%);
$winter-bloom-dark: mix(#000, $winter-bloom, 20%);

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