Amber Glass

CSS

:root {
  --amber-glass: #c79958;
  --amber-glass-rgb: 199 153 88;
  --amber-glass-oklch: oklch(0.713 0.099 74.6);
}

.element {
  color: var(--amber-glass);
  background-color: hsl(35 50% 56%);
  border-color: oklch(0.713 0.099 74.6);
}

Tailwind CSS v4

@theme {
  --color-amber-glass: #c79958;
  --color-amber-glass-50: #fff2d6;
  --color-amber-glass-100: #fbe4c4;
  --color-amber-glass-200: #edcfa5;
  --color-amber-glass-300: #d5b17d;
  --color-amber-glass-400: #c19659;
  --color-amber-glass-500: #ad7b30;
  --color-amber-glass-600: #92692a;
  --color-amber-glass-700: #755422;
  --color-amber-glass-800: #573c17;
  --color-amber-glass-900: #3d290f;
  --color-amber-glass-950: #261703;
}

SCSS

$amber-glass: #c79958;
$amber-glass-rgb: 199, 153, 88;
$amber-glass-light: mix(#fff, $amber-glass, 20%);
$amber-glass-dark: mix(#000, $amber-glass, 20%);

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