Eastern Amber

CSS

:root {
  --eastern-amber: #ebb67e;
  --eastern-amber-rgb: 235 182 126;
  --eastern-amber-oklch: oklch(0.812 0.095 67.4);
}

.element {
  color: var(--eastern-amber);
  background-color: hsl(31 73% 71%);
  border-color: oklch(0.812 0.095 67.4);
}

Tailwind CSS v4

@theme {
  --color-eastern-amber: #ebb67e;
  --color-eastern-amber-50: #fff1d9;
  --color-eastern-amber-100: #fde3c7;
  --color-eastern-amber-200: #efcea9;
  --color-eastern-amber-300: #d7af82;
  --color-eastern-amber-400: #c49460;
  --color-eastern-amber-500: #b0793a;
  --color-eastern-amber-600: #946733;
  --color-eastern-amber-700: #775228;
  --color-eastern-amber-800: #593b1c;
  --color-eastern-amber-900: #3e2912;
  --color-eastern-amber-950: #271605;
}

SCSS

$eastern-amber: #ebb67e;
$eastern-amber-rgb: 235, 182, 126;
$eastern-amber-light: mix(#fff, $eastern-amber, 20%);
$eastern-amber-dark: mix(#000, $eastern-amber, 20%);

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