Pressed Blossoms

CSS

:root {
  --pressed-blossoms: #c2968b;
  --pressed-blossoms-rgb: 194 150 139;
  --pressed-blossoms-oklch: oklch(0.711 0.056 34.4);
}

.element {
  color: var(--pressed-blossoms);
  background-color: hsl(12 31% 65%);
  border-color: oklch(0.711 0.056 34.4);
}

Tailwind CSS v4

@theme {
  --color-pressed-blossoms: #c2968b;
  --color-pressed-blossoms-50: #fff0ea;
  --color-pressed-blossoms-100: #fae2db;
  --color-pressed-blossoms-200: #ebcdc4;
  --color-pressed-blossoms-300: #d2aea4;
  --color-pressed-blossoms-400: #bd9389;
  --color-pressed-blossoms-500: #a8796e;
  --color-pressed-blossoms-600: #8e675d;
  --color-pressed-blossoms-700: #72524a;
  --color-pressed-blossoms-800: #543b36;
  --color-pressed-blossoms-900: #3b2925;
  --color-pressed-blossoms-950: #251714;
}

SCSS

$pressed-blossoms: #c2968b;
$pressed-blossoms-rgb: 194, 150, 139;
$pressed-blossoms-light: mix(#fff, $pressed-blossoms, 20%);
$pressed-blossoms-dark: mix(#000, $pressed-blossoms, 20%);

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