Mocha Foam

CSS

:root {
  --mocha-foam: #bba28e;
  --mocha-foam-rgb: 187 162 142;
  --mocha-foam-oklch: oklch(0.729 0.041 60.8);
}

.element {
  color: var(--mocha-foam);
  background-color: hsl(27 25% 65%);
  border-color: oklch(0.729 0.041 60.8);
}

Tailwind CSS v4

@theme {
  --color-mocha-foam: #bba28e;
  --color-mocha-foam-50: #fef3ea;
  --color-mocha-foam-100: #f2e5da;
  --color-mocha-foam-200: #e1d1c3;
  --color-mocha-foam-300: #c7b3a3;
  --color-mocha-foam-400: #b19987;
  --color-mocha-foam-500: #9b806b;
  --color-mocha-foam-600: #836d5b;
  --color-mocha-foam-700: #695748;
  --color-mocha-foam-800: #4d3f34;
  --color-mocha-foam-900: #362b24;
  --color-mocha-foam-950: #211913;
}

SCSS

$mocha-foam: #bba28e;
$mocha-foam-rgb: 187, 162, 142;
$mocha-foam-light: mix(#fff, $mocha-foam, 20%);
$mocha-foam-dark: mix(#000, $mocha-foam, 20%);

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