Amaranth
See how #E94057 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Amaranth Base */
--color-primary: #E94057;
--color-primary-rgb: 233 64 87;
--color-primary-hsl: 352 79% 58%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #fce8eb;
--color-primary-100: #f7bbc3;
--color-primary-200: #f28d9a;
--color-primary-300: #ec5f72;
--color-primary-400: #e7324a;
--color-primary-500: #cd1830;
--color-primary-600: #a01326;
--color-primary-700: #720d1b;
--color-primary-800: #440810;
--color-primary-900: #170305;
}