DuckDuckGo color palette
TechDuckDuckGo's color identity centers on a vibrant orange primary, paired with clean neutrals and a distinctive green accent, reflecting its focus on privacy and clarity. The palette is consistent across web and app interfaces, emphasizing usability and brand recognition.
duckduckgo.comDuckDuckGo colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- DuckDuckGo OrangePrimary222, 88, 51
- DuckDuckGo GoldSecondary241, 163, 54
- DuckDuckGo GreenAccent81, 163, 81
Surfaces
Page, cards and dividers.- DuckDuckGo Light GrayBackground245, 246, 247
- DuckDuckGo WhiteSurface255, 255, 255
- DuckDuckGo Border GrayBorder214, 214, 214
Text
Three tiers of copy.- DuckDuckGo CharcoalText34, 34, 34
- DuckDuckGo Medium GraySecondary text102, 102, 102
- DuckDuckGo Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- DuckDuckGo Success GreenSuccess81, 163, 81
- DuckDuckGo Warning GoldWarning241, 163, 54
- DuckDuckGo Error OrangeError222, 88, 51
- DuckDuckGo Info BlueInfo59, 144, 196
Use DuckDuckGo's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
duckduckgo-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B90C4;
--error: #DE5833;
--accent: #51A351;
--border: #D6D6D6;
--primary: #DE5833;
--success: #51A351;
--surface: #FFFFFF;
--warning: #F1A336;
--secondary: #F1A336;
--text-muted: #999999;
--background: #F5F6F7;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
DuckDuckGo gray and neutral colors
The quiet part of the DuckDuckGo palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- DuckDuckGo Light GrayBackground
- HEX
- RGB
- HSL
- DuckDuckGo WhiteSurface
- HEX
- RGB
- HSL
- DuckDuckGo Border GrayBorder
- HEX
- RGB
- HSL
- DuckDuckGo CharcoalText
- HEX
- RGB
- HSL
- DuckDuckGo Medium GraySecondary text
- HEX
- RGB
- HSL
- DuckDuckGo Muted GrayMuted text
- HEX
- RGB
- HSL
About DuckDuckGo's colors
DuckDuckGo's palette uses a bold orange as its anchor, complemented by warm gold, green, and clear neutrals for readability. The scheme balances vibrancy with trustworthiness, supporting its privacy-first message.
Primary orange contrasts with green accent for calls to action.
Neutrals provide a clean, unobtrusive background for content.
Gold and blue are used for highlights and informational cues.
Psychology
The orange primary conveys friendliness and approachability, while green signals trust and action. Neutral grays and white backgrounds ensure clarity and focus on content.
Evolution
DuckDuckGo's palette has remained stable, with the orange primary and green accent consistently featured since early brand iterations. Minor adjustments to neutrals have improved accessibility and UI clarity over time.
Where DuckDuckGo uses each color
- Primary
Used for logo, primary buttons, and key highlights across the website and app.
- Secondary
Appears in icons, secondary buttons, and notification elements.
- Accent
Used for positive actions, confirmations, and occasional highlights.
- Backgrounds
Light gray and white backgrounds are standard for page and card surfaces.
- Text
Charcoal and medium gray are used for primary and secondary text, ensuring legibility.
- Semantic
Green, gold, and orange are used for success, warning, and error states respectively, while blue is reserved for informational messages.
DuckDuckGo color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official DuckDuckGo primary color is #DE5833. This orange is used for the logo and main brand elements.
DuckDuckGo Orange (#DE5833) in RGB is 222, 88, 51. In CMYK, it is approximately 0, 60, 77, 13.
DuckDuckGo uses #F5F6F7 for light backgrounds, #D6D6D6 for borders, #222222 for primary text, and #666666 for secondary text. These neutrals ensure a clean, readable interface.
Use #DE5833 for primary actions and branding, with #51A351 and #F1A336 for semantic states and accents. Neutrals like #F5F6F7 and #222222 should be used for backgrounds and text to maintain clarity.
The secondary color is DuckDuckGo Gold, #F1A336, and the accent is DuckDuckGo Green, #51A351. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies DuckDuckGo's colors consistently when it generates UI.
Make something in the spirit of DuckDuckGo
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.