The Atlantic color palette
MediaThe Atlantic's color identity is defined by a bold, authoritative black, complemented by clean white and subtle gray tones for clarity and sophistication. The palette reflects the publication's legacy and editorial seriousness.
theatlantic.comThe Atlantic colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Atlantic BlackPrimary0, 0, 0
- Atlantic WhiteSecondary255, 255, 255
- Atlantic RedAccent200, 16, 46
Surfaces
Page, cards and dividers.- Atlantic Off-WhiteBackground247, 247, 245
- Atlantic Light GraySurface229, 229, 227
- Atlantic Border GrayBorder209, 209, 207
Text
Three tiers of copy.- Atlantic Black TextText0, 0, 0
- Atlantic Dark Gray TextSecondary text68, 68, 68
- Atlantic Muted GrayMuted text110, 110, 110
Semantic
Feedback and state colors.- Atlantic Success GreenSuccess0, 122, 51
- Atlantic Warning YellowWarning255, 180, 0
- Atlantic Error RedError200, 16, 46
- Atlantic Info BlueInfo0, 87, 184
Use The Atlantic's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
the-atlantic-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0057B8;
--error: #C8102E;
--accent: #C8102E;
--border: #D1D1CF;
--primary: #000000;
--success: #007A33;
--surface: #E5E5E3;
--warning: #FFB400;
--secondary: #FFFFFF;
--text-muted: #6E6E6E;
--background: #F7F7F5;
--text-primary: #000000;
--text-secondary: #444444;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.6:1
Pass
Text on surface
Needs 4.5:1 for body text
16.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.7:1
Pass
Muted text on background
Needs 3:1 for large text
4.8:1
Pass
Muted text on surface
Needs 3:1 for large text
4.0:1
Pass
The Atlantic gray and neutral colors
The quiet part of the The Atlantic palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Atlantic Off-WhiteBackground
- HEX
- RGB
- HSL
- Atlantic Light GraySurface
- HEX
- RGB
- HSL
- Atlantic Border GrayBorder
- HEX
- RGB
- HSL
- Atlantic Black TextText
- HEX
- RGB
- HSL
- Atlantic Dark Gray TextSecondary text
- HEX
- RGB
- HSL
- Atlantic Muted GrayMuted text
- HEX
- RGB
- HSL
About The Atlantic's colors
The Atlantic uses a classic, high-contrast palette centered on black, white, and red, reflecting its journalistic gravitas. The restrained use of color emphasizes content and readability.
Primary black contrasts with white for maximum legibility.
Red accent highlights calls to action and links.
Grays provide subtle structure and hierarchy.
Psychology
Black conveys authority, seriousness, and tradition, while red draws attention to important elements. The neutral grays and off-white backgrounds create a calm, readable environment.
Evolution
The Atlantic's palette has remained largely stable, with black, white, and red as core colors since its redesigns in the 2010s. Minor adjustments to gray tones and accent usage have modernized the interface without altering its identity.
Where The Atlantic uses each color
- Primary
Atlantic Black is used for the logo, headlines, and primary navigation elements.
- Secondary
Atlantic White serves as the main background for articles and content areas.
- Accent
Atlantic Red is used for links, buttons, and subscription prompts.
- Backgrounds
Atlantic Off-White and Light Gray are used for page backgrounds and section dividers.
- Text
Atlantic Black Text and Dark Gray Text are used for body copy and secondary information.
- Semantic
Success Green, Warning Yellow, and Error Red are used for alerts, notifications, and status indicators.
The Atlantic color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary brand color for The Atlantic is Atlantic Black, hex code #000000.
Atlantic Black is #000000, which is RGB(0,0,0) and CMYK(0,0,0,100).
The Atlantic uses Atlantic Light Gray (#E5E5E3), Border Gray (#D1D1CF), and Muted Gray (#6E6E6E) for UI backgrounds, borders, and muted text.
Use Atlantic Black (#000000) for primary elements, Atlantic White (#FFFFFF) for backgrounds, and Atlantic Red (#C8102E) for accents and calls to action, with grays supporting structure and hierarchy.
The secondary color is Atlantic White, #FFFFFF, and the accent is Atlantic Red, #C8102E. 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 The Atlantic's colors consistently when it generates UI.
Make something in the spirit of The Atlantic
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.