History color palette
MediaHistory uses a bold palette centered on its signature gold and deep black, reflecting its focus on impactful storytelling and historical gravitas. The color system is designed for clarity, contrast, and a sense of authority across digital and broadcast platforms.
history.comHistory colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- History GoldPrimary180, 151, 90
- History BlackSecondary34, 34, 34
- History RedAccent200, 16, 46
Surfaces
Page, cards and dividers.- History Light GrayBackground246, 246, 246
- History WhiteSurface255, 255, 255
- History Border GrayBorder216, 216, 216
Text
Three tiers of copy.- History BlackText34, 34, 34
- History Medium GraySecondary text102, 102, 102
- History Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- History Success GreenSuccess75, 175, 80
- History Warning OrangeWarning245, 166, 35
- History RedError200, 16, 46
- History Info BlueInfo39, 116, 174
Use History's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
history-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2774AE;
--error: #C8102E;
--accent: #C8102E;
--border: #D8D8D8;
--primary: #B4975A;
--success: #4BAF50;
--surface: #FFFFFF;
--warning: #F5A623;
--secondary: #222222;
--text-muted: #999999;
--background: #F6F6F6;
--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
14.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
History gray and neutral colors
The quiet part of the History palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- History Light GrayBackground
- HEX
- RGB
- HSL
- History WhiteSurface
- HEX
- RGB
- HSL
- History Border GrayBorder
- HEX
- RGB
- HSL
- History BlackText
- HEX
- RGB
- HSL
- History Medium GraySecondary text
- HEX
- RGB
- HSL
- History Muted GrayMuted text
- HEX
- RGB
- HSL
About History's colors
History’s palette is anchored by gold and black, evoking prestige and seriousness. The supporting colors provide clarity and accessibility for digital and broadcast environments.
Gold and black create strong contrast for brand recognition.
Red is used sparingly for emphasis and alerts.
Neutral grays support readability and hierarchy.
Psychology
Gold conveys value, tradition, and authority, aligning with History’s subject matter. Black and gray tones reinforce seriousness and credibility.
Evolution
The core gold and black palette has remained consistent, with accent colors and neutrals refined for modern digital use. The system has adapted to improve accessibility and screen legibility.
Where History uses each color
- Primary
History Gold is featured in the logo and key navigation elements.
- Secondary
History Black is used for headers, footers, and backgrounds.
- Accent
History Red highlights calls to action and urgent notifications.
- Backgrounds
History Light Gray and White are used for page backgrounds and content surfaces.
- Text
History Black and Medium Gray are used for primary and secondary text throughout the website.
- Semantic
Success Green, Warning Orange, and Info Blue are used for system messages and status indicators.
History color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official History brand primary color is History Gold, hex code #B4975A.
History Gold (#B4975A) is RGB(180, 151, 90) and CMYK(0, 16, 50, 29).
History uses several grays: History Light Gray (#F6F6F6), Medium Gray (#666666), Muted Gray (#999999), and Border Gray (#D8D8D8) for backgrounds, text, and UI elements.
History Gold should be reserved for branding and key highlights, while black and gray tones structure layouts and text. Accent and semantic colors are used sparingly for emphasis and alerts.
The secondary color is History Black, #222222, and the accent is History Red, #C8102E. 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 History's colors consistently when it generates UI.
Make something in the spirit of History
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.