Alizarin Crimson
See how #E32636 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Alizarin Crimson Base */
--color-primary: #E32636;
--color-primary-rgb: 227 38 54;
--color-primary-hsl: 355 77% 52%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #fce8ea;
--color-primary-100: #f6bbc0;
--color-primary-200: #f08e96;
--color-primary-300: #ea616c;
--color-primary-400: #e53443;
--color-primary-500: #cb1a29;
--color-primary-600: #9e1520;
--color-primary-700: #710f17;
--color-primary-800: #44090e;
--color-primary-900: #170305;
}