Hacienda Tile

CSS

:root {
  --hacienda-tile: #b86d64;
  --hacienda-tile-rgb: 184 109 100;
  --hacienda-tile-oklch: oklch(0.615 0.097 27.5);
}

.element {
  color: var(--hacienda-tile);
  background-color: hsl(6 37% 56%);
  border-color: oklch(0.615 0.097 27.5);
}

Tailwind CSS v4

@theme {
  --color-hacienda-tile: #b86d64;
  --color-hacienda-tile-50: #ffece5;
  --color-hacienda-tile-100: #ffddd5;
  --color-hacienda-tile-200: #fbc5bc;
  --color-hacienda-tile-300: #e5a59a;
  --color-hacienda-tile-400: #d2887f;
  --color-hacienda-tile-500: #be6c62;
  --color-hacienda-tile-600: #a15b53;
  --color-hacienda-tile-700: #814942;
  --color-hacienda-tile-800: #603431;
  --color-hacienda-tile-900: #432421;
  --color-hacienda-tile-950: #2b1210;
}

SCSS

$hacienda-tile: #b86d64;
$hacienda-tile-rgb: 184, 109, 100;
$hacienda-tile-light: mix(#fff, $hacienda-tile, 20%);
$hacienda-tile-dark: mix(#000, $hacienda-tile, 20%);

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