Earth Warming

CSS

:root {
  --earth-warming: #bf9f91;
  --earth-warming-rgb: 191 159 145;
  --earth-warming-oklch: oklch(0.727 0.043 44.9);
}

.element {
  color: var(--earth-warming);
  background-color: hsl(18 26% 66%);
  border-color: oklch(0.727 0.043 44.9);
}

Tailwind CSS v4

@theme {
  --color-earth-warming: #bf9f91;
  --color-earth-warming-50: #fff2eb;
  --color-earth-warming-100: #f5e4dc;
  --color-earth-warming-200: #e5cfc5;
  --color-earth-warming-300: #cbb1a5;
  --color-earth-warming-400: #b5978a;
  --color-earth-warming-500: #9f7e6f;
  --color-earth-warming-600: #876a5e;
  --color-earth-warming-700: #6c554b;
  --color-earth-warming-800: #503e37;
  --color-earth-warming-900: #372a25;
  --color-earth-warming-950: #221814;
}

SCSS

$earth-warming: #bf9f91;
$earth-warming-rgb: 191, 159, 145;
$earth-warming-light: mix(#fff, $earth-warming, 20%);
$earth-warming-dark: mix(#000, $earth-warming, 20%);

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