Qing Dynasty Fire

CSS

:root {
  --qing-dynasty-fire: #dd2266;
  --qing-dynasty-fire-rgb: 221 34 102;
  --qing-dynasty-fire-oklch: oklch(0.588 0.219 7);
}

.element {
  color: var(--qing-dynasty-fire);
  background-color: hsl(338 73% 50%);
  border-color: oklch(0.588 0.219 7);
}

Tailwind CSS v4

@theme {
  --color-qing-dynasty-fire: #dd2266;
  --color-qing-dynasty-fire-50: #ffdce8;
  --color-qing-dynasty-fire-100: #ffc9d9;
  --color-qing-dynasty-fire-200: #ffabc1;
  --color-qing-dynasty-fire-300: #ff82a0;
  --color-qing-dynasty-fire-400: #ff5788;
  --color-qing-dynasty-fire-500: #f1176d;
  --color-qing-dynasty-fire-600: #cb1a5c;
  --color-qing-dynasty-fire-700: #a4164a;
  --color-qing-dynasty-fire-800: #7a0d38;
  --color-qing-dynasty-fire-900: #560926;
  --color-qing-dynasty-fire-950: #3a0015;
}

SCSS

$qing-dynasty-fire: #dd2266;
$qing-dynasty-fire-rgb: 221, 34, 102;
$qing-dynasty-fire-light: mix(#fff, $qing-dynasty-fire, 20%);
$qing-dynasty-fire-dark: mix(#000, $qing-dynasty-fire, 20%);

.element {
  color: $qing-dynasty-fire;
  box-shadow: 0 0 0 2px rgba($qing-dynasty-fire, 0.35);
}