Spanish Cream

CSS

:root {
  --spanish-cream: #fce5c0;
  --spanish-cream-rgb: 252 229 192;
  --spanish-cream-oklch: oklch(0.931 0.054 79.7);
}

.element {
  color: var(--spanish-cream);
  background-color: hsl(37 91% 87%);
  border-color: oklch(0.931 0.054 79.7);
}

Tailwind CSS v4

@theme {
  --color-spanish-cream: #fce5c0;
  --color-spanish-cream-50: #fdf4e4;
  --color-spanish-cream-100: #f1e7d4;
  --color-spanish-cream-200: #e0d2bb;
  --color-spanish-cream-300: #c6b598;
  --color-spanish-cream-400: #b09b7a;
  --color-spanish-cream-500: #9a825d;
  --color-spanish-cream-600: #826e4f;
  --color-spanish-cream-700: #68583f;
  --color-spanish-cream-800: #4d402d;
  --color-spanish-cream-900: #352c1e;
  --color-spanish-cream-950: #21190e;
}

SCSS

$spanish-cream: #fce5c0;
$spanish-cream-rgb: 252, 229, 192;
$spanish-cream-light: mix(#fff, $spanish-cream, 20%);
$spanish-cream-dark: mix(#000, $spanish-cream, 20%);

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