USA Today color palette
MediaUSA Today uses a distinctive, vibrant blue as its primary brand color, complemented by a minimalist palette of grays, white, and black for clarity and neutrality. The color system emphasizes simplicity and modernity across digital and print platforms.
usatoday.comUSA Today colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- USA Today BluePrimary0, 155, 255
- USA Today CharcoalSecondary51, 51, 51
- USA Today YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- USA Today WhiteBackground255, 255, 255
- USA Today Light GraySurface245, 245, 245
- USA Today Border GrayBorder224, 224, 224
Text
Three tiers of copy.- USA Today Text BlackText34, 34, 34
- USA Today Text GraySecondary text102, 102, 102
- USA Today Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- USA Today GreenSuccess0, 178, 111
- USA Today OrangeWarning255, 180, 0
- USA Today RedError225, 6, 0
- USA Today BlueInfo0, 155, 255
Use USA Today's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
usa-today-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009BFF;
--error: #E10600;
--accent: #FFD100;
--border: #E0E0E0;
--primary: #009BFF;
--success: #00B26F;
--surface: #F5F5F5;
--warning: #FFB400;
--secondary: #333333;
--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
USA Today gray and neutral colors
The quiet part of the USA Today palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- USA Today WhiteBackground
- HEX
- RGB
- HSL
- USA Today Light GraySurface
- HEX
- RGB
- HSL
- USA Today Border GrayBorder
- HEX
- RGB
- HSL
- USA Today Text BlackText
- HEX
- RGB
- HSL
- USA Today Text GraySecondary text
- HEX
- RGB
- HSL
- USA Today Muted GrayMuted text
- HEX
- RGB
- HSL
About USA Today's colors
USA Today's color palette is built around a signature blue, conveying trust and clarity, with supporting neutrals for readability. Accent colors are used sparingly for highlights and alerts.
Primary blue contrasts with white backgrounds for maximum legibility.
Grays are used for structure and hierarchy in UI elements.
Accent yellow and orange provide visual cues for notifications and highlights.
Psychology
The blue circle evokes reliability, calm, and modernity, reinforcing USA Today's journalistic credibility. Neutral grays and white create a clean, accessible reading experience.
Evolution
The palette has remained stable since the 2012 rebrand, which introduced the iconic blue circle and simplified the color system. Minor adjustments have been made to gray tones for digital accessibility.
Where USA Today uses each color
- Primary
USA Today Blue is used for the logo, main navigation highlights, and key buttons.
- Secondary
Charcoal gray appears in navigation bars, footers, and UI backgrounds.
- Accent
Yellow and orange are used for notifications, highlights, and special feature tags.
- Backgrounds
White and light gray backgrounds are standard for article pages and app screens.
- Text
Text Black and Text Gray are used for headlines, body copy, and metadata.
- Semantic
Green, orange, and red are reserved for success, warning, and error states in digital products.
USA Today color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official USA Today brand blue is #009BFF. This color is used for the logo and primary highlights.
USA Today Blue (#009BFF) is RGB(0, 155, 255). For CMYK, it is approximately 100, 39, 0, 0.
USA Today uses #333333 (Charcoal), #F5F5F5 (Light Gray), and #E0E0E0 (Border Gray) for UI structure and backgrounds. These neutrals support readability and visual hierarchy.
Apply USA Today Blue (#009BFF) for primary actions and branding, with neutrals for backgrounds and text. Accent colors like #FFD100 (Yellow) are reserved for highlights and alerts.
The secondary color is USA Today Charcoal, #333333, and the accent is USA Today Yellow, #FFD100. 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 USA Today's colors consistently when it generates UI.
Make something in the spirit of USA Today
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.