Red Power

CSS

:root {
  --red-power: #d63d3b;
  --red-power-rgb: 214 61 59;
  --red-power-oklch: oklch(0.587 0.19 25.9);
}

.element {
  color: var(--red-power);
  background-color: hsl(1 65% 54%);
  border-color: oklch(0.587 0.19 25.9);
}

Tailwind CSS v4

@theme {
  --color-red-power: #d63d3b;
  --color-red-power-50: #ffe1d7;
  --color-red-power-100: #ffd0c5;
  --color-red-power-200: #ffb4a7;
  --color-red-power-300: #ff8e80;
  --color-red-power-400: #fb6860;
  --color-red-power-500: #e93d3c;
  --color-red-power-600: #c53634;
  --color-red-power-700: #9f2b29;
  --color-red-power-800: #771d1f;
  --color-red-power-900: #541315;
  --color-red-power-950: #380406;
}

SCSS

$red-power: #d63d3b;
$red-power-rgb: 214, 61, 59;
$red-power-light: mix(#fff, $red-power, 20%);
$red-power-dark: mix(#000, $red-power, 20%);

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