Whisky Cola

CSS

:root {
  --whisky-cola: #772233;
  --whisky-cola-rgb: 119 34 51;
  --whisky-cola-oklch: oklch(0.391 0.118 12.8);
}

.element {
  color: var(--whisky-cola);
  background-color: hsl(348 56% 30%);
  border-color: oklch(0.391 0.118 12.8);
}

Tailwind CSS v4

@theme {
  --color-whisky-cola: #772233;
  --color-whisky-cola-50: #ffe8ea;
  --color-whisky-cola-100: #ffd9db;
  --color-whisky-cola-200: #ffc0c4;
  --color-whisky-cola-300: #ed9fa4;
  --color-whisky-cola-400: #db808b;
  --color-whisky-cola-500: #c76270;
  --color-whisky-cola-600: #a8535f;
  --color-whisky-cola-700: #87424c;
  --color-whisky-cola-800: #642f38;
  --color-whisky-cola-900: #472026;
  --color-whisky-cola-950: #2e0f15;
}

SCSS

$whisky-cola: #772233;
$whisky-cola-rgb: 119, 34, 51;
$whisky-cola-light: mix(#fff, $whisky-cola, 20%);
$whisky-cola-dark: mix(#000, $whisky-cola, 20%);

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