Copper River

CSS

:root {
  --copper-river: #f7a270;
  --copper-river-rgb: 247 162 112;
  --copper-river-oklch: oklch(0.786 0.121 50.7);
}

.element {
  color: var(--copper-river);
  background-color: hsl(22 89% 70%);
  border-color: oklch(0.786 0.121 50.7);
}

Tailwind CSS v4

@theme {
  --color-copper-river: #f7a270;
  --color-copper-river-50: #ffedd6;
  --color-copper-river-100: #ffdec3;
  --color-copper-river-200: #fec7a5;
  --color-copper-river-300: #e9a67d;
  --color-copper-river-400: #d7895a;
  --color-copper-river-500: #c46b32;
  --color-copper-river-600: #a55b2c;
  --color-copper-river-700: #854923;
  --color-copper-river-800: #633419;
  --color-copper-river-900: #462410;
  --color-copper-river-950: #2d1203;
}

SCSS

$copper-river: #f7a270;
$copper-river-rgb: 247, 162, 112;
$copper-river-light: mix(#fff, $copper-river, 20%);
$copper-river-dark: mix(#000, $copper-river, 20%);

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