Solid Pink
See how #893843 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Solid Pink Base */
--color-primary: #893843;
--color-primary-rgb: 137 56 67;
--color-primary-hsl: 352 42% 38%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f8edee;
--color-primary-100: #e9c9cd;
--color-primary-200: #daa4ac;
--color-primary-300: #cb808a;
--color-primary-400: #bc5c69;
--color-primary-500: #a3434f;
--color-primary-600: #7f343e;
--color-primary-700: #5b252c;
--color-primary-800: #36161a;
--color-primary-900: #120709;
}