Canyon Stone

CSS

:root {
  --canyon-stone: #93625b;
  --canyon-stone-rgb: 147 98 91;
  --canyon-stone-oklch: oklch(0.547 0.065 28.3);
}

.element {
  color: var(--canyon-stone);
  background-color: hsl(8 24% 47%);
  border-color: oklch(0.547 0.065 28.3);
}

Tailwind CSS v4

@theme {
  --color-canyon-stone: #93625b;
  --color-canyon-stone-50: #ffefea;
  --color-canyon-stone-100: #fde0db;
  --color-canyon-stone-200: #efcbc4;
  --color-canyon-stone-300: #d7aca4;
  --color-canyon-stone-400: #c29089;
  --color-canyon-stone-500: #ad766e;
  --color-canyon-stone-600: #92645d;
  --color-canyon-stone-700: #76504a;
  --color-canyon-stone-800: #573a36;
  --color-canyon-stone-900: #3d2725;
  --color-canyon-stone-950: #261614;
}

SCSS

$canyon-stone: #93625b;
$canyon-stone-rgb: 147, 98, 91;
$canyon-stone-light: mix(#fff, $canyon-stone, 20%);
$canyon-stone-dark: mix(#000, $canyon-stone, 20%);

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