Colorado Bronze

CSS

:root {
  --colorado-bronze: #ee7766;
  --colorado-bronze-rgb: 238 119 102;
  --colorado-bronze-oklch: oklch(0.703 0.15 29.7);
}

.element {
  color: var(--colorado-bronze);
  background-color: hsl(7 80% 67%);
  border-color: oklch(0.703 0.15 29.7);
}

Tailwind CSS v4

@theme {
  --color-colorado-bronze: #ee7766;
  --color-colorado-bronze-50: #ffe6db;
  --color-colorado-bronze-100: #ffd6c9;
  --color-colorado-bronze-200: #ffbdac;
  --color-colorado-bronze-300: #fa9a87;
  --color-colorado-bronze-400: #e97968;
  --color-colorado-bronze-500: #d75747;
  --color-colorado-bronze-600: #b64a3d;
  --color-colorado-bronze-700: #923b30;
  --color-colorado-bronze-800: #6d2a24;
  --color-colorado-bronze-900: #4d1c18;
  --color-colorado-bronze-950: #320b09;
}

SCSS

$colorado-bronze: #ee7766;
$colorado-bronze-rgb: 238, 119, 102;
$colorado-bronze-light: mix(#fff, $colorado-bronze, 20%);
$colorado-bronze-dark: mix(#000, $colorado-bronze, 20%);

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