Rockin Red

CSS

:root {
  --rockin-red: #bc363c;
  --rockin-red-rgb: 188 54 60;
  --rockin-red-oklch: oklch(0.536 0.17 22.7);
}

.element {
  color: var(--rockin-red);
  background-color: hsl(357 55% 47%);
  border-color: oklch(0.536 0.17 22.7);
}

Tailwind CSS v4

@theme {
  --color-rockin-red: #bc363c;
  --color-rockin-red-50: #ffe3dd;
  --color-rockin-red-100: #ffd2cc;
  --color-rockin-red-200: #ffb8b0;
  --color-rockin-red-300: #ff938b;
  --color-rockin-red-400: #f2706e;
  --color-rockin-red-500: #e1494e;
  --color-rockin-red-600: #be4043;
  --color-rockin-red-700: #993335;
  --color-rockin-red-800: #722328;
  --color-rockin-red-900: #50171b;
  --color-rockin-red-950: #35070b;
}

SCSS

$rockin-red: #bc363c;
$rockin-red-rgb: 188, 54, 60;
$rockin-red-light: mix(#fff, $rockin-red, 20%);
$rockin-red-dark: mix(#000, $rockin-red, 20%);

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