Painted Ash

CSS

:root {
  --painted-ash: #ddba8f;
  --painted-ash-rgb: 221 186 143;
  --painted-ash-oklch: oklch(0.809 0.07 72.3);
}

.element {
  color: var(--painted-ash);
  background-color: hsl(33 53% 71%);
  border-color: oklch(0.809 0.07 72.3);
}

Tailwind CSS v4

@theme {
  --color-painted-ash: #ddba8f;
  --color-painted-ash-50: #fff3e0;
  --color-painted-ash-100: #f6e5cf;
  --color-painted-ash-200: #e7d1b4;
  --color-painted-ash-300: #cdb390;
  --color-painted-ash-400: #b89871;
  --color-painted-ash-500: #a37f51;
  --color-painted-ash-600: #8a6b45;
  --color-painted-ash-700: #6e5637;
  --color-painted-ash-800: #523e27;
  --color-painted-ash-900: #392b1a;
  --color-painted-ash-950: #23180b;
}

SCSS

$painted-ash: #ddba8f;
$painted-ash-rgb: 221, 186, 143;
$painted-ash-light: mix(#fff, $painted-ash, 20%);
$painted-ash-dark: mix(#000, $painted-ash, 20%);

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