Tile Red

CSS

:root {
  --tile-red: #c76b4a;
  --tile-red-rgb: 199 107 74;
  --tile-red-oklch: oklch(0.627 0.126 40.2);
}

.element {
  color: var(--tile-red);
  background-color: hsl(16 53% 54%);
  border-color: oklch(0.627 0.126 40.2);
}

Tailwind CSS v4

@theme {
  --color-tile-red: #c76b4a;
  --color-tile-red-50: #ffead9;
  --color-tile-red-100: #ffdbc7;
  --color-tile-red-200: #ffc3aa;
  --color-tile-red-300: #efa284;
  --color-tile-red-400: #dd8363;
  --color-tile-red-500: #ca6540;
  --color-tile-red-600: #ab5637;
  --color-tile-red-700: #89452c;
  --color-tile-red-800: #663120;
  --color-tile-red-900: #482115;
  --color-tile-red-950: #2f1007;
}

SCSS

$tile-red: #c76b4a;
$tile-red-rgb: 199, 107, 74;
$tile-red-light: mix(#fff, $tile-red, 20%);
$tile-red-dark: mix(#000, $tile-red, 20%);

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