Sedona Stone

CSS

:root {
  --sedona-stone: #8e462f;
  --sedona-stone-rgb: 142 70 47;
  --sedona-stone-oklch: oklch(0.48 0.104 38.3);
}

.element {
  color: var(--sedona-stone);
  background-color: hsl(15 50% 37%);
  border-color: oklch(0.48 0.104 38.3);
}

Tailwind CSS v4

@theme {
  --color-sedona-stone: #8e462f;
  --color-sedona-stone-50: #ffecdf;
  --color-sedona-stone-100: #ffddce;
  --color-sedona-stone-200: #fcc6b3;
  --color-sedona-stone-300: #e6a68f;
  --color-sedona-stone-400: #d48971;
  --color-sedona-stone-500: #c06c51;
  --color-sedona-stone-600: #a25c45;
  --color-sedona-stone-700: #824937;
  --color-sedona-stone-800: #613428;
  --color-sedona-stone-900: #44241b;
  --color-sedona-stone-950: #2c120b;
}

SCSS

$sedona-stone: #8e462f;
$sedona-stone-rgb: 142, 70, 47;
$sedona-stone-light: mix(#fff, $sedona-stone, 20%);
$sedona-stone-dark: mix(#000, $sedona-stone, 20%);

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