LEGO color palette
ConsumerLEGO's brand color system is anchored by its iconic bright red, complemented by yellow, white, and black, reflecting its playful and instantly recognizable identity. The palette is consistent across packaging, digital, and physical touchpoints.
lego.comLEGO colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- LEGO RedPrimary255, 0, 0
- LEGO YellowSecondary255, 213, 0
- LEGO WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- LEGO Light GrayBackground244, 244, 244
- LEGO Surface GraySurface229, 229, 229
- LEGO Border GrayBorder204, 204, 204
Text
Three tiers of copy.- LEGO BlackText26, 26, 26
- LEGO Dark GraySecondary text102, 102, 102
- LEGO Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- LEGO GreenSuccess0, 166, 81
- LEGO Warning YellowWarning255, 185, 0
- LEGO Error RedError227, 0, 11
- LEGO BlueInfo0, 108, 183
Use LEGO's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
lego-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #006CB7;
--error: #E3000B;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #FF0000;
--success: #00A651;
--surface: #E5E5E5;
--warning: #FFB900;
--secondary: #FFD500;
--text-muted: #999999;
--background: #F4F4F4;
--text-primary: #1A1A1A;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.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
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
LEGO gray and neutral colors
The quiet part of the LEGO palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- LEGO Light GrayBackground
- HEX
- RGB
- HSL
- LEGO Surface GraySurface
- HEX
- RGB
- HSL
- LEGO Border GrayBorder
- HEX
- RGB
- HSL
- LEGO BlackText
- HEX
- RGB
- HSL
- LEGO Dark GraySecondary text
- HEX
- RGB
- HSL
- LEGO Muted GrayMuted text
- HEX
- RGB
- HSL
About LEGO's colors
LEGO's color palette is built on high-contrast, primary hues that evoke playfulness and clarity. The dominant red and yellow create instant brand recognition and energy.
Primary red and yellow are complementary and vibrant.
White and black provide contrast and legibility.
Grays are used for neutral UI backgrounds and surfaces.
Psychology
Red and yellow stimulate excitement, creativity, and happiness, aligning with LEGO's mission to inspire play. The use of white and black ensures clarity and accessibility.
Evolution
LEGO's core palette has remained stable for decades, maintaining brand consistency. Minor adjustments have been made for digital accessibility and modern UI needs.
Where LEGO uses each color
- Primary
LEGO Red is used in the logo, call-to-action buttons, and key highlights across digital and physical materials.
- Secondary
LEGO Yellow appears in the logo, packaging accents, and promotional banners.
- Accent
LEGO White is used for text on colored backgrounds, logo outlines, and clean UI sections.
- Backgrounds
LEGO Light Gray backgrounds are used for website pages and app screens.
- Text
LEGO Black is the primary text color for high contrast and readability.
- Semantic
LEGO Green, Yellow, and Blue are used for status indicators, notifications, and informational banners.
LEGO color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official LEGO brand red is #FF0000. This color is used in the logo and key branding elements.
LEGO Red is RGB(255, 0, 0) and typically CMYK(0, 100, 100, 0). The hex code is #FF0000.
LEGO uses several grays: LEGO Light Gray (#F4F4F4) for backgrounds, Surface Gray (#E5E5E5), Border Gray (#CCCCCC), and text grays (#666666, #999999) for UI clarity.
Use LEGO Red (#FF0000) for primary actions and branding, with yellow and white as supporting colors. Grays and black provide structure and legibility in digital interfaces.
The secondary color is LEGO Yellow, #FFD500, and the accent is LEGO White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
4 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 LEGO's colors consistently when it generates UI.
Make something in the spirit of LEGO
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.