Piece of Cake

CSS

:root {
  --piece-of-cake: #ede7c8;
  --piece-of-cake-rgb: 237 231 200;
  --piece-of-cake-oklch: oklch(0.925 0.041 98.1);
}

.element {
  color: var(--piece-of-cake);
  background-color: hsl(50 51% 86%);
  border-color: oklch(0.925 0.041 98.1);
}

Tailwind CSS v4

@theme {
  --color-piece-of-cake: #ede7c8;
  --color-piece-of-cake-50: #f8f6e8;
  --color-piece-of-cake-100: #ebe8d9;
  --color-piece-of-cake-200: #d8d5c1;
  --color-piece-of-cake-300: #bcb8a0;
  --color-piece-of-cake-400: #a59f83;
  --color-piece-of-cake-500: #8d8767;
  --color-piece-of-cake-600: #777258;
  --color-piece-of-cake-700: #605b46;
  --color-piece-of-cake-800: #464332;
  --color-piece-of-cake-900: #312e22;
  --color-piece-of-cake-950: #1d1b11;
}

SCSS

$piece-of-cake: #ede7c8;
$piece-of-cake-rgb: 237, 231, 200;
$piece-of-cake-light: mix(#fff, $piece-of-cake, 20%);
$piece-of-cake-dark: mix(#000, $piece-of-cake, 20%);

.element {
  color: $piece-of-cake;
  box-shadow: 0 0 0 2px rgba($piece-of-cake, 0.35);
}