Spiced Orange

CSS

:root {
  --spiced-orange: #edc7b6;
  --spiced-orange-rgb: 237 199 182;
  --spiced-orange-oklch: oklch(0.858 0.049 45.5);
}

.element {
  color: var(--spiced-orange);
  background-color: hsl(19 60% 82%);
  border-color: oklch(0.858 0.049 45.5);
}

Tailwind CSS v4

@theme {
  --color-spiced-orange: #edc7b6;
  --color-spiced-orange-50: #fff1e9;
  --color-spiced-orange-100: #f7e3da;
  --color-spiced-orange-200: #e7cec3;
  --color-spiced-orange-300: #ceb0a2;
  --color-spiced-orange-400: #b89687;
  --color-spiced-orange-500: #a37c6b;
  --color-spiced-orange-600: #89695b;
  --color-spiced-orange-700: #6e5448;
  --color-spiced-orange-800: #513d35;
  --color-spiced-orange-900: #392a24;
  --color-spiced-orange-950: #231813;
}

SCSS

$spiced-orange: #edc7b6;
$spiced-orange-rgb: 237, 199, 182;
$spiced-orange-light: mix(#fff, $spiced-orange, 20%);
$spiced-orange-dark: mix(#000, $spiced-orange, 20%);

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