Bird’s-Eye Maple

CSS

:root {
  --bird-s-eye-maple: #e4c495;
  --bird-s-eye-maple-rgb: 228 196 149;
  --bird-s-eye-maple-oklch: oklch(0.836 0.072 77.1);
}

.element {
  color: var(--bird-s-eye-maple);
  background-color: hsl(36 59% 74%);
  border-color: oklch(0.836 0.072 77.1);
}

Tailwind CSS v4

@theme {
  --color-bird-s-eye-maple: #e4c495;
  --color-bird-s-eye-maple-50: #fff3df;
  --color-bird-s-eye-maple-100: #f5e6ce;
  --color-bird-s-eye-maple-200: #e5d1b3;
  --color-bird-s-eye-maple-300: #cbb48e;
  --color-bird-s-eye-maple-400: #b6996e;
  --color-bird-s-eye-maple-500: #a1804e;
  --color-bird-s-eye-maple-600: #886c43;
  --color-bird-s-eye-maple-700: #6d5735;
  --color-bird-s-eye-maple-800: #513f25;
  --color-bird-s-eye-maple-900: #382b19;
  --color-bird-s-eye-maple-950: #23180a;
}

SCSS

$bird-s-eye-maple: #e4c495;
$bird-s-eye-maple-rgb: 228, 196, 149;
$bird-s-eye-maple-light: mix(#fff, $bird-s-eye-maple, 20%);
$bird-s-eye-maple-dark: mix(#000, $bird-s-eye-maple, 20%);

.element {
  color: $bird-s-eye-maple;
  box-shadow: 0 0 0 2px rgba($bird-s-eye-maple, 0.35);
}