Pomegranate
See how #EF3B36 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Pomegranate Base */
--color-primary: #EF3B36;
--color-primary-rgb: 239 59 54;
--color-primary-hsl: 2 85% 57%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #fde8e7;
--color-primary-100: #f9bab8;
--color-primary-200: #f58d89;
--color-primary-300: #f25f5a;
--color-primary-400: #ee312b;
--color-primary-500: #d41811;
--color-primary-600: #a5120d;
--color-primary-700: #760d0a;
--color-primary-800: #470806;
--color-primary-900: #180302;
}