Temple Tile

CSS

:root {
  --temple-tile: #a9855d;
  --temple-tile-rgb: 169 133 93;
  --temple-tile-oklch: oklch(0.641 0.071 69);
}

.element {
  color: var(--temple-tile);
  background-color: hsl(32 31% 51%);
  border-color: oklch(0.641 0.071 69);
}

Tailwind CSS v4

@theme {
  --color-temple-tile: #a9855d;
  --color-temple-tile-50: #fff2e0;
  --color-temple-tile-100: #f7e5cf;
  --color-temple-tile-200: #e8d0b4;
  --color-temple-tile-300: #cfb290;
  --color-temple-tile-400: #ba9771;
  --color-temple-tile-500: #a57e51;
  --color-temple-tile-600: #8b6a45;
  --color-temple-tile-700: #705537;
  --color-temple-tile-800: #533e27;
  --color-temple-tile-900: #3a2a1a;
  --color-temple-tile-950: #24180b;
}

SCSS

$temple-tile: #a9855d;
$temple-tile-rgb: 169, 133, 93;
$temple-tile-light: mix(#fff, $temple-tile, 20%);
$temple-tile-dark: mix(#000, $temple-tile, 20%);

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