Cinnamon Foam

CSS

:root {
  --cinnamon-foam: #edbc9b;
  --cinnamon-foam-rgb: 237 188 155;
  --cinnamon-foam-oklch: oklch(0.831 0.072 55.5);
}

.element {
  color: var(--cinnamon-foam);
  background-color: hsl(24 69% 77%);
  border-color: oklch(0.831 0.072 55.5);
}

Tailwind CSS v4

@theme {
  --color-cinnamon-foam: #edbc9b;
  --color-cinnamon-foam-50: #fff1e2;
  --color-cinnamon-foam-100: #fbe3d1;
  --color-cinnamon-foam-200: #edcdb7;
  --color-cinnamon-foam-300: #d4af94;
  --color-cinnamon-foam-400: #c09475;
  --color-cinnamon-foam-500: #ab7957;
  --color-cinnamon-foam-600: #91674a;
  --color-cinnamon-foam-700: #74523b;
  --color-cinnamon-foam-800: #563b2a;
  --color-cinnamon-foam-900: #3c291c;
  --color-cinnamon-foam-950: #26170d;
}

SCSS

$cinnamon-foam: #edbc9b;
$cinnamon-foam-rgb: 237, 188, 155;
$cinnamon-foam-light: mix(#fff, $cinnamon-foam, 20%);
$cinnamon-foam-dark: mix(#000, $cinnamon-foam, 20%);

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