This palette draws from the deep teal and muted grass green of the background and radar-like textures, paired with crisp white and soft grays to create a calming yet natural impression. It balances rich color depth with light neutrals for contrast and readability.
This palette draws from the deep teal and muted grass green of the background and radar-like textures, paired with crisp white and soft grays to create a calming yet natural impression. It balances rich color depth with light neutrals for contrast and readability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors are analogous shades of teal and green that evoke a sense of nature, calmness, and balance, working together to create a recognizable organic aesthetic.
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 are analogous shades of teal and green that evoke a sense of nature, calmness, and balance, working together to create a recognizable organic aesthetic.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Teal adds a strong, grounded presence with a calming and sophisticated tone.
#2B5D5843, 93, 88174, 37, 2754, 0, 5, 64RolesBtn Secondary Bg
Grass Green brings a natural, fresh energy that complements the richness of teal.
#4B775475, 119, 84132, 23, 3837, 0, 29, 53Support colors are muted versions of the main hues, adding subtler visual interest and functionality without overpowering the primary colors.
RolesIcon, Border, Divider, Outline
Muted Sage serves as a soft supportive tone to harmonize and balance the main palette.
#799884121, 152, 132141, 13, 5420, 0, 13, 40Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F4F4244, 244, 2440, 0, 960, 0, 0, 4RolesBg Dark, Text
#23232335, 35, 350, 0, 140, 0, 0, 86Copy 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-teal: #2B5D58;
--color-grass-green: #4B7754;
--color-muted-sage: #799884;
--color-white: #FFFFFF;
--color-alabaster: #F4F4F4;
--color-charcoal: #232323;
}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: #2B5D58;
--role-link: #2B5D58;
--role-btn-primary-bg: #2B5D58;
--role-btn-outlined-border: #2B5D58;
--role-btn-outlined-text: #2B5D58;
--role-headline: #2B5D58;
--role-btn-secondary-bg: #4B7754;
--role-icon: #799884;
--role-border: #799884;
--role-divider: #799884;
--role-outline: #799884;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #232323;
--role-text: #232323;
}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.{
"teal": "#2B5D58",
"grass-green": "#4B7754",
"muted-sage": "#799884",
"white": "#FFFFFF",
"alabaster": "#F4F4F4",
"charcoal": "#232323"
}