Copper Mine

CSS

:root {
  --copper-mine: #b2764c;
  --copper-mine-rgb: 178 118 76;
  --copper-mine-oklch: oklch(0.619 0.095 55);
}

.element {
  color: var(--copper-mine);
  background-color: hsl(25 40% 50%);
  border-color: oklch(0.619 0.095 55);
}

Tailwind CSS v4

@theme {
  --color-copper-mine: #b2764c;
  --color-copper-mine-50: #ffefdb;
  --color-copper-mine-100: #ffe1ca;
  --color-copper-mine-200: #f4cbad;
  --color-copper-mine-300: #ddac88;
  --color-copper-mine-400: #ca8f67;
  --color-copper-mine-500: #b67445;
  --color-copper-mine-600: #9a633b;
  --color-copper-mine-700: #7c4f2f;
  --color-copper-mine-800: #5c3922;
  --color-copper-mine-900: #402716;
  --color-copper-mine-950: #291507;
}

SCSS

$copper-mine: #b2764c;
$copper-mine-rgb: 178, 118, 76;
$copper-mine-light: mix(#fff, $copper-mine, 20%);
$copper-mine-dark: mix(#000, $copper-mine, 20%);

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