Shades of Ruby

CSS

:root {
  --shades-of-ruby: #9c0009;
  --shades-of-ruby-rgb: 156 0 9;
  --shades-of-ruby-oklch: oklch(0.435 0.178 27.8);
}

.element {
  color: var(--shades-of-ruby);
  background-color: hsl(357 100% 31%);
  border-color: oklch(0.435 0.178 27.8);
}

Tailwind CSS v4

@theme {
  --color-shades-of-ruby: #9c0009;
  --color-shades-of-ruby-50: #ffe3d7;
  --color-shades-of-ruby-100: #ffd2c5;
  --color-shades-of-ruby-200: #ffb7a7;
  --color-shades-of-ruby-300: #ff9280;
  --color-shades-of-ruby-400: #f56e61;
  --color-shades-of-ruby-500: #e4473d;
  --color-shades-of-ruby-600: #c03d35;
  --color-shades-of-ruby-700: #9b312a;
  --color-shades-of-ruby-800: #74221f;
  --color-shades-of-ruby-900: #521615;
  --color-shades-of-ruby-950: #360606;
}

SCSS

$shades-of-ruby: #9c0009;
$shades-of-ruby-rgb: 156, 0, 9;
$shades-of-ruby-light: mix(#fff, $shades-of-ruby, 20%);
$shades-of-ruby-dark: mix(#000, $shades-of-ruby, 20%);

.element {
  color: $shades-of-ruby;
  box-shadow: 0 0 0 2px rgba($shades-of-ruby, 0.35);
}