Der Spiegel color palette
MediaDer Spiegel's color identity is defined by its bold, recognizable red, complemented by a restrained palette of dark grays and white for clarity and authority. The palette is consistent across print, web, and digital products.
spiegel.deDer Spiegel colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- SPIEGEL RedPrimary230, 68, 21
- SPIEGEL BlackSecondary34, 34, 34
- SPIEGEL YellowAccent247, 181, 0
Surfaces
Page, cards and dividers.- SPIEGEL WhiteBackground255, 255, 255
- SPIEGEL Light GraySurface245, 245, 245
- SPIEGEL Border GrayBorder224, 224, 224
Text
Three tiers of copy.- SPIEGEL BlackText34, 34, 34
- SPIEGEL Medium GraySecondary text102, 102, 102
- SPIEGEL Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- SPIEGEL GreenSuccess76, 175, 80
- SPIEGEL YellowWarning247, 181, 0
- SPIEGEL Error RedError211, 47, 47
- SPIEGEL BlueInfo25, 118, 210
Use Der Spiegel's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
der-spiegel-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #F7B500;
--border: #E0E0E0;
--primary: #E64415;
--success: #4CAF50;
--surface: #F5F5F5;
--warning: #F7B500;
--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
Der Spiegel gray and neutral colors
The quiet part of the Der Spiegel palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- SPIEGEL WhiteBackground
- HEX
- RGB
- HSL
- SPIEGEL Light GraySurface
- HEX
- RGB
- HSL
- SPIEGEL Border GrayBorder
- HEX
- RGB
- HSL
- SPIEGEL BlackText
- HEX
- RGB
- HSL
- SPIEGEL Medium GraySecondary text
- HEX
- RGB
- HSL
- SPIEGEL Muted GrayMuted text
- HEX
- RGB
- HSL
About Der Spiegel's colors
Der Spiegel's palette is anchored by a vivid red, symbolizing urgency and journalistic authority, balanced with neutral grays and white for readability. The accent yellow is used sparingly for highlights and alerts.
Primary red dominates headers and key brand elements.
Neutral grays and white provide a clean, readable backdrop.
Accent yellow and blue are reserved for notifications and highlights.
Psychology
Red conveys energy, seriousness, and immediacy, aligning with Der Spiegel's investigative journalism. The restrained neutrals reinforce trust and clarity.
Evolution
The core red has remained unchanged for decades, maintaining strong brand recognition. Minor adjustments to gray tones and accent colors have modernized the digital experience.
Where Der Spiegel uses each color
- Primary
Used in the logo, navigation bar, and primary call-to-action buttons.
- Secondary
Applied to headlines, footer backgrounds, and UI elements requiring strong contrast.
- Accent
Used for highlights, warnings, and notification badges.
- Backgrounds
White and light gray backgrounds dominate article pages and app screens.
- Text
Black and gray tones are used for primary, secondary, and muted text throughout the site.
- Semantic
Green, yellow, red, and blue are used for status messages, alerts, and informational banners.
Der Spiegel color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Der Spiegel primary color is #E64415, known as SPIEGEL Red. This color is used in the logo and key brand elements.
SPIEGEL Red (#E64415) is RGB(230, 68, 21) and CMYK(0, 70, 91, 10). These values ensure accurate reproduction in digital and print formats.
Der Spiegel uses #222222 (SPIEGEL Black), #666666 (SPIEGEL Medium Gray), #999999 (SPIEGEL Muted Gray), and #F5F5F5 (SPIEGEL Light Gray) for backgrounds and text. These provide a clear, readable interface and support the primary red.
SPIEGEL Red (#E64415) should be reserved for branding, navigation, and primary actions, while neutrals and accents are used for backgrounds, text, and highlights. Consistent application ensures brand recognition and clarity.
The secondary color is SPIEGEL Black, #222222, and the accent is SPIEGEL Yellow, #F7B500. 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 Der Spiegel's colors consistently when it generates UI.
Make something in the spirit of Der Spiegel
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.