This palette combines vibrant red and soft pink with earthy green and calming blue, creating a fresh, joyful, and natural brand identity inspired by the happy berry character. The colors maintain strong contrast for usability while reflecting the playful and wholesome qualities of the brand.
This palette combines vibrant red and soft pink with earthy green and calming blue, creating a fresh, joyful, and natural brand identity inspired by the happy berry character. The colors maintain strong contrast for usability while reflecting the playful and wholesome qualities of the brand.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors of vibrant red, soft pink, and earthy green provide a friendly and energetic yet grounded visual system that echoes the joyful berry character and natural theme.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors of vibrant red, soft pink, and earthy green provide a friendly and energetic yet grounded visual system that echoes the joyful berry character and natural theme.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Crimson brings bold energy and vibrancy to the brand, capturing attention and expressing joy.
#D94153217, 65, 83353, 67, 550, 70, 62, 15RolesBtn Secondary Bg, Headline
Light Pink adds softness and approachability, balancing the boldness of crimson with warmth.
#E6A1AA230, 161, 170352, 58, 770, 30, 26, 10Sage Green grounds the palette with an earthy, natural feel that compliments the berry theme.
#70966D112, 150, 109116, 16, 5125, 0, 27, 41Support colors of muted blue and deep olive extend the palette with subtle, calm accents that don’t compete but enhance usability and balance.
RolesIcon, Border, Divider, Outline
Muted Blue provides a calm, stable accent that balances the warm reds and greens.
#88A0B9136, 160, 185211, 26, 6326, 14, 0, 27Deep Olive acts as a subdued greenish tone that supports the main sage while adding depth.
#5A664F90, 102, 7991, 13, 3512, 0, 23, 60Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText, Btn Secondary Text
#33333351, 51, 510, 0, 200, 0, 0, 80Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-crimson: #D94153;
--color-light-pink: #E6A1AA;
--color-sage-green: #70966D;
--color-muted-blue: #88A0B9;
--color-deep-olive: #5A664F;
--color-white: #FFFFFF;
--color-ivory: #F5F5F5;
--color-charcoal: #333333;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #D94153;
--role-link: #D94153;
--role-btn-primary-bg: #D94153;
--role-btn-outlined-border: #D94153;
--role-btn-outlined-text: #D94153;
--role-btn-secondary-bg: #E6A1AA;
--role-headline: #E6A1AA;
--role-icon: #88A0B9;
--role-border: #88A0B9;
--role-divider: #88A0B9;
--role-outline: #88A0B9;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #333333;
--role-btn-secondary-text: #333333;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"crimson": "#D94153",
"light-pink": "#E6A1AA",
"sage-green": "#70966D",
"muted-blue": "#88A0B9",
"deep-olive": "#5A664F",
"white": "#FFFFFF",
"ivory": "#F5F5F5",
"charcoal": "#333333"
}