Baked Ham

CSS

:root {
  --baked-ham: #eec8bc;
  --baked-ham-rgb: 238 200 188;
  --baked-ham-oklch: oklch(0.862 0.046 38.3);
}

.element {
  color: var(--baked-ham);
  background-color: hsl(14 60% 84%);
  border-color: oklch(0.862 0.046 38.3);
}

Tailwind CSS v4

@theme {
  --color-baked-ham: #eec8bc;
  --color-baked-ham-50: #fff1eb;
  --color-baked-ham-100: #f7e3dc;
  --color-baked-ham-200: #e7cec6;
  --color-baked-ham-300: #cdb0a6;
  --color-baked-ham-400: #b8968b;
  --color-baked-ham-500: #a27c70;
  --color-baked-ham-600: #89695f;
  --color-baked-ham-700: #6e544c;
  --color-baked-ham-800: #513d37;
  --color-baked-ham-900: #382a26;
  --color-baked-ham-950: #231714;
}

SCSS

$baked-ham: #eec8bc;
$baked-ham-rgb: 238, 200, 188;
$baked-ham-light: mix(#fff, $baked-ham, 20%);
$baked-ham-dark: mix(#000, $baked-ham, 20%);

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