Bronzed Orange

CSS

:root {
  --bronzed-orange: #d78a6c;
  --bronzed-orange-rgb: 215 138 108;
  --bronzed-orange-oklch: oklch(0.706 0.104 42);
}

.element {
  color: var(--bronzed-orange);
  background-color: hsl(17 57% 63%);
  border-color: oklch(0.706 0.104 42);
}

Tailwind CSS v4

@theme {
  --color-bronzed-orange: #d78a6c;
  --color-bronzed-orange-50: #ffecde;
  --color-bronzed-orange-100: #ffdecc;
  --color-bronzed-orange-200: #fbc7b1;
  --color-bronzed-orange-300: #e5a78c;
  --color-bronzed-orange-400: #d38a6d;
  --color-bronzed-orange-500: #bf6d4d;
  --color-bronzed-orange-600: #a15d42;
  --color-bronzed-orange-700: #824a34;
  --color-bronzed-orange-800: #603526;
  --color-bronzed-orange-900: #442419;
  --color-bronzed-orange-950: #2c130a;
}

SCSS

$bronzed-orange: #d78a6c;
$bronzed-orange-rgb: 215, 138, 108;
$bronzed-orange-light: mix(#fff, $bronzed-orange, 20%);
$bronzed-orange-dark: mix(#000, $bronzed-orange, 20%);

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