Clear Red

CSS

:root {
  --clear-red: #ce261c;
  --clear-red-rgb: 206 38 28;
  --clear-red-oklch: oklch(0.551 0.204 29.1);
}

.element {
  color: var(--clear-red);
  background-color: hsl(3 76% 46%);
  border-color: oklch(0.551 0.204 29.1);
}

Tailwind CSS v4

@theme {
  --color-clear-red: #ce261c;
  --color-clear-red-50: #ffe0d2;
  --color-clear-red-100: #ffcfbe;
  --color-clear-red-200: #ffb29e;
  --color-clear-red-300: #ff8b75;
  --color-clear-red-400: #ff6453;
  --color-clear-red-500: #ef3327;
  --color-clear-red-600: #ca2e23;
  --color-clear-red-700: #a2251c;
  --color-clear-red-800: #7a1816;
  --color-clear-red-900: #56100e;
  --color-clear-red-950: #390102;
}

SCSS

$clear-red: #ce261c;
$clear-red-rgb: 206, 38, 28;
$clear-red-light: mix(#fff, $clear-red, 20%);
$clear-red-dark: mix(#000, $clear-red, 20%);

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