Splash of Honey

CSS

:root {
  --splash-of-honey: #d8b98c;
  --splash-of-honey-rgb: 216 185 140;
  --splash-of-honey-oklch: oklch(0.802 0.069 76.7);
}

.element {
  color: var(--splash-of-honey);
  background-color: hsl(36 49% 70%);
  border-color: oklch(0.802 0.069 76.7);
}

Tailwind CSS v4

@theme {
  --color-splash-of-honey: #d8b98c;
  --color-splash-of-honey-50: #fff3e0;
  --color-splash-of-honey-100: #f5e6cf;
  --color-splash-of-honey-200: #e5d1b4;
  --color-splash-of-honey-300: #cbb490;
  --color-splash-of-honey-400: #b69970;
  --color-splash-of-honey-500: #a08050;
  --color-splash-of-honey-600: #886d44;
  --color-splash-of-honey-700: #6d5736;
  --color-splash-of-honey-800: #513f26;
  --color-splash-of-honey-900: #382b1a;
  --color-splash-of-honey-950: #23190a;
}

SCSS

$splash-of-honey: #d8b98c;
$splash-of-honey-rgb: 216, 185, 140;
$splash-of-honey-light: mix(#fff, $splash-of-honey, 20%);
$splash-of-honey-dark: mix(#000, $splash-of-honey, 20%);

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