Clay Play

CSS

:root {
  --clay-play: #774433;
  --clay-play-rgb: 119 68 51;
  --clay-play-oklch: oklch(0.444 0.076 39.1);
}

.element {
  color: var(--clay-play);
  background-color: hsl(15 40% 33%);
  border-color: oklch(0.444 0.076 39.1);
}

Tailwind CSS v4

@theme {
  --color-clay-play: #774433;
  --color-clay-play-50: #ffefe5;
  --color-clay-play-100: #ffe0d5;
  --color-clay-play-200: #f2cabc;
  --color-clay-play-300: #daab9a;
  --color-clay-play-400: #c68f7d;
  --color-clay-play-500: #b27560;
  --color-clay-play-600: #966352;
  --color-clay-play-700: #784f41;
  --color-clay-play-800: #59392f;
  --color-clay-play-900: #3f2720;
  --color-clay-play-950: #281510;
}

SCSS

$clay-play: #774433;
$clay-play-rgb: 119, 68, 51;
$clay-play-light: mix(#fff, $clay-play, 20%);
$clay-play-dark: mix(#000, $clay-play, 20%);

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