Fēi Hóng Scarlet

CSS

:root {
  --fei-hong-scarlet: #fe420f;
  --fei-hong-scarlet-rgb: 254 66 15;
  --fei-hong-scarlet-oklch: oklch(0.656 0.23 34.1);
}

.element {
  color: var(--fei-hong-scarlet);
  background-color: hsl(13 99% 53%);
  border-color: oklch(0.656 0.23 34.1);
}

Tailwind CSS v4

@theme {
  --color-fei-hong-scarlet: #fe420f;
  --color-fei-hong-scarlet-50: #ffdec8;
  --color-fei-hong-scarlet-100: #ffcdb2;
  --color-fei-hong-scarlet-200: #ffaf8e;
  --color-fei-hong-scarlet-300: #ff865e;
  --color-fei-hong-scarlet-400: #ff5a32;
  --color-fei-hong-scarlet-500: #f91500;
  --color-fei-hong-scarlet-600: #d31a00;
  --color-fei-hong-scarlet-700: #aa1600;
  --color-fei-hong-scarlet-800: #7f0b00;
  --color-fei-hong-scarlet-900: #5a0800;
  --color-fei-hong-scarlet-950: #3d0000;
}

SCSS

$fei-hong-scarlet: #fe420f;
$fei-hong-scarlet-rgb: 254, 66, 15;
$fei-hong-scarlet-light: mix(#fff, $fei-hong-scarlet, 20%);
$fei-hong-scarlet-dark: mix(#000, $fei-hong-scarlet, 20%);

.element {
  color: $fei-hong-scarlet;
  box-shadow: 0 0 0 2px rgba($fei-hong-scarlet, 0.35);
}