Rocket League color palette
GamingRocket League's brand identity is defined by a vibrant blue and energetic orange, reflecting its fast-paced, competitive gameplay. The palette is accented by dark neutrals and clean whites for UI clarity.
rocketleague.comRocket League colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Rocket League BluePrimary27, 169, 245
- Rocket League OrangeSecondary242, 101, 34
- Goal Explosion GoldAccent255, 215, 0
Surfaces
Page, cards and dividers.- Stadium NightBackground24, 26, 27
- Arena SlateSurface35, 39, 42
- Goalpost GrayBorder58, 63, 68
Text
Three tiers of copy.- White PlayText255, 255, 255
- Scoreboard SilverSecondary text176, 184, 193
- Replay GrayMuted text122, 130, 136
Semantic
Feedback and state colors.- Victory GreenSuccess67, 176, 71
- Boost Warning YellowWarning247, 181, 0
- Demolition RedError215, 38, 61
- Info CyanInfo0, 181, 226
Use Rocket League's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
rocket-league-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B5E2;
--error: #D7263D;
--accent: #FFD700;
--border: #3A3F44;
--primary: #1BA9F5;
--success: #43B047;
--surface: #23272A;
--warning: #F7B500;
--secondary: #F26522;
--text-muted: #7A8288;
--background: #181A1B;
--text-primary: #FFFFFF;
--text-secondary: #B0B8C1;
}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.5:1
Pass
Text on surface
Needs 4.5:1 for body text
15.1: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
7.5:1
Pass
Muted text on background
Needs 3:1 for large text
4.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.9:1
Pass
Rocket League gray, dark and neutral colors
Rocket League 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.
- Stadium NightBackground
- HEX
- RGB
- HSL
- Arena SlateSurface
- HEX
- RGB
- HSL
- Goalpost GrayBorder
- HEX
- RGB
- HSL
- White PlayText
- HEX
- RGB
- HSL
- Scoreboard SilverSecondary text
- HEX
- RGB
- HSL
- Replay GrayMuted text
- HEX
- RGB
- HSL
About Rocket League's colors
Rocket League's palette is built on a complementary blue and orange scheme, evoking competition and energy. Neutral darks and whites provide contrast and legibility in the UI.
Primary blue and secondary orange are direct complements.
Accent gold highlights achievements and rewards.
Neutrals balance the vibrant team colors for clarity.
Psychology
Blue suggests trust, skill, and cool precision, while orange conveys excitement and action. The combination reinforces the game's competitive, team-based spirit.
Evolution
The blue and orange core has remained consistent since Rocket League's launch, ensuring strong brand recognition. Minor adjustments to neutrals and accent colors have improved accessibility and UI clarity over time.
Where Rocket League uses each color
- Primary
Rocket League Blue is used for team blue, primary CTAs, and branding highlights.
- Secondary
Rocket League Orange is used for team orange, secondary CTAs, and competitive elements.
- Accent
Goal Explosion Gold appears in reward highlights and celebratory UI elements.
- Backgrounds
Stadium Night and Arena Slate provide the dark backgrounds for menus and overlays.
- Text
White Play and Scoreboard Silver are used for primary and secondary text, with Replay Gray for muted or disabled states.
- Semantic
Victory Green, Boost Warning Yellow, and Demolition Red indicate success, warnings, and errors in notifications and match feedback.
Rocket League color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Rocket League brand color is Rocket League Blue, hex code #1BA9F5.
Rocket League Blue (#1BA9F5) is RGB(27, 169, 245). For print, its approximate CMYK is 89, 31, 0, 4.
Rocket League uses Stadium Night (#181A1B), Arena Slate (#23272A), and Goalpost Gray (#3A3F44) for backgrounds and UI surfaces.
Use Rocket League Blue (#1BA9F5) and Orange (#F26522) for team and action elements, with dark neutrals for backgrounds and white or silver for text. Accent and semantic colors highlight important states or events.
The secondary color is Rocket League Orange, #F26522, and the accent is Goal Explosion Gold, #FFD700. 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 Rocket League's colors consistently when it generates UI.
Make something in the spirit of Rocket League
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.