Backroom Ember

CSS

:root {
  --backroom-ember: #a19250;
  --backroom-ember-rgb: 161 146 80;
  --backroom-ember-oklch: oklch(0.659 0.088 96.9);
}

.element {
  color: var(--backroom-ember);
  background-color: hsl(49 34% 47%);
  border-color: oklch(0.659 0.088 96.9);
}

Tailwind CSS v4

@theme {
  --color-backroom-ember: #a19250;
  --color-backroom-ember-50: #fbf6da;
  --color-backroom-ember-100: #efe9c8;
  --color-backroom-ember-200: #ddd5aa;
  --color-backroom-ember-300: #c2b984;
  --color-backroom-ember-400: #ad9f60;
  --color-backroom-ember-500: #97863b;
  --color-backroom-ember-600: #7f7233;
  --color-backroom-ember-700: #665b29;
  --color-backroom-ember-800: #4c421c;
  --color-backroom-ember-900: #352e12;
  --color-backroom-ember-950: #201a04;
}

SCSS

$backroom-ember: #a19250;
$backroom-ember-rgb: 161, 146, 80;
$backroom-ember-light: mix(#fff, $backroom-ember, 20%);
$backroom-ember-dark: mix(#000, $backroom-ember, 20%);

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