Duolingo Owl Color Psychology & Meaning
Super Green as the base is Duolingo's most distinctive choice — making the background the brand color signals confidence and category ownership.
#58CC02
#FFFFFF
#1CB0F6
#4B4B4B
Background
Primary Accent
Secondary
Body Text
Duolingo Owl
playfuleducationalvibrant all appbrandingeducation
Fail
WCAG Grade
4.2:1
Contrast Ratio
2,900
Saves
7,800
AI Copies
Use #58CC02 as the background. Use #FFFFFF as the primary accent. Use #1CB0F6 as secondary. Use #4B4B4B as body text. Palette: Duolingo Owl — playful, educational, vibrant.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Duolingo Owl color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 45.3% | 88, 204, 2 | 57%, 0%, 99%, 20% | 94°, 98%, 40% | ||
| Primary Accent Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Secondary Luminance: 38.0% | 28, 176, 246 | 89%, 28%, 0%, 4% | 199°, 92%, 54% | ||
| Body Text Luminance: 7.0% | 75, 75, 75 | 0%, 0%, 0%, 71% | 0°, 0%, 29% |
Color Harmony: Split-Complementary Scheme
The Duolingo Owl palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Duolingo's 2022 redesign made Super Green the dominant surface color for marketing, cementing green as one of the most recognized brand colors in education.
Best Design Use Cases
Super Green as hero backgrounds. White for the owl and UI elements. Blue for streak and bonus features. Dark gray for all text.
Industries This Palette Suits
EdTech, language learning, gamification, consumer apps.
How to Implement the Duolingo Owl Color Scheme
To use this Duolingo Owl color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #58CC02 for the main background and #FFFFFF for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #4B4B4B and #58CC02 is 4.18:1 (Fail). Ensure your body text remains legible.