Spanish Tile

CSS

:root {
  --spanish-tile: #702425;
  --spanish-tile-rgb: 112 36 37;
  --spanish-tile-oklch: oklch(0.377 0.108 23.1);
}

.element {
  color: var(--spanish-tile);
  background-color: hsl(359 51% 29%);
  border-color: oklch(0.377 0.108 23.1);
}

Tailwind CSS v4

@theme {
  --color-spanish-tile: #702425;
  --color-spanish-tile-50: #ffeae6;
  --color-spanish-tile-100: #ffdbd6;
  --color-spanish-tile-200: #ffc3bd;
  --color-spanish-tile-300: #eaa29b;
  --color-spanish-tile-400: #d78480;
  --color-spanish-tile-500: #c36764;
  --color-spanish-tile-600: #a55855;
  --color-spanish-tile-700: #854644;
  --color-spanish-tile-800: #623232;
  --color-spanish-tile-900: #452222;
  --color-spanish-tile-950: #2d1111;
}

SCSS

$spanish-tile: #702425;
$spanish-tile-rgb: 112, 36, 37;
$spanish-tile-light: mix(#fff, $spanish-tile, 20%);
$spanish-tile-dark: mix(#000, $spanish-tile, 20%);

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