This vibrant palette is inspired by the rich reds and warm orange hues of the bird's feathers combined with the fresh, natural greens of the foliage, creating a balanced and energetic system with strong natural appeal.
This vibrant palette is inspired by the rich reds and warm orange hues of the bird's feathers combined with the fresh, natural greens of the foliage, creating a balanced and energetic system with strong natural appeal.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a vivid scarlet red and a lush pine green, offering a classic complementary contrast that stands out while maintaining harmony reflecting natural vibrancy.
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 combine a vivid scarlet red and a lush pine green, offering a classic complementary contrast that stands out while maintaining harmony reflecting natural vibrancy.
RolesLogo, Link, Btn Primary Bg
Scarlet Red conveys passion and energy, drawing immediate attention and establishing strong visual identity.
#C1272D193, 39, 45358, 66, 450, 80, 77, 24RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Pine Green adds freshness and balance, grounding the palette with natural stability and reassurance.
#2A793042, 121, 48125, 48, 3265, 0, 60, 53RolesHeadline
Burnt Orange introduces warmth and vibrancy, complementing the red and green for dynamic visual interest.
#E96A29233, 106, 4120, 81, 540, 55, 82, 9The support colors extend the main palette by adding softer green tones for icons and borders, enhancing usability without overpowering the main hues.
RolesIcon, Border, Divider
Moss Green supports the palette with a lighter, subdued tone that harmonizes with Pine Green while maintaining visual subtlety.
#6DAF57109, 175, 87105, 35, 5138, 0, 50, 31RolesOutline
Sage Green offers a gentle contrast, complementing the deeper greens and providing balanced neutrality for outlines.
#A4C97B164, 201, 12388, 42, 6418, 0, 39, 21Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F2F2F2242, 242, 2420, 0, 950, 0, 0, 5RolesBg Dark, Text
#22222234, 34, 340, 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-scarlet-red: #C1272D;
--color-pine-green: #2A7930;
--color-burnt-orange: #E96A29;
--color-moss-green: #6DAF57;
--color-sage-green: #A4C97B;
--color-white: #FFFFFF;
--color-alabaster: #F2F2F2;
--color-jet-black: #222222;
}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: #C1272D;
--role-link: #C1272D;
--role-btn-primary-bg: #C1272D;
--role-btn-secondary-bg: #2A7930;
--role-btn-outlined-border: #2A7930;
--role-btn-outlined-text: #2A7930;
--role-headline: #E96A29;
--role-icon: #6DAF57;
--role-border: #6DAF57;
--role-divider: #6DAF57;
--role-outline: #A4C97B;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #222222;
--role-text: #222222;
}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.{
"scarlet-red": "#C1272D",
"pine-green": "#2A7930",
"burnt-orange": "#E96A29",
"moss-green": "#6DAF57",
"sage-green": "#A4C97B",
"white": "#FFFFFF",
"alabaster": "#F2F2F2",
"jet-black": "#222222"
}