Pale Honey

CSS

:root {
  --pale-honey: #f5d6aa;
  --pale-honey-rgb: 245 214 170;
  --pale-honey-oklch: oklch(0.891 0.067 76.4);
}

.element {
  color: var(--pale-honey);
  background-color: hsl(35 79% 81%);
  border-color: oklch(0.891 0.067 76.4);
}

Tailwind CSS v4

@theme {
  --color-pale-honey: #f5d6aa;
  --color-pale-honey-50: #fff3e0;
  --color-pale-honey-100: #f4e6d0;
  --color-pale-honey-200: #e4d1b5;
  --color-pale-honey-300: #cab491;
  --color-pale-honey-400: #b59a72;
  --color-pale-honey-500: #a08052;
  --color-pale-honey-600: #876d46;
  --color-pale-honey-700: #6c5738;
  --color-pale-honey-800: #503f28;
  --color-pale-honey-900: #382b1a;
  --color-pale-honey-950: #22190b;
}

SCSS

$pale-honey: #f5d6aa;
$pale-honey-rgb: 245, 214, 170;
$pale-honey-light: mix(#fff, $pale-honey, 20%);
$pale-honey-dark: mix(#000, $pale-honey, 20%);

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