Sè Lèi Orange

CSS

:root {
  --se-lei-orange: #fc824a;
  --se-lei-orange-rgb: 252 130 74;
  --se-lei-orange-oklch: oklch(0.735 0.165 43.9);
}

.element {
  color: var(--se-lei-orange);
  background-color: hsl(19 97% 64%);
  border-color: oklch(0.735 0.165 43.9);
}

Tailwind CSS v4

@theme {
  --color-se-lei-orange: #fc824a;
  --color-se-lei-orange-50: #ffe7ce;
  --color-se-lei-orange-100: #ffd8ba;
  --color-se-lei-orange-200: #ffbe98;
  --color-se-lei-orange-300: #fc9b6d;
  --color-se-lei-orange-400: #ec7a45;
  --color-se-lei-orange-500: #da5700;
  --color-se-lei-orange-600: #b84b09;
  --color-se-lei-orange-700: #943c09;
  --color-se-lei-orange-800: #6f2a09;
  --color-se-lei-orange-900: #4e1c06;
  --color-se-lei-orange-950: #340b00;
}

SCSS

$se-lei-orange: #fc824a;
$se-lei-orange-rgb: 252, 130, 74;
$se-lei-orange-light: mix(#fff, $se-lei-orange, 20%);
$se-lei-orange-dark: mix(#000, $se-lei-orange, 20%);

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