Orange Flambe

CSS

:root {
  --orange-flambe: #a96f55;
  --orange-flambe-rgb: 169 111 85;
  --orange-flambe-oklch: oklch(0.597 0.083 44.9);
}

.element {
  color: var(--orange-flambe);
  background-color: hsl(19 33% 50%);
  border-color: oklch(0.597 0.083 44.9);
}

Tailwind CSS v4

@theme {
  --color-orange-flambe: #a96f55;
  --color-orange-flambe-50: #ffefe1;
  --color-orange-flambe-100: #ffe0d1;
  --color-orange-flambe-200: #f3cab6;
  --color-orange-flambe-300: #dcab93;
  --color-orange-flambe-400: #c98f75;
  --color-orange-flambe-500: #b47457;
  --color-orange-flambe-600: #98624a;
  --color-orange-flambe-700: #7a4f3b;
  --color-orange-flambe-800: #5b392b;
  --color-orange-flambe-900: #40271d;
  --color-orange-flambe-950: #28150d;
}

SCSS

$orange-flambe: #a96f55;
$orange-flambe-rgb: 169, 111, 85;
$orange-flambe-light: mix(#fff, $orange-flambe, 20%);
$orange-flambe-dark: mix(#000, $orange-flambe, 20%);

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