Heart of Palm

CSS

:root {
  --heart-of-palm: #d2cfa6;
  --heart-of-palm-rgb: 210 207 166;
  --heart-of-palm-oklch: oklch(0.846 0.055 104);
}

.element {
  color: var(--heart-of-palm);
  background-color: hsl(56 33% 74%);
  border-color: oklch(0.846 0.055 104);
}

Tailwind CSS v4

@theme {
  --color-heart-of-palm: #d2cfa6;
  --color-heart-of-palm-50: #f7f6e5;
  --color-heart-of-palm-100: #eae9d5;
  --color-heart-of-palm-200: #d7d6bc;
  --color-heart-of-palm-300: #bbba9a;
  --color-heart-of-palm-400: #a3a17b;
  --color-heart-of-palm-500: #8c885e;
  --color-heart-of-palm-600: #767350;
  --color-heart-of-palm-700: #5f5c3f;
  --color-heart-of-palm-800: #46432d;
  --color-heart-of-palm-900: #302e1e;
  --color-heart-of-palm-950: #1d1b0e;
}

SCSS

$heart-of-palm: #d2cfa6;
$heart-of-palm-rgb: 210, 207, 166;
$heart-of-palm-light: mix(#fff, $heart-of-palm, 20%);
$heart-of-palm-dark: mix(#000, $heart-of-palm, 20%);

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