Indulgent

CSS

:root {
  --indulgent: #66565f;
  --indulgent-rgb: 102 86 95;
  --indulgent-oklch: oklch(0.472 0.025 343.2);
}

.element {
  color: var(--indulgent);
  background-color: hsl(326 9% 37%);
  border-color: oklch(0.472 0.025 343.2);
}

Tailwind CSS v4

@theme {
  --color-indulgent: #66565f;
  --color-indulgent-50: #fbf2f7;
  --color-indulgent-100: #eee5ea;
  --color-indulgent-200: #ddd0d7;
  --color-indulgent-300: #c1b2ba;
  --color-indulgent-400: #aa99a2;
  --color-indulgent-500: #93808a;
  --color-indulgent-600: #7c6c75;
  --color-indulgent-700: #63575e;
  --color-indulgent-800: #493f45;
  --color-indulgent-900: #322b30;
  --color-indulgent-950: #1e191c;
}

SCSS

$indulgent: #66565f;
$indulgent-rgb: 102, 86, 95;
$indulgent-light: mix(#fff, $indulgent, 20%);
$indulgent-dark: mix(#000, $indulgent, 20%);

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