Artisan Tile

CSS

:root {
  --artisan-tile: #845e40;
  --artisan-tile-rgb: 132 94 64;
  --artisan-tile-oklch: oklch(0.515 0.066 58.9);
}

.element {
  color: var(--artisan-tile);
  background-color: hsl(26 35% 38%);
  border-color: oklch(0.515 0.066 58.9);
}

Tailwind CSS v4

@theme {
  --color-artisan-tile: #845e40;
  --color-artisan-tile-50: #fff1e3;
  --color-artisan-tile-100: #f9e3d2;
  --color-artisan-tile-200: #eaceb8;
  --color-artisan-tile-300: #d1b096;
  --color-artisan-tile-400: #bd9578;
  --color-artisan-tile-500: #a77c59;
  --color-artisan-tile-600: #8d694c;
  --color-artisan-tile-700: #71543d;
  --color-artisan-tile-800: #543d2c;
  --color-artisan-tile-900: #3b2a1d;
  --color-artisan-tile-950: #25170d;
}

SCSS

$artisan-tile: #845e40;
$artisan-tile-rgb: 132, 94, 64;
$artisan-tile-light: mix(#fff, $artisan-tile, 20%);
$artisan-tile-dark: mix(#000, $artisan-tile, 20%);

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