Fox News color palette
MediaFox News uses a bold, patriotic color palette centered on deep blue and vivid red, reflecting its American news identity. The color system is consistent across digital and broadcast platforms, emphasizing clarity and authority.
foxnews.comFox News colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Fox News BluePrimary0, 51, 102
- Fox News RedSecondary194, 0, 23
- Fox News WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Fox News Light GrayBackground245, 246, 250
- Fox News Surface GraySurface228, 231, 237
- Fox News Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Fox News BlackText34, 34, 34
- Fox News CharcoalSecondary text75, 85, 99
- Fox News Muted GrayMuted text107, 114, 128
Semantic
Feedback and state colors.- Fox News GreenSuccess46, 133, 64
- Fox News GoldWarning232, 163, 23
- Fox News RedError194, 0, 23
- Fox News Info BlueInfo29, 78, 137
Use Fox News's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
fox-news-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1D4E89;
--error: #C20017;
--accent: #FFFFFF;
--border: #D1D5DB;
--primary: #003366;
--success: #2E8540;
--surface: #E4E7ED;
--warning: #E8A317;
--secondary: #C20017;
--text-muted: #6B7280;
--background: #F5F6FA;
--text-primary: #222222;
--text-secondary: #4B5563;
}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
12.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.1:1
Pass
Muted text on background
Needs 3:1 for large text
4.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.9:1
Pass
Fox News background, border and text colors
The quiet part of the Fox News palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Fox News Light GrayBackground
- HEX
- RGB
- HSL
- Fox News Surface GraySurface
- HEX
- RGB
- HSL
- Fox News Border GrayBorder
- HEX
- RGB
- HSL
- Fox News BlackText
- HEX
- RGB
- HSL
- Fox News CharcoalSecondary text
- HEX
- RGB
- HSL
- Fox News Muted GrayMuted text
- HEX
- RGB
- HSL
About Fox News's colors
Fox News' palette is rooted in American patriotic colors, using deep blue and red for authority and urgency. Neutrals support readability and a clean broadcast look.
Primary blue and red are complementary and high-contrast.
White and grays balance bold colors for legibility.
Accent and semantic colors are reserved for alerts and highlights.
Psychology
The deep blue conveys trust, stability, and professionalism, while the red signals urgency and importance. The use of white and grays ensures clarity and neutrality for news presentation.
Evolution
Fox News' color palette has remained largely stable since its inception, maintaining the core blue and red. Minor adjustments to gray tones and background shades have been made for modern digital accessibility.
Where Fox News uses each color
- Primary
Used in the header, navigation bar, and key branding elements.
- Secondary
Appears in call-to-action buttons, highlights, and breaking news banners.
- Accent
Used for text on dark backgrounds, icons, and dividers.
- Backgrounds
Applied to main content backgrounds and page sections.
- Text
Primary and secondary text colors are used throughout articles, headlines, and navigation.
- Semantic
Green, gold, and red are used for success, warning, and error states in alerts and notifications.
Fox News color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Fox News brand color is Fox News Blue, with the hex code #003366.
Fox News Blue (#003366) in RGB is (0, 51, 102) and in CMYK is (100, 50, 0, 60).
Fox News uses Light Gray (#F5F6FA), Surface Gray (#E4E7ED), and Border Gray (#D1D5DB) for backgrounds and UI elements.
Primary blue and red should be reserved for branding and key actions, while grays and white provide structure and readability. Semantic colors like green, gold, and red are used for status indicators and alerts.
The secondary color is Fox News Red, #C20017, and the accent is Fox News White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
6 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 Fox News's colors consistently when it generates UI.
Make something in the spirit of Fox News
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.