Pinch of Pistachio

CSS

:root {
  --pinch-of-pistachio: #ddddcc;
  --pinch-of-pistachio-rgb: 221 221 204;
  --pinch-of-pistachio-oklch: oklch(0.893 0.023 106.9);
}

.element {
  color: var(--pinch-of-pistachio);
  background-color: hsl(60 20% 83%);
  border-color: oklch(0.893 0.023 106.9);
}

Tailwind CSS v4

@theme {
  --color-pinch-of-pistachio: #ddddcc;
  --color-pinch-of-pistachio-50: #f5f6ee;
  --color-pinch-of-pistachio-100: #e8e9e0;
  --color-pinch-of-pistachio-200: #d5d5ca;
  --color-pinch-of-pistachio-300: #b8b8ab;
  --color-pinch-of-pistachio-400: #a0a090;
  --color-pinch-of-pistachio-500: #888776;
  --color-pinch-of-pistachio-600: #737364;
  --color-pinch-of-pistachio-700: #5c5c50;
  --color-pinch-of-pistachio-800: #43433a;
  --color-pinch-of-pistachio-900: #2e2e28;
  --color-pinch-of-pistachio-950: #1b1b16;
}

SCSS

$pinch-of-pistachio: #ddddcc;
$pinch-of-pistachio-rgb: 221, 221, 204;
$pinch-of-pistachio-light: mix(#fff, $pinch-of-pistachio, 20%);
$pinch-of-pistachio-dark: mix(#000, $pinch-of-pistachio, 20%);

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