Bright Red

CSS

:root {
  --bright-red: #ff000d;
  --bright-red-rgb: 255 0 13;
  --bright-red-oklch: oklch(0.628 0.257 28.5);
}

.element {
  color: var(--bright-red);
  background-color: hsl(357 100% 50%);
  border-color: oklch(0.628 0.257 28.5);
}

Tailwind CSS v4

@theme {
  --color-bright-red: #ff000d;
  --color-bright-red-50: #ffdac9;
  --color-bright-red-100: #ffc7b4;
  --color-bright-red-200: #ffa790;
  --color-bright-red-300: #ff7a61;
  --color-bright-red-400: #ff4539;
  --color-bright-red-500: #ff0000;
  --color-bright-red-600: #dd0000;
  --color-bright-red-700: #b20000;
  --color-bright-red-800: #850002;
  --color-bright-red-900: #5f0003;
  --color-bright-red-950: #400000;
}

SCSS

$bright-red: #ff000d;
$bright-red-rgb: 255, 0, 13;
$bright-red-light: mix(#fff, $bright-red, 20%);
$bright-red-dark: mix(#000, $bright-red, 20%);

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