Ash Yellow

CSS

:root {
  --ash-yellow: #f0bd7e;
  --ash-yellow-rgb: 240 189 126;
  --ash-yellow-oklch: oklch(0.83 0.099 71.6);
}

.element {
  color: var(--ash-yellow);
  background-color: hsl(33 79% 72%);
  border-color: oklch(0.83 0.099 71.6);
}

Tailwind CSS v4

@theme {
  --color-ash-yellow: #f0bd7e;
  --color-ash-yellow-50: #fff2d7;
  --color-ash-yellow-100: #fde4c4;
  --color-ash-yellow-200: #eecfa6;
  --color-ash-yellow-300: #d6b07e;
  --color-ash-yellow-400: #c3955a;
  --color-ash-yellow-500: #af7a32;
  --color-ash-yellow-600: #94682c;
  --color-ash-yellow-700: #765323;
  --color-ash-yellow-800: #583c18;
  --color-ash-yellow-900: #3e290f;
  --color-ash-yellow-950: #271703;
}

SCSS

$ash-yellow: #f0bd7e;
$ash-yellow-rgb: 240, 189, 126;
$ash-yellow-light: mix(#fff, $ash-yellow, 20%);
$ash-yellow-dark: mix(#000, $ash-yellow, 20%);

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