League of Legends color palette
GamingLeague of Legends uses a rich, fantasy-inspired color palette centered around gold, deep blue, and dark neutrals, reflecting its epic and competitive gaming environment. The colors are used consistently across its website, in-game UI, and promotional materials.
leagueoflegends.comLeague of Legends colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- League GoldPrimary194, 143, 44
- Summoner BlueSecondary26, 38, 54
- Champion BlueAccent83, 131, 232
Surfaces
Page, cards and dividers.- Runeterra NightBackground10, 20, 40
- Nexus SlateSurface17, 28, 46
- Baron BorderBorder44, 53, 72
Text
Three tiers of copy.- Minion CreamText240, 230, 210
- Rune GoldSecondary text200, 170, 110
- Muted BronzeMuted text126, 99, 57
Semantic
Feedback and state colors.- Victory GreenSuccess0, 168, 120
- Warning OrangeWarning255, 179, 102
- Defeat RedError208, 2, 27
- Info CyanInfo63, 184, 255
Use League of Legends's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
league-of-legends-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3FB8FF;
--error: #D0021B;
--accent: #5383E8;
--border: #2C3548;
--primary: #C28F2C;
--success: #00A878;
--surface: #111C2E;
--warning: #FFB366;
--secondary: #1A2636;
--text-muted: #7E6339;
--background: #0A1428;
--text-primary: #F0E6D2;
--text-secondary: #C8AA6E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.8:1
Pass
Text on surface
Needs 4.5:1 for body text
13.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.7:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Pass
League of Legends background, border and text colors
League of Legends 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.
- Runeterra NightBackground
- HEX
- RGB
- HSL
- Nexus SlateSurface
- HEX
- RGB
- HSL
- Baron BorderBorder
- HEX
- RGB
- HSL
- Minion CreamText
- HEX
- RGB
- HSL
- Rune GoldSecondary text
- HEX
- RGB
- HSL
- Muted BronzeMuted text
- HEX
- RGB
- HSL
About League of Legends's colors
League of Legends' palette is built around a regal gold and deep blue, evoking fantasy and competition. Dark backgrounds and muted neutrals create contrast and focus attention on gameplay elements.
Gold and blue form a complementary, high-contrast pairing.
Dark neutrals ground the interface and reduce eye strain.
Accent colors highlight key actions and statuses.
Psychology
Gold conveys prestige, reward, and achievement, while blue suggests trust and depth. The dark tones immerse players in a focused, atmospheric experience.
Evolution
The palette has remained largely stable since launch, with minor adjustments to gold and blue hues for clarity and accessibility. Recent updates have refined neutral backgrounds for better readability.
Where League of Legends uses each color
- Primary
League Gold is used for logos, highlights, and reward indicators.
- Secondary
Summoner Blue appears in navigation bars, headers, and key backgrounds.
- Accent
Champion Blue is used for buttons, links, and interactive elements.
- Backgrounds
Runeterra Night serves as the main background for the website and in-game menus.
- Text
Minion Cream is the primary text color, with Rune Gold for headings and Muted Bronze for secondary text.
- Semantic
Victory Green, Warning Orange, Defeat Red, and Info Cyan are used for status messages and notifications.
League of Legends color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official primary color hex code for League of Legends is #C28F2C, known as League Gold.
League Gold (#C28F2C) is RGB(194, 143, 44) and CMYK(0, 26, 77, 24).
The brand uses Runeterra Night (#0A1428) and Nexus Slate (#111C2E) as its primary dark and neutral tones for backgrounds and surfaces.
Use League Gold (#C28F2C) for highlights and branding, Summoner Blue (#1A2636) for navigation, and Champion Blue (#5383E8) for interactive elements, always maintaining high contrast with dark backgrounds.
The secondary color is Summoner Blue, #1A2636, and the accent is Champion Blue, #5383E8. 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 League of Legends's colors consistently when it generates UI.
Make something in the spirit of League of Legends
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.