Discover color palette
FinanceDiscover's color identity centers on a vibrant orange paired with clean neutrals and dark tones, reflecting clarity and energy in financial services. The palette is consistent across digital and print applications, supporting a recognizable and accessible brand presence.
discover.comDiscover colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Discover OrangePrimary255, 96, 0
- Discover CharcoalSecondary34, 34, 34
- Discover GoldAccent255, 181, 0
Surfaces
Page, cards and dividers.- Discover WhiteBackground255, 255, 255
- Discover Light GraySurface245, 245, 245
- Discover Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Discover CharcoalText34, 34, 34
- Discover Medium GraySecondary text102, 102, 102
- Discover Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Discover Success GreenSuccess75, 181, 67
- Discover GoldWarning255, 181, 0
- Discover Error RedError208, 2, 27
- Discover Info BlueInfo0, 114, 206
Use Discover's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
discover-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D0021B;
--accent: #FFB500;
--border: #E0E0E0;
--primary: #FF6000;
--success: #4BB543;
--surface: #F5F5F5;
--warning: #FFB500;
--secondary: #222222;
--text-muted: #999999;
--background: #FFFFFF;
--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
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Discover gray and neutral colors
The quiet part of the Discover palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Discover WhiteBackground
- HEX
- RGB
- HSL
- Discover Light GraySurface
- HEX
- RGB
- HSL
- Discover Border GrayBorder
- HEX
- RGB
- HSL
- Discover CharcoalText
- HEX
- RGB
- HSL
- Discover Medium GraySecondary text
- HEX
- RGB
- HSL
- Discover Muted GrayMuted text
- HEX
- RGB
- HSL
About Discover's colors
Discover's palette is anchored by a bold orange, complemented by deep charcoal and neutral grays for clarity and accessibility. Accent gold and blue provide visual hierarchy and support semantic messaging.
Primary orange contrasts with dark charcoal for strong visual impact.
Neutral grays create balance and support readability.
Accent colors highlight key actions and information.
Psychology
The orange conveys energy, friendliness, and approachability, while the dark charcoal and grays provide professionalism and trust. Gold and blue accents add optimism and reliability.
Evolution
Discover's orange has remained consistent since its introduction, reinforcing brand recognition. The supporting neutrals and semantic colors have been refined for digital clarity and accessibility.
Where Discover uses each color
- Primary
Used for main action buttons, highlights, and the Discover logo.
- Secondary
Applied to navigation bars, headers, and key UI backgrounds.
- Accent
Used to draw attention to special offers, notifications, and highlights.
- Backgrounds
White and light gray backgrounds are standard for app screens and web pages.
- Text
Charcoal and medium gray are used for primary and secondary text for optimal readability.
- Semantic
Green, gold, red, and blue are used for success, warning, error, and informational messaging respectively.
Discover color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Discover primary color hex code is #FF6000. This vibrant orange is used for key brand elements and actions.
The RGB value for Discover Orange is (255, 96, 0). The CMYK equivalent is approximately (0, 62, 100, 0).
Discover uses several neutrals: Discover Charcoal (#222222), Medium Gray (#666666), Muted Gray (#999999), and Light Gray (#F5F5F5) for backgrounds and text. These ensure clarity and accessibility in digital interfaces.
Use Discover Orange (#FF6000) for primary actions and highlights, with dark and light neutrals for backgrounds and text. Accent and semantic colors should be reserved for notifications, status, and special emphasis.
The secondary color is Discover Charcoal, #222222, and the accent is Discover Gold, #FFB500. 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 Discover's colors consistently when it generates UI.
Make something in the spirit of Discover
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.