Ruskin Bronze

CSS

:root {
  --ruskin-bronze: #4d4d41;
  --ruskin-bronze-rgb: 77 77 65;
  --ruskin-bronze-oklch: oklch(0.416 0.019 107.2);
}

.element {
  color: var(--ruskin-bronze);
  background-color: hsl(60 8% 28%);
  border-color: oklch(0.416 0.019 107.2);
}

Tailwind CSS v4

@theme {
  --color-ruskin-bronze: #4d4d41;
  --color-ruskin-bronze-50: #f5f6ef;
  --color-ruskin-bronze-100: #e8e8e1;
  --color-ruskin-bronze-200: #d4d5cc;
  --color-ruskin-bronze-300: #b8b8ad;
  --color-ruskin-bronze-400: #9f9f93;
  --color-ruskin-bronze-500: #878779;
  --color-ruskin-bronze-600: #727266;
  --color-ruskin-bronze-700: #5b5c52;
  --color-ruskin-bronze-800: #43433b;
  --color-ruskin-bronze-900: #2e2e29;
  --color-ruskin-bronze-950: #1b1b17;
}

SCSS

$ruskin-bronze: #4d4d41;
$ruskin-bronze-rgb: 77, 77, 65;
$ruskin-bronze-light: mix(#fff, $ruskin-bronze, 20%);
$ruskin-bronze-dark: mix(#000, $ruskin-bronze, 20%);

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