Black Swan

CSS

:root {
  --black-swan: #332200;
  --black-swan-rgb: 51 34 0;
  --black-swan-oklch: oklch(0.266 0.055 80.9);
}

.element {
  color: var(--black-swan);
  background-color: hsl(40 100% 10%);
  border-color: oklch(0.266 0.055 80.9);
}

Tailwind CSS v4

@theme {
  --color-black-swan: #332200;
  --color-black-swan-50: #fdf4e4;
  --color-black-swan-100: #f1e7d4;
  --color-black-swan-200: #e0d3ba;
  --color-black-swan-300: #c5b598;
  --color-black-swan-400: #af9c7a;
  --color-black-swan-500: #99835c;
  --color-black-swan-600: #816f4e;
  --color-black-swan-700: #68583e;
  --color-black-swan-800: #4d402d;
  --color-black-swan-900: #352c1e;
  --color-black-swan-950: #20190e;
}

SCSS

$black-swan: #332200;
$black-swan-rgb: 51, 34, 0;
$black-swan-light: mix(#fff, $black-swan, 20%);
$black-swan-dark: mix(#000, $black-swan, 20%);

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