A ChatGPT-inspired system anchored by the brand’s signature green, paired with deeper and softer companions that keep the interface familiar while feeling more designed and usable. The palette balances the recognizable AI-green with calm teal and warm mint accents, plus a clear neutral structure for
A ChatGPT-inspired system anchored by the brand’s signature green, paired with deeper and softer companions that keep the interface familiar while feeling more designed and usable. The palette balances the recognizable AI-green with calm teal and warm mint accents, plus a clear neutral structure for
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay tightly centered on the familiar ChatGPT green family, with one brighter brand green for recognition, one deeper green for structure, and one soft sage for flexibility. Together they read as a coherent AI system without
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 stay tightly centered on the familiar ChatGPT green family, with one brighter brand green for recognition, one deeper green for structure, and one soft sage for flexibility. Together they read as a coherent AI system without
RolesLogo, Btn Primary Bg
The signature brand green that carries instant recognition and makes the palette feel authentically ChatGPT-inspired.
#10A37F16, 163, 127165, 82, 3590, 0, 22, 36RolesLink, Btn Secondary Bg, Headline
A darker green that adds hierarchy, keeps links readable, and gives secondary actions a confident but quieter presence.
#0B6B5711, 107, 87168, 81, 2390, 0, 19, 58RolesBtn Outlined Border, Btn Outlined Text
A muted mint-sage that supports outlines and subtle emphasis without competing with the primary brand green.
#B7E4D5183, 228, 213160, 45, 8120, 0, 7, 11The support accents extend the green system with cooler, lower-attention tones that help UI states and data details feel connected rather than decorative. They remain subdued so a
RolesIcon, Border
A restrained teal that bridges the main greens and adds useful structure for icons and borders.
#4FA89C79, 168, 156172, 36, 4853, 0, 7, 34RolesDivider, Outline
A pale mint accent that softens dividers and outlines while preserving the clean, modern assistant feel.
#D9F1EA217, 241, 234163, 46, 9010, 0, 3, 5Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F7F6244, 247, 246160, 16, 961, 0, 0, 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-chatgpt-green: #10A37F;
--color-deep-interface-green: #0B6B57;
--color-soft-sage-tint: #B7E4D5;
--color-calm-teal: #4FA89C;
--color-mist-mint: #D9F1EA;
--color-pure-white: #FFFFFF;
--color-fog-white: #F4F7F6;
--color-carbon-black: #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-link: #0B6B57;
--role-btn-secondary-bg: #0B6B57;
--role-headline: #0B6B57;
--role-btn-outlined-border: #B7E4D5;
--role-btn-outlined-text: #B7E4D5;
--role-icon: #4FA89C;
--role-border: #4FA89C;
--role-divider: #D9F1EA;
--role-outline: #D9F1EA;
--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.{
"chatgpt-green": "#10A37F",
"deep-interface-green": "#0B6B57",
"soft-sage-tint": "#B7E4D5",
"calm-teal": "#4FA89C",
"mist-mint": "#D9F1EA",
"pure-white": "#FFFFFF",
"fog-white": "#F4F7F6",
"carbon-black": "#111827"
}