Fame Orange

CSS

:root {
  --fame-orange: #db9c7b;
  --fame-orange-rgb: 219 156 123;
  --fame-orange-oklch: oklch(0.746 0.088 48.6);
}

.element {
  color: var(--fame-orange);
  background-color: hsl(21 57% 67%);
  border-color: oklch(0.746 0.088 48.6);
}

Tailwind CSS v4

@theme {
  --color-fame-orange: #db9c7b;
  --color-fame-orange-50: #ffefdf;
  --color-fame-orange-100: #ffe0ce;
  --color-fame-orange-200: #f4cab3;
  --color-fame-orange-300: #ddab8f;
  --color-fame-orange-400: #ca8f70;
  --color-fame-orange-500: #b67450;
  --color-fame-orange-600: #996244;
  --color-fame-orange-700: #7b4e36;
  --color-fame-orange-800: #5c3827;
  --color-fame-orange-900: #40271a;
  --color-fame-orange-950: #29150b;
}

SCSS

$fame-orange: #db9c7b;
$fame-orange-rgb: 219, 156, 123;
$fame-orange-light: mix(#fff, $fame-orange, 20%);
$fame-orange-dark: mix(#000, $fame-orange, 20%);

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