Riot Games color palette
GamingRiot Games uses a bold, high-contrast color system centered on its signature red, complemented by deep blacks and neutral grays for a modern, gaming-focused identity. The palette is designed for clarity and impact across digital and physical touchpoints.
riotgames.comRiot Games colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Riot RedPrimary235, 0, 41
- Riot BlackSecondary17, 17, 17
- Summoner WhiteAccent245, 245, 245
Surfaces
Page, cards and dividers.- Client DarkBackground24, 24, 28
- Panel GraySurface35, 35, 42
- Outline GrayBorder40, 40, 40
Text
Three tiers of copy.- Riot WhiteText255, 255, 255
- Muted GraySecondary text179, 179, 179
- Subtle GrayMuted text109, 109, 109
Semantic
Feedback and state colors.- Victory GreenSuccess54, 196, 124
- Caution YellowWarning255, 184, 0
- Defeat RedError255, 78, 78
- Info BlueInfo59, 140, 255
Use Riot Games's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
riot-games-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B8CFF;
--error: #FF4E4E;
--accent: #F5F5F5;
--border: #282828;
--primary: #EB0029;
--success: #36C47C;
--surface: #23232A;
--warning: #FFB800;
--secondary: #111111;
--text-muted: #6D6D6D;
--background: #18181C;
--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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Pass
Riot Games gray, dark and neutral colors
Riot Games 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.
- Client DarkBackground
- HEX
- RGB
- HSL
- Panel GraySurface
- HEX
- RGB
- HSL
- Outline GrayBorder
- HEX
- RGB
- HSL
- Riot WhiteText
- HEX
- RGB
- HSL
- Muted GraySecondary text
- HEX
- RGB
- HSL
- Subtle GrayMuted text
- HEX
- RGB
- HSL
About Riot Games's colors
Riot Games' palette is built around a vibrant red for brand recognition, balanced by deep blacks and neutral grays for a modern, immersive feel. Accent and semantic colors provide clarity and accessibility in UI and communication.
Primary red contrasts with black for high-impact branding.
Neutral grays support legibility and hierarchy.
Semantic colors (green, yellow, blue) are reserved for feedback and alerts.
Psychology
The bold red conveys energy, passion, and excitement, aligning with Riot's competitive gaming ethos. Deep blacks and grays create a sense of focus and sophistication.
Evolution
Riot's core palette has remained stable since its early brand refresh, maintaining the iconic red and dark UI tones. Minor adjustments have been made for accessibility and digital clarity.
Where Riot Games uses each color
- Primary
Riot Red is used in the logo, key buttons, and promotional graphics.
- Secondary
Riot Black serves as the main navigation and header background.
- Accent
Summoner White is used for highlights, icons, and contrast elements.
- Backgrounds
Client Dark is the primary background for web and app interfaces.
- Text
Riot White and Muted Gray are used for primary and secondary text, respectively.
- Semantic
Victory Green, Caution Yellow, Defeat Red, and Info Blue are used for status messages and alerts.
Riot Games color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Riot Games primary color is Riot Red, hex code #EB0029. This color is used prominently in branding and UI highlights.
Riot Red (#EB0029) has an RGB value of (235, 0, 41) and a CMYK value of (0, 100, 83, 8). Use these for print and digital consistency.
Riot Games uses Client Dark (#18181C), Panel Gray (#23232A), and Outline Gray (#282828) as its core dark and neutral UI tones. These support accessibility and visual hierarchy across products.
Use Riot Red (#EB0029) for primary actions and branding, with dark backgrounds and neutral grays for structure. Semantic colors are reserved for feedback, and white is used for text and highlights.
The secondary color is Riot Black, #111111, and the accent is Summoner White, #F5F5F5. 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 Riot Games's colors consistently when it generates UI.
Make something in the spirit of Riot Games
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.