Cappuccino Foam

CSS

:root {
  --cappuccino-foam: #e0d0c2;
  --cappuccino-foam-rgb: 224 208 194;
  --cappuccino-foam-oklch: oklch(0.867 0.026 63.7);
}

.element {
  color: var(--cappuccino-foam);
  background-color: hsl(28 33% 82%);
  border-color: oklch(0.867 0.026 63.7);
}

Tailwind CSS v4

@theme {
  --color-cappuccino-foam: #e0d0c2;
  --color-cappuccino-foam-50: #fbf4ed;
  --color-cappuccino-foam-100: #eee6df;
  --color-cappuccino-foam-200: #dcd2c9;
  --color-cappuccino-foam-300: #c1b5aa;
  --color-cappuccino-foam-400: #aa9c8f;
  --color-cappuccino-foam-500: #938375;
  --color-cappuccino-foam-600: #7c6f63;
  --color-cappuccino-foam-700: #64594f;
  --color-cappuccino-foam-800: #494139;
  --color-cappuccino-foam-900: #332c27;
  --color-cappuccino-foam-950: #1e1a15;
}

SCSS

$cappuccino-foam: #e0d0c2;
$cappuccino-foam-rgb: 224, 208, 194;
$cappuccino-foam-light: mix(#fff, $cappuccino-foam, 20%);
$cappuccino-foam-dark: mix(#000, $cappuccino-foam, 20%);

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