Hazy Yellow

CSS

:root {
  --hazy-yellow: #eacea0;
  --hazy-yellow-rgb: 234 206 160;
  --hazy-yellow-oklch: oklch(0.864 0.068 79.9);
}

.element {
  color: var(--hazy-yellow);
  background-color: hsl(37 64% 77%);
  border-color: oklch(0.864 0.068 79.9);
}

Tailwind CSS v4

@theme {
  --color-hazy-yellow: #eacea0;
  --color-hazy-yellow-50: #fff4e0;
  --color-hazy-yellow-100: #f3e6cf;
  --color-hazy-yellow-200: #e3d2b4;
  --color-hazy-yellow-300: #c9b590;
  --color-hazy-yellow-400: #b49a71;
  --color-hazy-yellow-500: #9e8151;
  --color-hazy-yellow-600: #866e45;
  --color-hazy-yellow-700: #6b5837;
  --color-hazy-yellow-800: #4f4027;
  --color-hazy-yellow-900: #372c1a;
  --color-hazy-yellow-950: #22190a;
}

SCSS

$hazy-yellow: #eacea0;
$hazy-yellow-rgb: 234, 206, 160;
$hazy-yellow-light: mix(#fff, $hazy-yellow, 20%);
$hazy-yellow-dark: mix(#000, $hazy-yellow, 20%);

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