Pig Pink
See how #FED6E3 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Pig Pink Base */
--color-primary: #FED6E3;
--color-primary-rgb: 254 214 227;
--color-primary-hsl: 341 95% 92%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #fee6ee;
--color-primary-100: #fdb4cb;
--color-primary-200: #fc83a9;
--color-primary-300: #fb5187;
--color-primary-400: #f91f64;
--color-primary-500: #e0064b;
--color-primary-600: #ae043a;
--color-primary-700: #7c032a;
--color-primary-800: #4b0219;
--color-primary-900: #190108;
}