Blossom
See how #DCB4BC looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Blossom Base */
--color-primary: #DCB4BC;
--color-primary-rgb: 220 180 188;
--color-primary-hsl: 348 36% 78%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #f7eeef;
--color-primary-100: #e7cbd0;
--color-primary-200: #d6a8b1;
--color-primary-300: #c68692;
--color-primary-400: #b66373;
--color-primary-500: #9c495a;
--color-primary-600: #793946;
--color-primary-700: #572932;
--color-primary-800: #34181e;
--color-primary-900: #11080a;
}