This palette captures the whimsical and vibrant energy of the image with a bright red as the bold main color, uplifted by lively green and soft wing white accents. The neutral colors provide solid grounding with crisp whites and a dark shade ensuring readability and contrast.
This palette captures the whimsical and vibrant energy of the image with a bright red as the bold main color, uplifted by lively green and soft wing white accents. The neutral colors provide solid grounding with crisp whites and a dark shade ensuring readability and contrast.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a balanced triadic scheme, combining energetic red, fresh green, and clean white, creating a lively and memorable visual identity.
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 form a balanced triadic scheme, combining energetic red, fresh green, and clean white, creating a lively and memorable visual identity.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Crimson delivers vibrant energy and eye-catching impact, making it ideal for brand recognition and calls to action.
#D63230214, 50, 481, 67, 510, 77, 78, 16RolesBtn Secondary Bg
Kelly Green introduces a fresh, natural balance, bringing vitality and optimism to the palette.
#5CB85C92, 184, 92120, 39, 5450, 0, 50, 28Pure White conveys clarity and simplicity, reinforcing contrast and clean design.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0The support colors provide subtle, harmonious accents that enhance the main colors without overwhelming them, creating a softer balance for UI elements and backgrounds.
RolesIcon, Border, Divider, Outline
Mint Cream complements Kelly Green by adding a gentle, muted tone that supports secondary elements gracefully.
#C8E6C9200, 230, 201122, 38, 8413, 0, 13, 10RolesBg Light
Snow White offers a light background option to enhance readability and make main colors pop.
#FAFAFA250, 250, 2500, 0, 980, 0, 0, 2Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesBg Dark, Text, Btn Secondary Text
#21212133, 33, 330, 0, 130, 0, 0, 87Copy 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: #D63230;
--color-kelly-green: #5CB85C;
--color-pure-white: #FFFFFF;
--color-mint-cream: #C8E6C9;
--color-snow-white: #FAFAFA;
--color-white: #FFFFFF;
--color-white-smoke: #F5F5F5;
--color-gunmetal: #212121;
}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: #D63230;
--role-link: #D63230;
--role-btn-primary-bg: #D63230;
--role-btn-outlined-border: #D63230;
--role-btn-outlined-text: #D63230;
--role-headline: #D63230;
--role-btn-secondary-bg: #5CB85C;
--role-icon: #C8E6C9;
--role-border: #C8E6C9;
--role-divider: #C8E6C9;
--role-outline: #C8E6C9;
--role-bg-light: #FAFAFA;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #212121;
--role-text: #212121;
--role-btn-secondary-text: #212121;
}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": "#D63230",
"kelly-green": "#5CB85C",
"pure-white": "#FFFFFF",
"mint-cream": "#C8E6C9",
"snow-white": "#FAFAFA",
"white": "#FFFFFF",
"white-smoke": "#F5F5F5",
"gunmetal": "#212121"
}