Copper Red

CSS

:root {
  --copper-red: #cb6d51;
  --copper-red-rgb: 203 109 81;
  --copper-red-oklch: oklch(0.636 0.126 37.4);
}

.element {
  color: var(--copper-red);
  background-color: hsl(14 54% 56%);
  border-color: oklch(0.636 0.126 37.4);
}

Tailwind CSS v4

@theme {
  --color-copper-red: #cb6d51;
  --color-copper-red-50: #ffeadb;
  --color-copper-red-100: #ffdac9;
  --color-copper-red-200: #ffc3ac;
  --color-copper-red-300: #efa187;
  --color-copper-red-400: #de8267;
  --color-copper-red-500: #cb6445;
  --color-copper-red-600: #ab553b;
  --color-copper-red-700: #8a442f;
  --color-copper-red-800: #673022;
  --color-copper-red-900: #482117;
  --color-copper-red-950: #2f1008;
}

SCSS

$copper-red: #cb6d51;
$copper-red-rgb: 203, 109, 81;
$copper-red-light: mix(#fff, $copper-red, 20%);
$copper-red-dark: mix(#000, $copper-red, 20%);

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