This palette combines a balanced triadic harmony with a calming Blue, an energetic Coral, and a fresh Olive to provide a versatile yet distinctive brand system suitable for technology and professional services sectors.
This palette combines a balanced triadic harmony with a calming Blue, an energetic Coral, and a fresh Olive to provide a versatile yet distinctive brand system suitable for technology and professional services sectors.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors Blue, Coral, and Olive form a triadic harmony that balances calmness, energy, and freshness, creating a recognizable and versatile brand palette.
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 Blue, Coral, and Olive form a triadic harmony that balances calmness, energy, and freshness, creating a recognizable and versatile brand palette.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Blue communicates reliability and professionalism, establishing trust and stability for the brand.
#4d95c077, 149, 192202, 48, 5360, 22, 0, 25RolesHeadline, Btn Secondary Bg
Coral brings vibrant energy and approachability, adding warmth and vitality to headlines and highlights.
#e26a56226, 106, 869, 71, 610, 53, 62, 11Olive adds a fresh, organic touch that balances the palette by giving a grounded and natural feel.
#76893b118, 137, 5975, 40, 3814, 0, 57, 46The support colors deepen and mute the main palette to enrich usability and harmonious accents that maintain the brand's clarity and accessibility.
RolesIcon, Border, Divider, Outline
Slate Blue complements the main Blue by offering a softer, muted variation that reinforces visual hierarchy without competing for attention.
#8aa6c1138, 166, 193209, 31, 6528, 14, 0, 24Muted Terra Cotta provides a subdued warm accent that supports Coral, balancing vibrancy with subtlety.
#c9a193201, 161, 14716, 33, 680, 20, 27, 21Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#ffffff255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#f4f4f4244, 244, 2440, 0, 960, 0, 0, 4RolesText, Btn Primary Text, Btn Secondary 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-blue: #4d95c0;
--color-coral: #e26a56;
--color-olive: #76893b;
--color-slate-blue: #8aa6c1;
--color-muted-terra-cotta: #c9a193;
--color-ivory: #ffffff;
--color-snow: #f4f4f4;
--color-charcoal: #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: #4d95c0;
--role-link: #4d95c0;
--role-btn-primary-bg: #4d95c0;
--role-btn-outlined-border: #4d95c0;
--role-btn-outlined-text: #4d95c0;
--role-headline: #e26a56;
--role-btn-secondary-bg: #e26a56;
--role-icon: #8aa6c1;
--role-border: #8aa6c1;
--role-divider: #8aa6c1;
--role-outline: #8aa6c1;
--role-bg-light: #ffffff;
--role-bg-dark: #f4f4f4;
--role-text: #222222;
--role-btn-primary-text: #222222;
--role-btn-secondary-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.{
"blue": "#4d95c0",
"coral": "#e26a56",
"olive": "#76893b",
"slate-blue": "#8aa6c1",
"muted-terra-cotta": "#c9a193",
"ivory": "#ffffff",
"snow": "#f4f4f4",
"charcoal": "#222222"
}