Pale Egg

CSS

:root {
  --pale-egg: #fde8d0;
  --pale-egg-rgb: 253 232 208;
  --pale-egg-oklch: oklch(0.942 0.039 71);
}

.element {
  color: var(--pale-egg);
  background-color: hsl(32 92% 90%);
  border-color: oklch(0.942 0.039 71);
}

Tailwind CSS v4

@theme {
  --color-pale-egg: #fde8d0;
  --color-pale-egg-50: #fcf4e9;
  --color-pale-egg-100: #f0e6da;
  --color-pale-egg-200: #dfd2c2;
  --color-pale-egg-300: #c4b5a2;
  --color-pale-egg-400: #ae9b86;
  --color-pale-egg-500: #97826a;
  --color-pale-egg-600: #806e5a;
  --color-pale-egg-700: #665848;
  --color-pale-egg-800: #4b4034;
  --color-pale-egg-900: #342c23;
  --color-pale-egg-950: #201912;
}

SCSS

$pale-egg: #fde8d0;
$pale-egg-rgb: 253, 232, 208;
$pale-egg-light: mix(#fff, $pale-egg, 20%);
$pale-egg-dark: mix(#000, $pale-egg, 20%);

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