Polished Ivory

CSS

:root {
  --polished-ivory: #ede0c8;
  --polished-ivory-rgb: 237 224 200;
  --polished-ivory-oklch: oklch(0.911 0.035 82.9);
}

.element {
  color: var(--polished-ivory);
  background-color: hsl(39 51% 86%);
  border-color: oklch(0.911 0.035 82.9);
}

Tailwind CSS v4

@theme {
  --color-polished-ivory: #ede0c8;
  --color-polished-ivory-50: #faf5ea;
  --color-polished-ivory-100: #ede7db;
  --color-polished-ivory-200: #dbd3c4;
  --color-polished-ivory-300: #c0b6a4;
  --color-polished-ivory-400: #a99d88;
  --color-polished-ivory-500: #92846c;
  --color-polished-ivory-600: #7b705c;
  --color-polished-ivory-700: #635a49;
  --color-polished-ivory-800: #494135;
  --color-polished-ivory-900: #322d24;
  --color-polished-ivory-950: #1e1a13;
}

SCSS

$polished-ivory: #ede0c8;
$polished-ivory-rgb: 237, 224, 200;
$polished-ivory-light: mix(#fff, $polished-ivory, 20%);
$polished-ivory-dark: mix(#000, $polished-ivory, 20%);

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