YouTube color palette
EntertainmentYouTube's color system is defined by its iconic red, paired with a neutral palette of dark and light grays for UI clarity. The brand maintains a minimal, high-contrast look focused on video content.
youtube.comYouTube colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- YouTube RedPrimary255, 0, 0
- YouTube CharcoalSecondary40, 40, 40
- YouTube WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- YouTube BlackBackground15, 15, 15
- YouTube Surface GraySurface24, 24, 24
- YouTube Border GrayBorder48, 48, 48
Text
Three tiers of copy.- YouTube Text WhiteText255, 255, 255
- YouTube Text GraySecondary text170, 170, 170
- YouTube Muted GrayMuted text96, 96, 96
Semantic
Feedback and state colors.- YouTube Success GreenSuccess76, 175, 80
- YouTube Warning YellowWarning255, 235, 59
- YouTube Error RedError255, 0, 0
- YouTube Info BlueInfo33, 150, 243
Use YouTube's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
youtube-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #FF0000;
--accent: #FFFFFF;
--border: #303030;
--primary: #FF0000;
--success: #4CAF50;
--surface: #181818;
--warning: #FFEB3B;
--secondary: #282828;
--text-muted: #606060;
--background: #0F0F0F;
--text-primary: #FFFFFF;
--text-secondary: #AAAAAA;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.2:1
Pass
Text on surface
Needs 4.5:1 for body text
17.8: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
3.0:1
Pass
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
YouTube gray, dark and neutral colors
YouTube 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.
- YouTube BlackBackground
- HEX
- RGB
- HSL
- YouTube Surface GraySurface
- HEX
- RGB
- HSL
- YouTube Border GrayBorder
- HEX
- RGB
- HSL
- YouTube Text WhiteText
- HEX
- RGB
- HSL
- YouTube Text GraySecondary text
- HEX
- RGB
- HSL
- YouTube Muted GrayMuted text
- HEX
- RGB
- HSL
About YouTube's colors
YouTube's palette centers on a vivid red, contrasted with deep neutrals and white for clarity and focus. The use of minimal color supports a clean, content-first interface.
Red is used for branding and key actions.
Neutrals dominate backgrounds and surfaces.
Accent white provides contrast and readability.
Psychology
Red conveys energy, urgency, and draws immediate attention, fitting for a video platform. The dark neutrals reduce eye strain and keep the focus on video content.
Evolution
YouTube's palette has remained stable since its 2017 rebrand, with the red and dark UI as core elements. Minor adjustments have been made to gray tones for accessibility and modernity.
Where YouTube uses each color
- Primary
YouTube Red is used for the logo, subscribe buttons, and key highlights.
- Secondary
YouTube Charcoal appears in the navigation bar and side menus.
- Accent
YouTube White is used for icons, text, and backgrounds in light mode.
- Backgrounds
YouTube Black is the default background in dark mode and video player screens.
- Text
YouTube Text White and Text Gray are used for primary and secondary text across the UI.
- Semantic
Success Green, Warning Yellow, and Error Red are used for status indicators and notifications.
YouTube color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official YouTube primary color hex code is #FF0000. This red is used for the logo and key action buttons.
YouTube Red (#FF0000) is RGB(255, 0, 0) and CMYK(0, 100, 100, 0). These values are specified in the brand guidelines.
YouTube uses #282828 (YouTube Charcoal), #181818 (YouTube Surface Gray), and #0F0F0F (YouTube Black) for its dark and neutral UI backgrounds. These provide contrast and accessibility in the interface.
The palette should prioritize YouTube Red for branding and actions, with neutrals for backgrounds and surfaces. Accent colors like white and semantic colors are reserved for text, icons, and notifications.
The secondary color is YouTube Charcoal, #282828, and the accent is YouTube White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
5 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 YouTube's colors consistently when it generates UI.
Make something in the spirit of YouTube
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.