Canyon Wall

CSS

:root {
  --canyon-wall: #a14935;
  --canyon-wall-rgb: 161 73 53;
  --canyon-wall-oklch: oklch(0.515 0.122 34.2);
}

.element {
  color: var(--canyon-wall);
  background-color: hsl(11 50% 42%);
  border-color: oklch(0.515 0.122 34.2);
}

Tailwind CSS v4

@theme {
  --color-canyon-wall: #a14935;
  --color-canyon-wall-50: #ffeadd;
  --color-canyon-wall-100: #ffdacc;
  --color-canyon-wall-200: #ffc3b0;
  --color-canyon-wall-300: #eea18c;
  --color-canyon-wall-400: #dc836d;
  --color-canyon-wall-500: #c9644d;
  --color-canyon-wall-600: #aa5642;
  --color-canyon-wall-700: #894434;
  --color-canyon-wall-800: #663126;
  --color-canyon-wall-900: #48211a;
  --color-canyon-wall-950: #2e100a;
}

SCSS

$canyon-wall: #a14935;
$canyon-wall-rgb: 161, 73, 53;
$canyon-wall-light: mix(#fff, $canyon-wall, 20%);
$canyon-wall-dark: mix(#000, $canyon-wall, 20%);

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