A playful, high-contrast learning palette built around Duolingo’s signature green, blue, and orange accents with clean white, soft neutral surfaces, and deep charcoal for readability. The system feels energetic and approachable while staying highly functional across app UI, icons, and brand touch-pi
A playful, high-contrast learning palette built around Duolingo’s signature green, blue, and orange accents with clean white, soft neutral surfaces, and deep charcoal for readability. The system feels energetic and approachable while staying highly functional across app UI, icons, and brand touch-pi
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors create a recognizable triad of vivid green, energetic blue, and warm orange that keeps the brand playful and instantly app-like. Together they balance friendliness, motion, and reward-driven clarity without leaning on one-hu
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 create a recognizable triad of vivid green, energetic blue, and warm orange that keeps the brand playful and instantly app-like. Together they balance friendliness, motion, and reward-driven clarity without leaning on one-hu
RolesLogo, Btn Primary Bg
The signature green anchors the brand identity and delivers the strongest recognition across the interface.
#58CC0288, 204, 294, 98, 4057, 0, 99, 20RolesLink, Btn Secondary Bg
The blue adds a crisp, action-oriented contrast that works well for interactive elements and navigation cues.
#1CB0F628, 176, 246199, 92, 5489, 28, 0, 4RolesBtn Outlined Border, Btn Outlined Text, Headline
The orange brings a lively reward signal that energizes headlines and outlined actions without overpowering the core green.
#FF9600255, 150, 035, 100, 500, 41, 100, 0These accents stay subordinate to the core triad and help extend the interface with softer, utility-driven emphasis. They add balance for states, highlights, and visual hierarchy,
RolesIcon, Border
A softer green support tone that reinforces the primary brand hue while staying calmer for UI detail and separators.
#7AD64C122, 214, 76100, 63, 5743, 0, 64, 16RolesDivider, Outline
A gentle warm accent that echoes the app’s cheerful tone and adds subtle visual separation without competing with the main colors.
#F6D365246, 211, 10146, 89, 680, 14, 59, 4Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#1F293731, 41, 55215, 28, 1744, 25, 0, 78Copy 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-duolingo-green: #58CC02;
--color-duolingo-blue: #1CB0F6;
--color-duolingo-orange: #FF9600;
--color-mild-mint-green: #7AD64C;
--color-warm-butter-yellow: #F6D365;
--color-pure-white: #FFFFFF;
--color-cloud-white: #F5F7FA;
--color-charcoal-ink: #1F2937;
}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: #58CC02;
--role-btn-primary-bg: #58CC02;
--role-link: #1CB0F6;
--role-btn-secondary-bg: #1CB0F6;
--role-btn-outlined-border: #FF9600;
--role-btn-outlined-text: #FF9600;
--role-headline: #FF9600;
--role-icon: #7AD64C;
--role-border: #7AD64C;
--role-divider: #F6D365;
--role-outline: #F6D365;
--role-bg-light: #FFFFFF;
--role-bg-dark: #1F2937;
--role-text: #1F2937;
--role-btn-primary-text: #1F2937;
--role-btn-secondary-text: #1F2937;
}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.{
"duolingo-green": "#58CC02",
"duolingo-blue": "#1CB0F6",
"duolingo-orange": "#FF9600",
"mild-mint-green": "#7AD64C",
"warm-butter-yellow": "#F6D365",
"pure-white": "#FFFFFF",
"cloud-white": "#F5F7FA",
"charcoal-ink": "#1F2937"
}