Orange Confection

CSS

:root {
  --orange-confection: #f4e3d2;
  --orange-confection-rgb: 244 227 210;
  --orange-confection-oklch: oklch(0.925 0.029 67.5);
}

.element {
  color: var(--orange-confection);
  background-color: hsl(30 61% 89%);
  border-color: oklch(0.925 0.029 67.5);
}

Tailwind CSS v4

@theme {
  --color-orange-confection: #f4e3d2;
  --color-orange-confection-50: #fbf4ec;
  --color-orange-confection-100: #efe6de;
  --color-orange-confection-200: #ddd2c7;
  --color-orange-confection-300: #c2b5a8;
  --color-orange-confection-400: #ab9c8c;
  --color-orange-confection-500: #948372;
  --color-orange-confection-600: #7d6f61;
  --color-orange-confection-700: #64594d;
  --color-orange-confection-800: #4a4038;
  --color-orange-confection-900: #332c26;
  --color-orange-confection-950: #1f1915;
}

SCSS

$orange-confection: #f4e3d2;
$orange-confection-rgb: 244, 227, 210;
$orange-confection-light: mix(#fff, $orange-confection, 20%);
$orange-confection-dark: mix(#000, $orange-confection, 20%);

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