Twitch Purple#9146FF
Twitch Interactive Purple#772CE8
Twitch Cyan#00F2EA
Twitch Ink#18181B
Twitch Orchid#A970FF
Palette direction

Twitch Inspired Streaming Color Palette

A Twitch-inspired system built around the brand’s signature purple and energetic accent pairing, with crisp neutrals for interface clarity. The palette keeps the streaming-platform feel recognizable while staying practical for buttons, links, and readable UI states.

AnalogousTechtwitch-inspiredstreamingcommunitygaming
palette-preview.example
Tech color direction

Twitch Inspired Streaming Color Palette

A Twitch-inspired system built around the brand’s signature purple and energetic accent pairing, with crisp neutrals for interface clarity. The palette keeps the streaming-platform feel recognizable while staying practical for buttons, links, and readable UI states.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Channel Black #0E0E10on Twitch Cyan #00F2EA13.7:1 Excellent
Logo Pure White #FFFFFFon Twitch Interactive Purple #772CE86.3:1 Strong
Logo Pure White #FFFFFFon Twitch Purple #9146FF4.6:1 Strong
Logo Channel Black #0E0E10on Pure White #FFFFFF19.3:1 Excellent
Icon color
BackgroundTwitch Purple#9146FFTextPure White#FFFFFF
Primary Button4.64:1
AA

Best for the main action users should notice first.

BackgroundTwitch Interactive Purple#772CE8TextPure White#FFFFFF
Secondary Button6.34:1
AA

Useful for softer choices and secondary paths.

BackgroundStream White#F7F7F8TextTwitch Cyan#00F2EA
Outlined Button1.32:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundStream White#F7F7F8TextTwitch Interactive Purple#772CE8
Text Button5.93:1
AA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsAnalogous color relationship
9:41Twitch Inspired Streaming Color Palette Color role balance
Analogous system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CTwitch Inspired Streaming Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors reproduce Twitch’s recognizable identity through the exact core purple and its dark counterpart, with a vivid interactive accent that keeps the system energetic and unmistakably platform-native.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Twitch Purple #9146FF
HeadlineUsed for main titles and key messages.Twitch Purple #9146FF
LinkUsed for links and interactive text.Twitch Interactive Purple #772CE8

Buttons

Primary Button
BackgroundTwitch Purple #9146FF
TextPure White #FFFFFF
Secondary Button
BackgroundTwitch Interactive Purple #772CE8
TextPure White #FFFFFF
Outlined Button
BackgroundTwitch Interactive Purple #772CE8
TextTwitch Cyan #00F2EA

Interface

TextDefault readable body text.Channel Black #0E0E10
Bg LightLight page or section background.Stream White #F7F7F8
Bg DarkDark page or section background.Twitch Ink #18181B
IconSmall interface icons and marks.Twitch Ink #18181B
BorderCards, inputs, and component borders.Twitch Orchid #A970FF
DividerSubtle separators between content.Twitch Orchid #A970FF
OutlineFocus rings and emphasis outlines.Twitch Orchid #A970FF

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors reproduce Twitch’s recognizable identity through the exact core purple and its dark counterpart, with a vivid interactive accent that keeps the system energetic and unmistakably platform-native.

PrimaryTwitch Purple

RolesLogo, Btn Primary Bg, Headline

The signature brand purple delivers immediate Twitch recognition and gives the palette its main identity anchor.

HEX#9146FF
RGB145, 70, 255
HSL264, 100, 64
CMYK43, 73, 0, 0
SecondaryTwitch Interactive Purple

RolesLink, Btn Secondary Bg, Btn Outlined Border

A deeper interactive purple adds hierarchy and makes links and secondary actions feel unmistakably on-brand.

HEX#772CE8
RGB119, 44, 232
HSL264, 80, 54
CMYK49, 81, 0, 9
TertiaryTwitch Cyan

RolesBtn Outlined Text

The bright cyan provides a high-energy contrast note for outlined text without overpowering the core purple system.

HEX#00F2EA
RGB0, 242, 234
HSL178, 100, 47
CMYK100, 0, 3, 5

Support Colors

The support accents extend the Twitch look with a deep anchor tone and a soft complementary violet-blue shadow, keeping the palette cohesive while improving balance and usability.

Twitch Ink

RolesIcon, Bg Dark

This near-black support tone grounds dark-mode surfaces and sharpens interface details without competing with the signature brand colors.

HEX#18181B
RGB24, 24, 27
HSL240, 6, 10
CMYK11, 11, 0, 89
Twitch Orchid

RolesBorder, Divider, Outline

A lighter orchid accent softens structural UI elements and bridges the vivid purple into calmer interface boundaries.

HEX#A970FF
RGB169, 112, 255
HSL264, 100, 72
CMYK34, 56, 0, 0

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Pure White

RolesBtn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Stream White

RolesBg Light

HEX#F7F7F8
RGB247, 247, 248
HSL240, 7, 97
CMYK0, 0, 0, 3
Channel Black

RolesText

HEX#0E0E10
RGB14, 14, 16
HSL240, 7, 6
CMYK13, 13, 0, 94

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-twitch-purple: #9146FF;
  --color-twitch-interactive-purple: #772CE8;
  --color-twitch-cyan: #00F2EA;
  --color-twitch-ink: #18181B;
  --color-twitch-orchid: #A970FF;
  --color-pure-white: #FFFFFF;
  --color-stream-white: #F7F7F8;
  --color-channel-black: #0E0E10;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #9146FF;
  --role-btn-primary-bg: #9146FF;
  --role-headline: #9146FF;
  --role-link: #772CE8;
  --role-btn-secondary-bg: #772CE8;
  --role-btn-outlined-border: #772CE8;
  --role-btn-outlined-text: #00F2EA;
  --role-icon: #18181B;
  --role-bg-dark: #18181B;
  --role-border: #A970FF;
  --role-divider: #A970FF;
  --role-outline: #A970FF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-light: #F7F7F8;
  --role-text: #0E0E10;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "twitch-purple": "#9146FF",
    "twitch-interactive-purple": "#772CE8",
    "twitch-cyan": "#00F2EA",
    "twitch-ink": "#18181B",
    "twitch-orchid": "#A970FF",
    "pure-white": "#FFFFFF",
    "stream-white": "#F7F7F8",
    "channel-black": "#0E0E10"
}
Press Space to load new palette