Fire Dust

CSS

:root {
  --fire-dust: #b98d68;
  --fire-dust-rgb: 185 141 104;
  --fire-dust-oklch: oklch(0.677 0.074 61.1);
}

.element {
  color: var(--fire-dust);
  background-color: hsl(27 37% 57%);
  border-color: oklch(0.677 0.074 61.1);
}

Tailwind CSS v4

@theme {
  --color-fire-dust: #b98d68;
  --color-fire-dust-50: #fff1e0;
  --color-fire-dust-100: #fae3cf;
  --color-fire-dust-200: #ecceb4;
  --color-fire-dust-300: #d3b091;
  --color-fire-dust-400: #bf9572;
  --color-fire-dust-500: #aa7b52;
  --color-fire-dust-600: #906846;
  --color-fire-dust-700: #735338;
  --color-fire-dust-800: #563c28;
  --color-fire-dust-900: #3c291b;
  --color-fire-dust-950: #25170b;
}

SCSS

$fire-dust: #b98d68;
$fire-dust-rgb: 185, 141, 104;
$fire-dust-light: mix(#fff, $fire-dust, 20%);
$fire-dust-dark: mix(#000, $fire-dust, 20%);

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