Black Power

CSS

:root {
  --black-power: #654b37;
  --black-power-rgb: 101 75 55;
  --black-power-oklch: oklch(0.435 0.047 58.7);
}

.element {
  color: var(--black-power);
  background-color: hsl(26 29% 31%);
  border-color: oklch(0.435 0.047 58.7);
}

Tailwind CSS v4

@theme {
  --color-black-power: #654b37;
  --color-black-power-50: #fff2e8;
  --color-black-power-100: #f4e5d9;
  --color-black-power-200: #e4d0c1;
  --color-black-power-300: #cab2a0;
  --color-black-power-400: #b49883;
  --color-black-power-500: #9e7f67;
  --color-black-power-600: #866c58;
  --color-black-power-700: #6b5646;
  --color-black-power-800: #4f3e33;
  --color-black-power-900: #372b22;
  --color-black-power-950: #221812;
}

SCSS

$black-power: #654b37;
$black-power-rgb: 101, 75, 55;
$black-power-light: mix(#fff, $black-power, 20%);
$black-power-dark: mix(#000, $black-power, 20%);

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