Red Orange

CSS

:root {
  --red-orange: #ff3f34;
  --red-orange-rgb: 255 63 52;
  --red-orange-oklch: oklch(0.658 0.229 28.5);
}

.element {
  color: var(--red-orange);
  background-color: hsl(3 100% 60%);
  border-color: oklch(0.658 0.229 28.5);
}

Tailwind CSS v4

@theme {
  --color-red-orange: #ff3f34;
  --color-red-orange-50: #ffddce;
  --color-red-orange-100: #ffcbba;
  --color-red-orange-200: #ffad98;
  --color-red-orange-300: #ff836d;
  --color-red-orange-400: #ff5748;
  --color-red-orange-500: #fa0810;
  --color-red-orange-600: #d31413;
  --color-red-orange-700: #aa1210;
  --color-red-orange-800: #7f080f;
  --color-red-orange-900: #5a0709;
  --color-red-orange-950: #3d0000;
}

SCSS

$red-orange: #ff3f34;
$red-orange-rgb: 255, 63, 52;
$red-orange-light: mix(#fff, $red-orange, 20%);
$red-orange-dark: mix(#000, $red-orange, 20%);

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