Baked Clay

CSS

:root {
  --baked-clay: #a35445;
  --baked-clay-rgb: 163 84 69;
  --baked-clay-oklch: oklch(0.538 0.108 32);
}

.element {
  color: var(--baked-clay);
  background-color: hsl(10 41% 45%);
  border-color: oklch(0.538 0.108 32);
}

Tailwind CSS v4

@theme {
  --color-baked-clay: #a35445;
  --color-baked-clay-50: #ffebe1;
  --color-baked-clay-100: #ffdcd1;
  --color-baked-clay-200: #ffc4b6;
  --color-baked-clay-300: #e9a493;
  --color-baked-clay-400: #d68676;
  --color-baked-clay-500: #c36958;
  --color-baked-clay-600: #a5594b;
  --color-baked-clay-700: #84473b;
  --color-baked-clay-800: #62332c;
  --color-baked-clay-900: #45231d;
  --color-baked-clay-950: #2d110d;
}

SCSS

$baked-clay: #a35445;
$baked-clay-rgb: 163, 84, 69;
$baked-clay-light: mix(#fff, $baked-clay, 20%);
$baked-clay-dark: mix(#000, $baked-clay, 20%);

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