Duolingo Green#58CC02
Duolingo Blue#1CB0F6
Duolingo Orange#FF9600
Mild Mint Green#7AD64C
Warm Butter Yellow#F6D365
Palette direction

Duolingo Inspired Learning Color Palette

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

ComplementaryEducationduolingo-inspiredlanguage-learningplayfulapp-ui
palette-preview.example
Education color direction

Duolingo Inspired Learning Color Palette

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 system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Charcoal Ink #1F2937on Duolingo Green #58CC027.0:1 Excellent
Logo Charcoal Ink #1F2937on Duolingo Orange #FF96006.7:1 Strong
Logo Charcoal Ink #1F2937on Duolingo Blue #1CB0F66.0:1 Strong
Logo Charcoal Ink #1F2937on Pure White #FFFFFF14.7:1 Excellent
Icon color
BackgroundDuolingo Green#58CC02TextCharcoal Ink#1F2937
Primary Button7.03:1
AAA

Best for the main action users should notice first.

BackgroundDuolingo Blue#1CB0F6TextCharcoal Ink#1F2937
Secondary Button6.00:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextDuolingo Orange#FF9600
Outlined Button2.18:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextDuolingo Blue#1CB0F6
Text Button2.44:1
Low

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsComplementary color relationship
9:41Duolingo Inspired Learning Color Palette Color role balance
Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CDuolingo Inspired Learning Color PaletteEducation brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color 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

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Duolingo Green #58CC02
HeadlineUsed for main titles and key messages.Duolingo Orange #FF9600
LinkUsed for links and interactive text.Duolingo Blue #1CB0F6

Buttons

Primary Button
BackgroundDuolingo Green #58CC02
TextCharcoal Ink #1F2937
Secondary Button
BackgroundDuolingo Blue #1CB0F6
TextCharcoal Ink #1F2937
Outlined Button
BackgroundDuolingo Orange #FF9600
TextDuolingo Orange #FF9600

Interface

TextDefault readable body text.Charcoal Ink #1F2937
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Charcoal Ink #1F2937
IconSmall interface icons and marks.Mild Mint Green #7AD64C
BorderCards, inputs, and component borders.Mild Mint Green #7AD64C
DividerSubtle separators between content.Warm Butter Yellow #F6D365
OutlineFocus rings and emphasis outlines.Warm Butter Yellow #F6D365

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

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

PrimaryDuolingo Green

RolesLogo, Btn Primary Bg

The signature green anchors the brand identity and delivers the strongest recognition across the interface.

HEX#58CC02
RGB88, 204, 2
HSL94, 98, 40
CMYK57, 0, 99, 20
SecondaryDuolingo Blue

RolesLink, Btn Secondary Bg

The blue adds a crisp, action-oriented contrast that works well for interactive elements and navigation cues.

HEX#1CB0F6
RGB28, 176, 246
HSL199, 92, 54
CMYK89, 28, 0, 4
TertiaryDuolingo Orange

RolesBtn Outlined Border, Btn Outlined Text, Headline

The orange brings a lively reward signal that energizes headlines and outlined actions without overpowering the core green.

HEX#FF9600
RGB255, 150, 0
HSL35, 100, 50
CMYK0, 41, 100, 0

Support Colors

These 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, 

Mild Mint Green

RolesIcon, Border

A softer green support tone that reinforces the primary brand hue while staying calmer for UI detail and separators.

HEX#7AD64C
RGB122, 214, 76
HSL100, 63, 57
CMYK43, 0, 64, 16
Warm Butter Yellow

RolesDivider, Outline

A gentle warm accent that echoes the app’s cheerful tone and adds subtle visual separation without competing with the main colors.

HEX#F6D365
RGB246, 211, 101
HSL46, 89, 68
CMYK0, 14, 59, 4

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Pure White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Cloud White
HEX#F5F7FA
RGB245, 247, 250
HSL216, 33, 97
CMYK2, 1, 0, 2
Charcoal Ink

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#1F2937
RGB31, 41, 55
HSL215, 28, 17
CMYK44, 25, 0, 78

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

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;
}

Role tokens

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;
}

JSON

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"
}
Press Space to load new palette