Pale Wood

CSS

:root {
  --pale-wood: #ead2a2;
  --pale-wood-rgb: 234 210 162;
  --pale-wood-oklch: oklch(0.872 0.068 84.4);
}

.element {
  color: var(--pale-wood);
  background-color: hsl(40 63% 78%);
  border-color: oklch(0.872 0.068 84.4);
}

Tailwind CSS v4

@theme {
  --color-pale-wood: #ead2a2;
  --color-pale-wood-50: #fef4e0;
  --color-pale-wood-100: #f2e7cf;
  --color-pale-wood-200: #e1d3b4;
  --color-pale-wood-300: #c7b690;
  --color-pale-wood-400: #b19c70;
  --color-pale-wood-500: #9b8350;
  --color-pale-wood-600: #836f44;
  --color-pale-wood-700: #695836;
  --color-pale-wood-800: #4e4026;
  --color-pale-wood-900: #362c1a;
  --color-pale-wood-950: #21190a;
}

SCSS

$pale-wood: #ead2a2;
$pale-wood-rgb: 234, 210, 162;
$pale-wood-light: mix(#fff, $pale-wood, 20%);
$pale-wood-dark: mix(#000, $pale-wood, 20%);

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