This palette combines fresh blues and a lively green to embody cleanliness and eco-friendliness, balanced with cool gray accents and neutral shades that promote clarity and trust. The main colors provide a recognizable, harmonious system that clearly communicates the brand's focus on cleanliness and vitality.
This palette combines fresh blues and a lively green to embody cleanliness and eco-friendliness, balanced with cool gray accents and neutral shades that promote clarity and trust. The main colors provide a recognizable, harmonious system that clearly communicates the brand's focus on cleanliness and vitality.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine shades of blue and green to express freshness, reliability, and eco-consciousness, making the brand easily identifiable and memorable.
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 shades of blue and green to express freshness, reliability, and eco-consciousness, making the brand easily identifiable and memorable.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Azure blue evokes a sense of cleanliness and trust, making it an ideal primary color for a cleaning brand's identity and interactive elements.
#2A73CC42, 115, 204213, 66, 4879, 44, 0, 20RolesBtn Secondary Bg
Forest Green adds an eco-friendly and natural feel, subtly supporting the primary blue without overpowering it.
#28A74540, 167, 69134, 61, 4176, 0, 59, 35Sky Blue provides a soft, harmonious variation that complements the deeper blue and fresh green for headline use.
#4C9ED976, 158, 217205, 65, 5765, 27, 0, 15Support colors extend the palette with muted teal and slate shades that enhance the freshness while remaining visually subordinate to the main colors.
RolesIcon, Border, Divider, Outline
Teal balances the main colors by adding a cooler accent that highlights details such as icons and borders without competing for attention.
#3B8D9959, 141, 153188, 44, 4261, 8, 0, 40Slate offers a subtle, desaturated shade that complements the blues and greens while ensuring visual stability and neutrality in interface elements.
#708090112, 128, 144210, 13, 5022, 11, 0, 44Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F4F4F4244, 244, 2440, 0, 960, 0, 0, 4RolesText, Btn Secondary Text
#2F2F2F47, 47, 470, 0, 180, 0, 0, 82Copy 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-azure: #2A73CC;
--color-forest-green: #28A745;
--color-sky-blue: #4C9ED9;
--color-teal: #3B8D99;
--color-slate: #708090;
--color-ivory: #FFFFFF;
--color-snow: #F4F4F4;
--color-charcoal: #2F2F2F;
}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: #2A73CC;
--role-link: #2A73CC;
--role-btn-primary-bg: #2A73CC;
--role-btn-outlined-border: #2A73CC;
--role-btn-outlined-text: #2A73CC;
--role-headline: #2A73CC;
--role-btn-secondary-bg: #28A745;
--role-icon: #3B8D99;
--role-border: #3B8D99;
--role-divider: #3B8D99;
--role-outline: #3B8D99;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F4F4F4;
--role-text: #2F2F2F;
--role-btn-secondary-text: #2F2F2F;
}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.{
"azure": "#2A73CC",
"forest-green": "#28A745",
"sky-blue": "#4C9ED9",
"teal": "#3B8D99",
"slate": "#708090",
"ivory": "#FFFFFF",
"snow": "#F4F4F4",
"charcoal": "#2F2F2F"
}