Indulgent Mocha

CSS

:root {
  --indulgent-mocha: #d1c5b7;
  --indulgent-mocha-rgb: 209 197 183;
  --indulgent-mocha-oklch: oklch(0.829 0.023 71.7);
}

.element {
  color: var(--indulgent-mocha);
  background-color: hsl(32 22% 77%);
  border-color: oklch(0.829 0.023 71.7);
}

Tailwind CSS v4

@theme {
  --color-indulgent-mocha: #d1c5b7;
  --color-indulgent-mocha-50: #f9f4ee;
  --color-indulgent-mocha-100: #ede7df;
  --color-indulgent-mocha-200: #dad3ca;
  --color-indulgent-mocha-300: #bfb6ab;
  --color-indulgent-mocha-400: #a79c90;
  --color-indulgent-mocha-500: #908476;
  --color-indulgent-mocha-600: #7a7064;
  --color-indulgent-mocha-700: #625950;
  --color-indulgent-mocha-800: #48413a;
  --color-indulgent-mocha-900: #322d28;
  --color-indulgent-mocha-950: #1e1a16;
}

SCSS

$indulgent-mocha: #d1c5b7;
$indulgent-mocha-rgb: 209, 197, 183;
$indulgent-mocha-light: mix(#fff, $indulgent-mocha, 20%);
$indulgent-mocha-dark: mix(#000, $indulgent-mocha, 20%);

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