Amaranth
See how #E52B50 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Amaranth Base */
--color-primary: #E52B50;
--color-primary-rgb: 229 43 80;
--color-primary-hsl: 348 78% 53%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #fce8ec;
--color-primary-100: #f7bbc7;
--color-primary-200: #f18ea1;
--color-primary-300: #eb607c;
--color-primary-400: #e63357;
--color-primary-500: #cc193d;
--color-primary-600: #9f142f;
--color-primary-700: #710e22;
--color-primary-800: #440814;
--color-primary-900: #170307;
}