Orange Clay

CSS

:root {
  --orange-clay: #e6a57f;
  --orange-clay-rgb: 230 165 127;
  --orange-clay-oklch: oklch(0.775 0.093 51.2);
}

.element {
  color: var(--orange-clay);
  background-color: hsl(22 67% 70%);
  border-color: oklch(0.775 0.093 51.2);
}

Tailwind CSS v4

@theme {
  --color-orange-clay: #e6a57f;
  --color-orange-clay-50: #ffefdd;
  --color-orange-clay-100: #ffe0cc;
  --color-orange-clay-200: #f5cab0;
  --color-orange-clay-300: #deab8b;
  --color-orange-clay-400: #cb8f6b;
  --color-orange-clay-500: #b7734a;
  --color-orange-clay-600: #9a6240;
  --color-orange-clay-700: #7c4e33;
  --color-orange-clay-800: #5c3824;
  --color-orange-clay-900: #412718;
  --color-orange-clay-950: #291509;
}

SCSS

$orange-clay: #e6a57f;
$orange-clay-rgb: 230, 165, 127;
$orange-clay-light: mix(#fff, $orange-clay, 20%);
$orange-clay-dark: mix(#000, $orange-clay, 20%);

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