VICE color palette
MediaVICE uses a stark, high-contrast color palette centered on black and white, reflecting its bold, edgy media identity. The brand's visual system relies on monochrome tones with minimal accent colors for clarity and impact.
vice.comVICE colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- VICE BlackPrimary0, 0, 0
- VICE WhiteSecondary255, 255, 255
- VICE YellowAccent245, 223, 77
Surfaces
Page, cards and dividers.- VICE CharcoalBackground26, 26, 26
- VICE Surface GraySurface34, 34, 34
- VICE Border GrayBorder51, 51, 51
Text
Three tiers of copy.- VICE Text WhiteText255, 255, 255
- VICE Text GraySecondary text179, 179, 179
- VICE Muted GrayMuted text128, 128, 128
Semantic
Feedback and state colors.- VICE Success GreenSuccess92, 184, 92
- VICE Warning OrangeWarning240, 173, 78
- VICE Error RedError217, 83, 79
- VICE Info BlueInfo91, 192, 222
Use VICE's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
vice-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #5BC0DE;
--error: #D9534F;
--accent: #F5DF4D;
--border: #333333;
--primary: #000000;
--success: #5CB85C;
--surface: #222222;
--warning: #F0AD4E;
--secondary: #FFFFFF;
--text-muted: #808080;
--background: #1A1A1A;
--text-primary: #FFFFFF;
--text-secondary: #B3B3B3;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4: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
8.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.6:1
Pass
Muted text on background
Needs 3:1 for large text
4.4:1
Pass
Muted text on surface
Needs 3:1 for large text
4.0:1
Pass
VICE gray, dark and neutral colors
VICE runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- VICE CharcoalBackground
- HEX
- RGB
- HSL
- VICE Surface GraySurface
- HEX
- RGB
- HSL
- VICE Border GrayBorder
- HEX
- RGB
- HSL
- VICE Text WhiteText
- HEX
- RGB
- HSL
- VICE Text GraySecondary text
- HEX
- RGB
- HSL
- VICE Muted GrayMuted text
- HEX
- RGB
- HSL
About VICE's colors
VICE's palette is rooted in a monochrome scheme, using black and white as dominant tones for maximum contrast and legibility. A single yellow accent is used sparingly for highlights and calls to action.
Primary black and white create a bold, high-contrast foundation.
Accent yellow is used for emphasis and interactive elements.
Grays provide depth and hierarchy in UI components.
Psychology
Black and white convey authority, clarity, and directness, aligning with VICE's journalistic tone. The yellow accent introduces energy and draws attention to key actions or highlights.
Evolution
VICE's color palette has remained consistent, with black and white as core elements since its inception. The use of yellow as an accent has become more prominent in digital interfaces over time.
Where VICE uses each color
- Primary
VICE Black is used for the logo, navigation bars, and primary backgrounds.
- Secondary
VICE White is applied to text, content backgrounds, and logo outlines.
- Accent
VICE Yellow highlights buttons, links, and important notifications.
- Backgrounds
VICE Charcoal and Surface Gray are used for app screens and content containers.
- Text
Text White and Text Gray are used for headlines and body copy, while Muted Gray appears in metadata and secondary information.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for alerts, status indicators, and system messages.
VICE color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary VICE brand color is black, with the official hex code #000000.
VICE Black is #000000 in hex, which is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
VICE uses several grays: Charcoal (#1A1A1A), Surface Gray (#222222), Border Gray (#333333), Text Gray (#B3B3B3), and Muted Gray (#808080) for backgrounds, borders, and text.
Use VICE Black (#000000) and White (#FFFFFF) for primary backgrounds and text, with VICE Yellow (#F5DF4D) as a highlight for buttons or links. Grays are for UI structure, and semantic colors are reserved for alerts and status.
The secondary color is VICE White, #FFFFFF, and the accent is VICE Yellow, #F5DF4D. 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 VICE's colors consistently when it generates UI.
Make something in the spirit of VICE
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.