This palette borrows ChatGPT’s calm, intelligent feel without copying it, pairing a fresh green core with a deep teal-blue and a warm coral accent for clearer hierarchy. The neutrals stay clean and highly usable so the system feels modern in product UI, marketing, and brand surfaces.
This palette borrows ChatGPT’s calm, intelligent feel without copying it, pairing a fresh green core with a deep teal-blue and a warm coral accent for clearer hierarchy. The neutrals stay clean and highly usable so the system feels modern in product UI, marketing, and brand surfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a recognizable AI green with a deep teal-blue and a restrained coral accent, creating a balanced system that feels intelligent, approachable, and product-ready. The relationship is distinct enough for brand recognition while staying flexible across interface states and marketing layouts.
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 recognizable AI green with a deep teal-blue and a restrained coral accent, creating a balanced system that feels intelligent, approachable, and product-ready. The relationship is distinct enough for brand recognition while staying flexible across interface states and marketing layouts.
RolesLogo, Btn Primary Bg, Headline
Emerald carries the core ChatGPT-inspired recognition and gives the brand an immediate sense of clarity and intelligence.
#10A37F16, 163, 127165, 82, 3590, 0, 22, 36RolesLink, Btn Secondary Bg
Teal adds depth and trust, supporting navigation and secondary actions without competing with the primary green.
#0F766E15, 118, 110175, 77, 2687, 0, 7, 54RolesBtn Outlined Border, Btn Outlined Text
Coral introduces a warm contrast that helps outlined actions stand apart while keeping the palette human and energetic.
#E76F51231, 111, 8112, 76, 610, 52, 65, 9The support colors extend the green-teal system with quieter accents that improve structure and usability. They stay subdued so the palette remains clearly centered on the main AI-inspired hues.
RolesIcon, Border
Sage softens the interface edges and reinforces the organic, assistive feel of the core greens.
#4C6A5A76, 106, 90148, 16, 3628, 0, 15, 58RolesDivider, Outline
Slate Blue provides a cool structural note that keeps separators and outlines crisp without drawing focus away from the main palette.
#8A9BA8138, 155, 168206, 15, 6018, 8, 0, 34Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F7F5244, 247, 245140, 16, 961, 0, 1, 3RolesBg Dark, Text, Btn Primary Text
#11182717, 24, 39221, 39, 1156, 38, 0, 85Copy 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-emerald: #10A37F;
--color-teal: #0F766E;
--color-coral: #E76F51;
--color-sage: #4C6A5A;
--color-slate-blue: #8A9BA8;
--color-white: #FFFFFF;
--color-ivory: #F4F7F5;
--color-charcoal: #111827;
}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: #10A37F;
--role-btn-primary-bg: #10A37F;
--role-headline: #10A37F;
--role-link: #0F766E;
--role-btn-secondary-bg: #0F766E;
--role-btn-outlined-border: #E76F51;
--role-btn-outlined-text: #E76F51;
--role-icon: #4C6A5A;
--role-border: #4C6A5A;
--role-divider: #8A9BA8;
--role-outline: #8A9BA8;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #111827;
--role-text: #111827;
--role-btn-primary-text: #111827;
}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.{
"emerald": "#10A37F",
"teal": "#0F766E",
"coral": "#E76F51",
"sage": "#4C6A5A",
"slate-blue": "#8A9BA8",
"white": "#FFFFFF",
"ivory": "#F4F7F5",
"charcoal": "#111827"
}