Ginger Dough

CSS

:root {
  --ginger-dough: #b06d3b;
  --ginger-dough-rgb: 176 109 59;
  --ginger-dough-oklch: oklch(0.598 0.108 55.6);
}

.element {
  color: var(--ginger-dough);
  background-color: hsl(26 50% 46%);
  border-color: oklch(0.598 0.108 55.6);
}

Tailwind CSS v4

@theme {
  --color-ginger-dough: #b06d3b;
  --color-ginger-dough-50: #ffeed8;
  --color-ginger-dough-100: #ffe0c5;
  --color-ginger-dough-200: #f8c9a8;
  --color-ginger-dough-300: #e2aa81;
  --color-ginger-dough-400: #cf8d5e;
  --color-ginger-dough-500: #bc7138;
  --color-ginger-dough-600: #9f6031;
  --color-ginger-dough-700: #7f4d27;
  --color-ginger-dough-800: #5f371c;
  --color-ginger-dough-900: #432612;
  --color-ginger-dough-950: #2b1405;
}

SCSS

$ginger-dough: #b06d3b;
$ginger-dough-rgb: 176, 109, 59;
$ginger-dough-light: mix(#fff, $ginger-dough, 20%);
$ginger-dough-dark: mix(#000, $ginger-dough, 20%);

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