Peacock color palette
EntertainmentPeacock's brand color system is inspired by the vibrant spectrum of its iconic logo, featuring a bold black primary and six accent colors representing the peacock feathers. The palette is modern, digital-first, and designed for high contrast and accessibility across streaming and digital platforms.
peacocktv.comPeacock colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Peacock BlackPrimary0, 0, 0
- Peacock WhiteSecondary255, 255, 255
- Peacock YellowAccent255, 199, 44
Surfaces
Page, cards and dividers.- Peacock CharcoalBackground24, 24, 24
- Peacock Surface GraySurface35, 35, 35
- Peacock Border GrayBorder61, 61, 61
Text
Three tiers of copy.- Peacock Text WhiteText255, 255, 255
- Peacock Text GraySecondary text179, 179, 179
- Peacock Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- Peacock TealSuccess0, 193, 172
- Peacock OrangeWarning255, 110, 0
- Peacock RedError233, 32, 59
- Peacock BlueInfo0, 153, 255
Use Peacock's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
peacock-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099FF;
--error: #E9203B;
--accent: #FFC72C;
--border: #3D3D3D;
--primary: #000000;
--success: #00C1AC;
--surface: #232323;
--warning: #FF6E00;
--secondary: #FFFFFF;
--text-muted: #757575;
--background: #181818;
--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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
15.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.9:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Peacock gray, dark and neutral colors
Peacock 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.
- Peacock CharcoalBackground
- HEX
- RGB
- HSL
- Peacock Surface GraySurface
- HEX
- RGB
- HSL
- Peacock Border GrayBorder
- HEX
- RGB
- HSL
- Peacock Text WhiteText
- HEX
- RGB
- HSL
- Peacock Text GraySecondary text
- HEX
- RGB
- HSL
- Peacock Muted GrayMuted text
- HEX
- RGB
- HSL
About Peacock's colors
Peacock's palette is built around a neutral black foundation with vibrant accent colors inspired by the peacock logo. The use of high-contrast colors ensures accessibility and visual impact across digital interfaces.
Primary black contrasts with bright accent hues.
Accent colors are derived from the six feathers of the logo.
Grays provide depth and separation for UI elements.
Psychology
The black and gray tones convey sophistication and cinematic quality, while the accent colors evoke energy, diversity, and playfulness. The palette is designed to be inviting and memorable for a broad streaming audience.
Evolution
Since its 2020 launch, Peacock's palette has remained consistent, anchored by the black primary and the six signature accent colors. Minor adjustments have been made to gray tones for improved accessibility and digital clarity.
Where Peacock uses each color
- Primary
Peacock Black is used for the main navigation bar, backgrounds, and app chrome.
- Secondary
Peacock White is used for text, icons, and call-to-action buttons on dark backgrounds.
- Accent
Peacock Yellow highlights key UI elements such as the logo, buttons, and badges.
- Backgrounds
Peacock Charcoal and Surface Gray are used for app screens, cards, and overlays.
- Text
Text White and Text Gray are used for primary and secondary copy throughout the interface.
- Semantic
Teal, Orange, Red, and Blue are used for status indicators, notifications, and system messages.
Peacock color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Peacock brand color is black, with the hex code #000000.
Peacock Black is #000000, which is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
Peacock uses Charcoal (#181818), Surface Gray (#232323), Border Gray (#3D3D3D), and Text Gray (#B3B3B3) for backgrounds, surfaces, and text.
Use Peacock Black for primary backgrounds, white for text and icons, and the six accent colors for highlights and status indicators. Maintain high contrast for accessibility and follow brand guidelines for logo and UI applications.
The secondary color is Peacock White, #FFFFFF, and the accent is Peacock Yellow, #FFC72C. 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 Peacock's colors consistently when it generates UI.
Make something in the spirit of Peacock
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.