Twitch color palette
EntertainmentTwitch's distinctive purple brand identity sets it apart in the streaming space, creating a vibrant community-driven aesthetic that's become synonymous with live content creation.
twitch.tvTwitch colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Twitch PurplePrimary145, 70, 255
- Twitch DarkSecondary24, 24, 27
- Twitch Light PurpleAccent191, 148, 255
Surfaces
Page, cards and dividers.- Twitch BackgroundBackground14, 14, 16
- Twitch SurfaceSurface24, 24, 27
- Twitch BorderBorder47, 47, 53
Text
Three tiers of copy.- Twitch WhiteText239, 239, 241
- Twitch Light GraySecondary text173, 173, 184
- Twitch MutedMuted text83, 83, 95
Semantic
Feedback and state colors.- Twitch GreenSuccess0, 219, 127
- Twitch YellowWarning250, 184, 27
- Twitch RedError235, 4, 0
- Twitch InfoInfo145, 70, 255
Use Twitch's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
twitch-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #9146FF;
--error: #EB0400;
--accent: #BF94FF;
--border: #2F2F35;
--primary: #9146FF;
--success: #00DB7F;
--surface: #18181B;
--warning: #FAB81B;
--secondary: #18181B;
--text-muted: #53535F;
--background: #0E0E10;
--text-primary: #EFEFF1;
--text-secondary: #ADADB8;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.8:1
Pass
Text on surface
Needs 4.5:1 for body text
15.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.0: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
Twitch gray, dark and neutral colors
Twitch 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.
- Twitch BackgroundBackground
- HEX
- RGB
- HSL
- Twitch SurfaceSurface
- HEX
- RGB
- HSL
- Twitch BorderBorder
- HEX
- RGB
- HSL
- Twitch WhiteText
- HEX
- RGB
- HSL
- Twitch Light GraySecondary text
- HEX
- RGB
- HSL
- Twitch MutedMuted text
- HEX
- RGB
- HSL
About Twitch's colors
Twitch owns purple in the streaming space. The vivid violet against dark surfaces creates an energetic, gaming-culture-inspired environment. The monochromatic purple system (from brand violet to lighter tints) keeps the identity cohesive.
A single purple hue in multiple tints (#9146FF, #BF94FF) creates a monochromatic harmony
Dark backgrounds (#0E0E10) make the vivid purple pop with maximum contrast
Green live indicator (#00DB7F) provides the critical 'live now' signal against purple
Psychology
Purple communicates creativity, uniqueness, and entertainment — perfect for a creator platform. The vivid saturation signals energy and excitement, while the dark interface creates an immersive viewing experience akin to a nightclub or gaming setup.
Evolution
Twitch's purple has become more vivid over time, shifting from a darker shade to the current #9146FF. The 2019 brand refresh simplified the identity while making purple more prominent and ownable.
Where Twitch uses each color
- Primary
Twitch Purple (#9146FF) defines the brand logo, subscribe buttons, and premium features like Twitch Prime.
- Secondary
Dark surfaces (#18181B) create the streaming theater environment for live content.
- Accent
Light Purple (#BF94FF) provides hover states and secondary interactive elements.
- Backgrounds
The near-black background lets stream content and emotes provide visual variety.
- Text
Light text on dark backgrounds ensures chat readability during extended viewing sessions.
- Semantic
Green (#00DB7F) is critically important — it signals 'LIVE' status, the core value proposition of the platform.
Twitch color questions
Hex codes, RGB values, neutrals and how to use the palette.
Twitch Purple is #9146FF, a vivid violet that's become one of the most recognized colors in streaming and gaming culture. It's used for the Glitch logo, subscribe buttons, and brand identity across all platforms.
Purple was chosen to differentiate Twitch from the blue-dominated tech landscape and to evoke creativity, entertainment, and individuality — values central to the streaming creator community. No other major platform had claimed purple.
Twitch uses a dark-first interface (#0E0E10 background) with purple (#9146FF) accents. Green (#00DB7F) indicates live streams, and light purple tints provide interactive states. The dark canvas keeps focus on stream content.
The secondary color is Twitch Dark, #18181B, and the accent is Twitch Light Purple, #BF94FF. Together with the primary they make up the three brand colors at the top of this page.
Twitch uses #0E0E10 for backgrounds, #18181B for surfaces and #2F2F35 for borders. Text runs #EFEFF1, #ADADB8 and #53535F from strongest to most muted.
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 Twitch's colors consistently when it generates UI.
Make something in the spirit of Twitch
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.