Orange Marmalade

CSS

:root {
  --orange-marmalade: #faac72;
  --orange-marmalade-rgb: 250 172 114;
  --orange-marmalade-oklch: oklch(0.808 0.118 56.8);
}

.element {
  color: var(--orange-marmalade);
  background-color: hsl(26 93% 71%);
  border-color: oklch(0.808 0.118 56.8);
}

Tailwind CSS v4

@theme {
  --color-orange-marmalade: #faac72;
  --color-orange-marmalade-50: #ffeed4;
  --color-orange-marmalade-100: #ffdfc2;
  --color-orange-marmalade-200: #fbc9a2;
  --color-orange-marmalade-300: #e5a97a;
  --color-orange-marmalade-400: #d38b55;
  --color-orange-marmalade-500: #c06f2b;
  --color-orange-marmalade-600: #a25e26;
  --color-orange-marmalade-700: #824b1e;
  --color-orange-marmalade-800: #613615;
  --color-orange-marmalade-900: #44250d;
  --color-orange-marmalade-950: #2c1302;
}

SCSS

$orange-marmalade: #faac72;
$orange-marmalade-rgb: 250, 172, 114;
$orange-marmalade-light: mix(#fff, $orange-marmalade, 20%);
$orange-marmalade-dark: mix(#000, $orange-marmalade, 20%);

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