Yellow Cream

CSS

:root {
  --yellow-cream: #eed36c;
  --yellow-cream-rgb: 238 211 108;
  --yellow-cream-oklch: oklch(0.869 0.127 94.9);
}

.element {
  color: var(--yellow-cream);
  background-color: hsl(48 79% 68%);
  border-color: oklch(0.869 0.127 94.9);
}

Tailwind CSS v4

@theme {
  --color-yellow-cream: #eed36c;
  --color-yellow-cream-50: #fff6cd;
  --color-yellow-cream-100: #f3e9b9;
  --color-yellow-cream-200: #e3d596;
  --color-yellow-cream-300: #cab869;
  --color-yellow-cream-400: #b69d3a;
  --color-yellow-cream-500: #a18400;
  --color-yellow-cream-600: #887000;
  --color-yellow-cream-700: #6d5900;
  --color-yellow-cream-800: #524000;
  --color-yellow-cream-900: #392c00;
  --color-yellow-cream-950: #231900;
}

SCSS

$yellow-cream: #eed36c;
$yellow-cream-rgb: 238, 211, 108;
$yellow-cream-light: mix(#fff, $yellow-cream, 20%);
$yellow-cream-dark: mix(#000, $yellow-cream, 20%);

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