Wild Ginger

CSS

:root {
  --wild-ginger: #825059;
  --wild-ginger-rgb: 130 80 89;
  --wild-ginger-oklch: oklch(0.491 0.068 8.2);
}

.element {
  color: var(--wild-ginger);
  background-color: hsl(349 24% 41%);
  border-color: oklch(0.491 0.068 8.2);
}

Tailwind CSS v4

@theme {
  --color-wild-ginger: #825059;
  --color-wild-ginger-50: #ffeef0;
  --color-wild-ginger-100: #fedfe2;
  --color-wild-ginger-200: #f0c9cd;
  --color-wild-ginger-300: #d8aaaf;
  --color-wild-ginger-400: #c38e97;
  --color-wild-ginger-500: #ae737d;
  --color-wild-ginger-600: #93626a;
  --color-wild-ginger-700: #764e55;
  --color-wild-ginger-800: #57383f;
  --color-wild-ginger-900: #3d272b;
  --color-wild-ginger-950: #261518;
}

SCSS

$wild-ginger: #825059;
$wild-ginger-rgb: 130, 80, 89;
$wild-ginger-light: mix(#fff, $wild-ginger, 20%);
$wild-ginger-dark: mix(#000, $wild-ginger, 20%);

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