Ginger Milk

CSS

:root {
  --ginger-milk: #f7a454;
  --ginger-milk-rgb: 247 164 84;
  --ginger-milk-oklch: oklch(0.786 0.137 62.4);
}

.element {
  color: var(--ginger-milk);
  background-color: hsl(29 91% 65%);
  border-color: oklch(0.786 0.137 62.4);
}

Tailwind CSS v4

@theme {
  --color-ginger-milk: #f7a454;
  --color-ginger-milk-50: #ffeecd;
  --color-ginger-milk-100: #ffdfb9;
  --color-ginger-milk-200: #fec896;
  --color-ginger-milk-300: #e8a86a;
  --color-ginger-milk-400: #d78a3e;
  --color-ginger-milk-500: #c46d00;
  --color-ginger-milk-600: #a65d00;
  --color-ginger-milk-700: #854a00;
  --color-ginger-milk-800: #643500;
  --color-ginger-milk-900: #462401;
  --color-ginger-milk-950: #2d1200;
}

SCSS

$ginger-milk: #f7a454;
$ginger-milk-rgb: 247, 164, 84;
$ginger-milk-light: mix(#fff, $ginger-milk, 20%);
$ginger-milk-dark: mix(#000, $ginger-milk, 20%);

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