Pink Ginger

CSS

:root {
  --pink-ginger: #cfa798;
  --pink-ginger-rgb: 207 167 152;
  --pink-ginger-oklch: oklch(0.76 0.052 41.6);
}

.element {
  color: var(--pink-ginger);
  background-color: hsl(16 36% 70%);
  border-color: oklch(0.76 0.052 41.6);
}

Tailwind CSS v4

@theme {
  --color-pink-ginger: #cfa798;
  --color-pink-ginger-50: #fff1e9;
  --color-pink-ginger-100: #f8e3da;
  --color-pink-ginger-200: #e9cec3;
  --color-pink-ginger-300: #cfb0a2;
  --color-pink-ginger-400: #ba9587;
  --color-pink-ginger-500: #a57b6b;
  --color-pink-ginger-600: #8b685b;
  --color-pink-ginger-700: #705349;
  --color-pink-ginger-800: #523c35;
  --color-pink-ginger-900: #392a24;
  --color-pink-ginger-950: #241713;
}

SCSS

$pink-ginger: #cfa798;
$pink-ginger-rgb: 207, 167, 152;
$pink-ginger-light: mix(#fff, $pink-ginger, 20%);
$pink-ginger-dark: mix(#000, $pink-ginger, 20%);

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