Earth Yellow

CSS

:root {
  --earth-yellow: #e1a95f;
  --earth-yellow-rgb: 225 169 95;
  --earth-yellow-oklch: oklch(0.772 0.113 72.5);
}

.element {
  color: var(--earth-yellow);
  background-color: hsl(34 68% 63%);
  border-color: oklch(0.772 0.113 72.5);
}

Tailwind CSS v4

@theme {
  --color-earth-yellow: #e1a95f;
  --color-earth-yellow-50: #fff1d2;
  --color-earth-yellow-100: #ffe3bf;
  --color-earth-yellow-200: #f1ce9f;
  --color-earth-yellow-300: #daaf75;
  --color-earth-yellow-400: #c7934e;
  --color-earth-yellow-500: #b3781b;
  --color-earth-yellow-600: #97661a;
  --color-earth-yellow-700: #795215;
  --color-earth-yellow-800: #5b3b0e;
  --color-earth-yellow-900: #3f2808;
  --color-earth-yellow-950: #281600;
}

SCSS

$earth-yellow: #e1a95f;
$earth-yellow-rgb: 225, 169, 95;
$earth-yellow-light: mix(#fff, $earth-yellow, 20%);
$earth-yellow-dark: mix(#000, $earth-yellow, 20%);

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