Dried Plantain

CSS

:root {
  --dried-plantain: #e5cea9;
  --dried-plantain-rgb: 229 206 169;
  --dried-plantain-oklch: oklch(0.861 0.055 79.6);
}

.element {
  color: var(--dried-plantain);
  background-color: hsl(37 54% 78%);
  border-color: oklch(0.861 0.055 79.6);
}

Tailwind CSS v4

@theme {
  --color-dried-plantain: #e5cea9;
  --color-dried-plantain-50: #fdf4e4;
  --color-dried-plantain-100: #f1e6d4;
  --color-dried-plantain-200: #e0d2ba;
  --color-dried-plantain-300: #c6b598;
  --color-dried-plantain-400: #b09b7a;
  --color-dried-plantain-500: #9a825c;
  --color-dried-plantain-600: #826e4e;
  --color-dried-plantain-700: #68583e;
  --color-dried-plantain-800: #4d402c;
  --color-dried-plantain-900: #362c1e;
  --color-dried-plantain-950: #21190e;
}

SCSS

$dried-plantain: #e5cea9;
$dried-plantain-rgb: 229, 206, 169;
$dried-plantain-light: mix(#fff, $dried-plantain, 20%);
$dried-plantain-dark: mix(#000, $dried-plantain, 20%);

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