The Verge color palette
MediaThe Verge uses a bold, high-contrast palette anchored by its signature magenta, paired with deep blacks and sharp whites for a modern, tech-forward look. The color system emphasizes clarity, energy, and editorial authority.
theverge.comThe Verge colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Verge MagentaPrimary255, 1, 78
- Verge BlackSecondary17, 17, 19
- Verge CyanAccent0, 240, 255
Surfaces
Page, cards and dividers.- Verge WhiteBackground255, 255, 255
- Verge Light GraySurface247, 247, 248
- Verge Border GrayBorder225, 225, 227
Text
Three tiers of copy.- Verge BlackText17, 17, 19
- Verge Medium GraySecondary text110, 110, 115
- Verge Muted GrayMuted text161, 161, 170
Semantic
Feedback and state colors.- Verge GreenSuccess0, 196, 140
- Verge YellowWarning255, 199, 0
- Verge MagentaError255, 1, 78
- Verge CyanInfo0, 240, 255
Use The Verge's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
the-verge-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00F0FF;
--error: #FF014E;
--accent: #00F0FF;
--border: #E1E1E3;
--primary: #FF014E;
--success: #00C48C;
--surface: #F7F7F8;
--warning: #FFC700;
--secondary: #111113;
--text-muted: #A1A1AA;
--background: #FFFFFF;
--text-primary: #111113;
--text-secondary: #6E6E73;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.9:1
Pass
Text on surface
Needs 4.5:1 for body text
17.6: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.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
The Verge gray and neutral colors
The quiet part of the The Verge palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Verge WhiteBackground
- HEX
- RGB
- HSL
- Verge Light GraySurface
- HEX
- RGB
- HSL
- Verge Border GrayBorder
- HEX
- RGB
- HSL
- Verge BlackText
- HEX
- RGB
- HSL
- Verge Medium GraySecondary text
- HEX
- RGB
- HSL
- Verge Muted GrayMuted text
- HEX
- RGB
- HSL
About The Verge's colors
The Verge's palette is built on high contrast and vibrant accent colors, reflecting its focus on technology and culture. The magenta primary is energetic, while deep blacks and bright whites create visual clarity.
Primary magenta contrasts with black and white for maximum impact.
Accent cyan is used sparingly for highlights and links.
Grays provide hierarchy and readability in UI elements.
Psychology
Magenta signals creativity, innovation, and boldness, aligning with The Verge's editorial voice. The black and white foundation conveys authority and modernity.
Evolution
The core palette has remained stable since The Verge's launch, with magenta as the defining brand color. Over time, accent colors and grays have been refined for digital clarity and accessibility.
Where The Verge uses each color
- Primary
Verge Magenta is used for the logo, headlines, and key calls to action.
- Secondary
Verge Black forms the background for navigation bars and footers.
- Accent
Verge Cyan highlights links, buttons, and interactive elements.
- Backgrounds
Verge White and Light Gray are used for page backgrounds and content surfaces.
- Text
Verge Black and Medium Gray are used for primary and secondary text, with Muted Gray for metadata.
- Semantic
Green, Yellow, and Magenta are used for success, warning, and error states in notifications and badges.
The Verge color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Verge's official brand color is Verge Magenta, with the hex code #FF014E.
Verge Magenta (#FF014E) is RGB(255, 1, 78) and CMYK(0, 100, 69, 0).
The Verge uses Verge Black (#111113), Verge Light Gray (#F7F7F8), Verge Border Gray (#E1E1E3), Verge Medium Gray (#6E6E73), and Verge Muted Gray (#A1A1AA) throughout its UI.
Use Verge Magenta (#FF014E) for primary branding and actions, with black and white for structure and legibility. Accent and semantic colors should be used sparingly for highlights and status indicators.
The secondary color is Verge Black, #111113, and the accent is Verge Cyan, #00F0FF. 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 The Verge's colors consistently when it generates UI.
Make something in the spirit of The Verge
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.