Red Onion

CSS

:root {
  --red-onion: #473442;
  --red-onion-rgb: 71 52 66;
  --red-onion-oklch: oklch(0.352 0.035 336);
}

.element {
  color: var(--red-onion);
  background-color: hsl(316 15% 24%);
  border-color: oklch(0.352 0.035 336);
}

Tailwind CSS v4

@theme {
  --color-red-onion: #473442;
  --color-red-onion-50: #fcf1f9;
  --color-red-onion-100: #f0e4ec;
  --color-red-onion-200: #dfcfd9;
  --color-red-onion-300: #c4b1be;
  --color-red-onion-400: #ad97a6;
  --color-red-onion-500: #967e8f;
  --color-red-onion-600: #7f6a79;
  --color-red-onion-700: #655561;
  --color-red-onion-800: #4a3e47;
  --color-red-onion-900: #342b31;
  --color-red-onion-950: #1f181d;
}

SCSS

$red-onion: #473442;
$red-onion-rgb: 71, 52, 66;
$red-onion-light: mix(#fff, $red-onion, 20%);
$red-onion-dark: mix(#000, $red-onion, 20%);

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