Pinch of Pearl

CSS

:root {
  --pinch-of-pearl: #fff8e3;
  --pinch-of-pearl-rgb: 255 248 227;
  --pinch-of-pearl-oklch: oklch(0.979 0.028 91.6);
}

.element {
  color: var(--pinch-of-pearl);
  background-color: hsl(45 100% 95%);
  border-color: oklch(0.979 0.028 91.6);
}

Tailwind CSS v4

@theme {
  --color-pinch-of-pearl: #fff8e3;
  --color-pinch-of-pearl-50: #f8f5ec;
  --color-pinch-of-pearl-100: #ebe8dd;
  --color-pinch-of-pearl-200: #d8d4c7;
  --color-pinch-of-pearl-300: #bcb7a7;
  --color-pinch-of-pearl-400: #a49e8c;
  --color-pinch-of-pearl-500: #8d8671;
  --color-pinch-of-pearl-600: #777160;
  --color-pinch-of-pearl-700: #5f5b4d;
  --color-pinch-of-pearl-800: #464237;
  --color-pinch-of-pearl-900: #312e26;
  --color-pinch-of-pearl-950: #1d1a14;
}

SCSS

$pinch-of-pearl: #fff8e3;
$pinch-of-pearl-rgb: 255, 248, 227;
$pinch-of-pearl-light: mix(#fff, $pinch-of-pearl, 20%);
$pinch-of-pearl-dark: mix(#000, $pinch-of-pearl, 20%);

.element {
  color: $pinch-of-pearl;
  box-shadow: 0 0 0 2px rgba($pinch-of-pearl, 0.35);
}