Fire Coral

CSS

:root {
  --fire-coral: #e3b46f;
  --fire-coral-rgb: 227 180 111;
  --fire-coral-oklch: oklch(0.798 0.103 76);
}

.element {
  color: var(--fire-coral);
  background-color: hsl(36 67% 66%);
  border-color: oklch(0.798 0.103 76);
}

Tailwind CSS v4

@theme {
  --color-fire-coral: #e3b46f;
  --color-fire-coral-50: #fff2d5;
  --color-fire-coral-100: #fbe4c2;
  --color-fire-coral-200: #edd0a3;
  --color-fire-coral-300: #d5b17b;
  --color-fire-coral-400: #c19655;
  --color-fire-coral-500: #ad7c2a;
  --color-fire-coral-600: #926926;
  --color-fire-coral-700: #75541e;
  --color-fire-coral-800: #573c14;
  --color-fire-coral-900: #3d2a0d;
  --color-fire-coral-950: #261702;
}

SCSS

$fire-coral: #e3b46f;
$fire-coral-rgb: 227, 180, 111;
$fire-coral-light: mix(#fff, $fire-coral, 20%);
$fire-coral-dark: mix(#000, $fire-coral, 20%);

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