Half Pearl Lusta

CSS

:root {
  --half-pearl-lusta: #f1ead7;
  --half-pearl-lusta-rgb: 241 234 215;
  --half-pearl-lusta-oklch: oklch(0.937 0.026 90.1);
}

.element {
  color: var(--half-pearl-lusta);
  background-color: hsl(44 48% 89%);
  border-color: oklch(0.937 0.026 90.1);
}

Tailwind CSS v4

@theme {
  --color-half-pearl-lusta: #f1ead7;
  --color-half-pearl-lusta-50: #f8f5ed;
  --color-half-pearl-lusta-100: #ebe8de;
  --color-half-pearl-lusta-200: #d8d4c8;
  --color-half-pearl-lusta-300: #bcb7a9;
  --color-half-pearl-lusta-400: #a49e8d;
  --color-half-pearl-lusta-500: #8d8673;
  --color-half-pearl-lusta-600: #777161;
  --color-half-pearl-lusta-700: #5f5b4e;
  --color-half-pearl-lusta-800: #464238;
  --color-half-pearl-lusta-900: #302e26;
  --color-half-pearl-lusta-950: #1d1a15;
}

SCSS

$half-pearl-lusta: #f1ead7;
$half-pearl-lusta-rgb: 241, 234, 215;
$half-pearl-lusta-light: mix(#fff, $half-pearl-lusta, 20%);
$half-pearl-lusta-dark: mix(#000, $half-pearl-lusta, 20%);

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