Pale Parchment

CSS

:root {
  --pale-parchment: #d1c3ad;
  --pale-parchment-rgb: 209 195 173;
  --pale-parchment-oklch: oklch(0.823 0.034 79.2);
}

.element {
  color: var(--pale-parchment);
  background-color: hsl(37 28% 75%);
  border-color: oklch(0.823 0.034 79.2);
}

Tailwind CSS v4

@theme {
  --color-pale-parchment: #d1c3ad;
  --color-pale-parchment-50: #faf4eb;
  --color-pale-parchment-100: #eee7dc;
  --color-pale-parchment-200: #dcd3c4;
  --color-pale-parchment-300: #c0b6a4;
  --color-pale-parchment-400: #a99d88;
  --color-pale-parchment-500: #92846d;
  --color-pale-parchment-600: #7c705d;
  --color-pale-parchment-700: #63594a;
  --color-pale-parchment-800: #494135;
  --color-pale-parchment-900: #332d24;
  --color-pale-parchment-950: #1e1a13;
}

SCSS

$pale-parchment: #d1c3ad;
$pale-parchment-rgb: 209, 195, 173;
$pale-parchment-light: mix(#fff, $pale-parchment, 20%);
$pale-parchment-dark: mix(#000, $pale-parchment, 20%);

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