Vox color palette
MediaVox uses a bold, modern color palette centered around its signature magenta, complemented by dark neutrals and bright accents for clarity and emphasis. The palette is designed for high contrast and readability across digital platforms.
vox.comVox colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Vox MagentaPrimary218, 7, 74
- Vox CharcoalSecondary34, 35, 38
- Vox YellowAccent255, 220, 0
Surfaces
Page, cards and dividers.- Vox WhiteBackground255, 255, 255
- Vox Light GraySurface245, 246, 247
- Vox Border GrayBorder229, 231, 234
Text
Three tiers of copy.- Vox CharcoalText34, 35, 38
- Vox Medium GraySecondary text107, 111, 115
- Vox Muted GrayMuted text161, 164, 168
Semantic
Feedback and state colors.- Vox GreenSuccess27, 196, 125
- Vox Warning YellowWarning255, 199, 0
- Vox Error RedError228, 87, 53
- Vox BlueInfo26, 144, 255
Use Vox's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
vox-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1A90FF;
--error: #E45735;
--accent: #FFDC00;
--border: #E5E7EA;
--primary: #DA074A;
--success: #1BC47D;
--surface: #F5F6F7;
--warning: #FFC700;
--secondary: #222326;
--text-muted: #A1A4A8;
--background: #FFFFFF;
--text-primary: #222326;
--text-secondary: #6B6F73;
}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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
14.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Vox gray and neutral colors
The quiet part of the Vox palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Vox WhiteBackground
- HEX
- RGB
- HSL
- Vox Light GraySurface
- HEX
- RGB
- HSL
- Vox Border GrayBorder
- HEX
- RGB
- HSL
- Vox CharcoalText
- HEX
- RGB
- HSL
- Vox Medium GraySecondary text
- HEX
- RGB
- HSL
- Vox Muted GrayMuted text
- HEX
- RGB
- HSL
About Vox's colors
Vox's color system is built around a vivid magenta for brand recognition, with high-contrast neutrals and bright accents for clarity. The palette supports accessibility and editorial hierarchy.
Primary magenta contrasts with dark charcoal for emphasis.
Yellow accent highlights key actions and navigation.
Grays provide structure and readability for text and surfaces.
Psychology
The magenta conveys energy and modernity, while the charcoal and grays create a trustworthy, editorial feel. Yellow accents draw attention to important elements without overwhelming the design.
Evolution
Vox's palette has remained consistent since its launch, with minor adjustments to gray tones for improved accessibility. The core magenta and yellow have been stable brand identifiers.
Where Vox uses each color
- Primary
Used for logo, primary buttons, and key highlights in navigation.
- Secondary
Applied to headers, footers, and background elements for contrast.
- Accent
Highlights links, calls to action, and important notifications.
- Backgrounds
White and light gray backgrounds are used for article pages and content surfaces.
- Text
Charcoal is used for main body text, with medium and muted grays for secondary and tertiary information.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and informational messages in UI components.
Vox color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Vox primary color is #DA074A, known as Vox Magenta.
Vox Magenta (#DA074A) is RGB(218, 7, 74) and approximately CMYK(0, 97, 66, 15).
Vox uses #222326 (Vox Charcoal), #6B6F73 (Vox Medium Gray), #A1A4A8 (Vox Muted Gray), #F5F6F7 (Vox Light Gray), and #E5E7EA (Vox Border Gray) for its neutral palette.
Use Vox Magenta (#DA074A) for primary actions and branding, with neutrals for backgrounds and text. Accents like Vox Yellow (#FFDC00) should highlight calls to action or key navigation elements.
The secondary color is Vox Charcoal, #222326, and the accent is Vox Yellow, #FFDC00. 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 Vox's colors consistently when it generates UI.
Make something in the spirit of Vox
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.