Dried Coconut

CSS

:root {
  --dried-coconut: #ebe7d9;
  --dried-coconut-rgb: 235 231 217;
  --dried-coconut-oklch: oklch(0.927 0.019 93.7);
}

.element {
  color: var(--dried-coconut);
  background-color: hsl(47 31% 89%);
  border-color: oklch(0.927 0.019 93.7);
}

Tailwind CSS v4

@theme {
  --color-dried-coconut: #ebe7d9;
  --color-dried-coconut-50: #f7f5ef;
  --color-dried-coconut-100: #eae8e1;
  --color-dried-coconut-200: #d6d4cb;
  --color-dried-coconut-300: #bab7ad;
  --color-dried-coconut-400: #a29e92;
  --color-dried-coconut-500: #8a8678;
  --color-dried-coconut-600: #757266;
  --color-dried-coconut-700: #5e5b51;
  --color-dried-coconut-800: #45423b;
  --color-dried-coconut-900: #2f2e28;
  --color-dried-coconut-950: #1c1b16;
}

SCSS

$dried-coconut: #ebe7d9;
$dried-coconut-rgb: 235, 231, 217;
$dried-coconut-light: mix(#fff, $dried-coconut, 20%);
$dried-coconut-dark: mix(#000, $dried-coconut, 20%);

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