Painted Clay

CSS

:root {
  --painted-clay: #eb8f6f;
  --painted-clay-rgb: 235 143 111;
  --painted-clay-oklch: oklch(0.739 0.121 39.9);
}

.element {
  color: var(--painted-clay);
  background-color: hsl(15 76% 68%);
  border-color: oklch(0.739 0.121 39.9);
}

Tailwind CSS v4

@theme {
  --color-painted-clay: #eb8f6f;
  --color-painted-clay-50: #ffebdb;
  --color-painted-clay-100: #ffdbc9;
  --color-painted-clay-200: #ffc4ac;
  --color-painted-clay-300: #eda386;
  --color-painted-clay-400: #db8567;
  --color-painted-clay-500: #c86744;
  --color-painted-clay-600: #a9573b;
  --color-painted-clay-700: #88462f;
  --color-painted-clay-800: #653222;
  --color-painted-clay-900: #472216;
  --color-painted-clay-950: #2e1108;
}

SCSS

$painted-clay: #eb8f6f;
$painted-clay-rgb: 235, 143, 111;
$painted-clay-light: mix(#fff, $painted-clay, 20%);
$painted-clay-dark: mix(#000, $painted-clay, 20%);

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