Twitch colors

The Twitch color palette has 4 colors: Twitch Purple #9146FF, Light purple #BF94FF, Dark background #16161D and Dark surface #2B2B38. Below are HEX, RGB, HSL and OKLCH codes, contrast checks, CSS and Tailwind variables, all from its live website code checked on 16 October 2026.

Twitch color codes

Twitch brand colors in HEX, RGB, HSL and OKLCH
Color	Role	HEX	RGB	HSL	OKLCH
Twitch Purple	Primary	#9146FF	rgb(145, 70, 255)	hsl(264, 100%, 64%)	oklch(59.1% 0.255 296.1)
Light purple	Accent	#BF94FF	rgb(191, 148, 255)	hsl(264, 100%, 79%)	oklch(74.9% 0.155 301.3)
Dark background	Background	#16161D	rgb(22, 22, 29)	hsl(240, 14%, 10%)	oklch(20.3% 0.014 285.1)
Dark surface	Neutral	#2B2B38	rgb(43, 43, 56)	hsl(240, 13%, 19%)	oklch(29.5% 0.023 284.9)

Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.

Where the Twitch colors come from

Twitch does not publish hex values in public brand guidelines, so these were read from the code of its live website (stylesheets and the SVG files it serves) on 16 October 2026. They are the colors www.twitch.tv actually renders, which can differ slightly from print or logo colors.

Source (live website CSS or SVG): https://brand.twitch.com/ checked 2026-10-16

Twitch color contrast

White text on Twitch Purple has a contrast ratio of 4.64:1 and passes WCAG AA for body text. Used as a text color, Twitch Purple reaches 4.64:1 on white and 4.52:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.

White and black text on Twitch colors
Pair	WCAG 2 ratio	WCAG 2 result	APCA	APCA guidance
White on Twitch Purple	4.64:1	AA	Lc -76.8	Fine for body text
Black on Twitch Purple	4.52:1	AA	Lc 32.8	Non-text elements, placeholder text
White on Light purple	2.36:1	Fails	Lc -51.3	Large or bold text, headings
Black on Light purple	8.89:1	AAA	Lc 57.6	Large or bold text, headings
White on Dark background	18.00:1	AAA	Lc -106.9	Preferred for body text
Black on Dark background	1.16:1	Fails	Lc 0.0	Not readable
White on Dark surface	13.95:1	AAA	Lc -103.6	Preferred for body text
Black on Dark surface	1.50:1	Fails	Lc 0.0	Not readable

Twitch colors on each other
Pair	WCAG 2 ratio	WCAG 2 result	APCA	APCA guidance
Dark background on Light purple	7.62:1	AAA	Lc 56.3	Large or bold text, headings
Dark surface on Light purple	5.90:1	AA	Lc 52.1	Large or bold text, headings
Dark background on Twitch Purple	3.87:1	AA large text	Lc 31.5	Non-text elements, placeholder text
Dark surface on Twitch Purple	3.00:1	AA large text	Lc 27.3	Dividers and decoration only

Twitch colors in CSS and Tailwind

Copy the Twitch palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Twitch Purple, for hover states, borders and tinted backgrounds.

CSS variables

:root {
  --twitch-purple: #9146FF;
  --twitch-light-purple: #BF94FF;
  --twitch-dark-background: #16161D;
  --twitch-dark-surface: #2B2B38;
}

Tailwind CSS v4 theme

@import "tailwindcss";

@theme {
  --color-twitch-purple: #9146FF;
  --color-twitch-light-purple: #BF94FF;
  --color-twitch-dark-background: #16161D;
  --color-twitch-dark-surface: #2B2B38;
}

Tailwind scale generated from Twitch Purple #9146FF

@theme {
  --color-twitch-50: #F6F4FF;
  --color-twitch-100: #EBE6FE;
  --color-twitch-200: #DCD1FF;
  --color-twitch-300: #C7B2FF;
  --color-twitch-400: #AC86FF;
  --color-twitch-500: #9A5FFF;
  --color-twitch-600: #9146FF;
  --color-twitch-700: #7327D3;
  --color-twitch-800: #5D24AB;
  --color-twitch-900: #4C2687;
  --color-twitch-950: #2C184F;
}

Named colors closest to the Twitch palette

The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.

Brand color	HEX	Nearest named color	Named HEX	ΔE OK
Twitch Purple	#9146FF	Purpley	#8756E4	0.051
Light purple	#BF94FF	Liliac	#C48EFD	0.015
Dark background	#16161D	Rich Black	#0D1B2A	0.029
Dark surface	#2B2B38	Space Cadet	#2B2D42	0.018

How to use a Twitch-style palette

Lead with Twitch Purple #9146FF for buttons, links and key highlights, with white text on it.
Give most of the layout to Dark background #16161D and Dark surface #2B2B38, about 60% of the screen, so Twitch Purple stands out.
Keep Light purple for small accents (around 10%): status colors, illustrations or charts.
As text on a white page, Twitch Purple reaches 4.64:1: it passes WCAG AA for body text.

To see how www.twitch.tv uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Twitch Purple into a full light and dark color system with accessible roles, open it in the Color System Studio.

More brand colors

Trademarks

Frequently asked questions

What is the Twitch hex color?

The main Twitch color is Twitch Purple #9146FF, which is rgb(145, 70, 255) in RGB. It comes from the CSS and SVG files of Twitch's live website (Twitch publishes no official hex values), checked on 16 October 2026.

What colors does Twitch use?

Twitch uses 4 core colors: Twitch Purple #9146FF, Light purple #BF94FF, Dark background #16161D and Dark surface #2B2B38.

What is Twitch Purple in RGB, HSL and OKLCH?

Twitch Purple #9146FF is rgb(145, 70, 255), hsl(264, 100%, 64%) and oklch(59.1% 0.255 296.1). The closest named color is Purpley #8756E4.

Should text on Twitch Purple be white or black?

White text reads better on Twitch Purple: it has a contrast ratio of 4.64:1, which passes WCAG AA for body text.

Where do these Twitch colors come from?

The hex values were read from Twitch's live website code at https://brand.twitch.com/ on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.

Can I use the Twitch colors in my own design?

Colors on their own are not owned, but Twitch's name, logo and the way it combines its colors are trademarks. Use these values to match Twitch when you refer to it, follow its official guidelines, and do not imply a link to Twitch in your own brand.

Use the Twitch colors

Check www.twitch.tv live, build a color system from Twitch Purple, or remix the palette.

Analyze Twitch's live site Build a color system from Twitch colors Open in the palette generator Preview on a design