IKEA color palette
EcommerceIKEA's Swedish blue-and-yellow palette directly references the Swedish flag, creating an instantly recognizable brand identity that communicates democratic design and Scandinavian heritage.
ikea.comIKEA colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- IKEA BluePrimary0, 88, 163
- IKEA YellowSecondary255, 218, 26
- IKEA RedAccent204, 0, 8
Surfaces
Page, cards and dividers.- IKEA WhiteBackground255, 255, 255
- IKEA SurfaceSurface245, 245, 245
- IKEA BorderBorder223, 223, 223
Text
Three tiers of copy.- IKEA TextText17, 17, 17
- IKEA SecondarySecondary text72, 72, 72
- IKEA MutedMuted text146, 146, 146
Semantic
Feedback and state colors.- IKEA GreenSuccess10, 138, 0
- IKEA WarningWarning245, 156, 0
- IKEA ErrorError224, 7, 81
- IKEA InfoInfo0, 88, 163
Use IKEA's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
ikea-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0058A3;
--error: #E00751;
--accent: #CC0008;
--border: #DFDFDF;
--primary: #0058A3;
--success: #0A8A00;
--surface: #F5F5F5;
--warning: #F59C00;
--secondary: #FFDA1A;
--text-muted: #929292;
--background: #FFFFFF;
--text-primary: #111111;
--text-secondary: #484848;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.9:1
Pass
Text on surface
Needs 4.5:1 for body text
17.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.1:1
Pass
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
IKEA gray and neutral colors
The quiet part of the IKEA palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- IKEA WhiteBackground
- HEX
- RGB
- HSL
- IKEA SurfaceSurface
- HEX
- RGB
- HSL
- IKEA BorderBorder
- HEX
- RGB
- HSL
- IKEA TextText
- HEX
- RGB
- HSL
- IKEA SecondarySecondary text
- HEX
- RGB
- HSL
- IKEA MutedMuted text
- HEX
- RGB
- HSL
About IKEA's colors
IKEA's blue and yellow are directly drawn from the Swedish flag, creating a national-identity brand connection that's unique in retail. This patriotic palette is one of the most recognizable color combinations in global commerce.
Blue and yellow form a high-contrast complementary pair — maximum visibility and recognition
Red (#CC0008) serves as an accent for sales, promotions, and urgency
White space balances the saturated blue and yellow for digital readability
Psychology
Blue communicates trust, reliability, and quality. Yellow adds optimism, affordability, and approachability. Together they suggest 'quality you can trust at prices you can afford' — IKEA's core promise.
Evolution
IKEA's blue-and-yellow combination has been the brand identity since 1983 when the current logo was established. The specific shades have been refined for digital use, but the Swedish flag connection remains the foundation.
Where IKEA uses each color
- Primary
IKEA Blue (#0058A3) anchors headers, navigation, and the primary brand frame across all touchpoints.
- Secondary
Yellow (#FFDA1A) fills backgrounds, promotional banners, and the iconic store exterior signage.
- Accent
Red (#CC0008) drives sale tags, promotional pricing, and urgency elements in the shopping experience.
- Backgrounds
White backgrounds with clean surfaces let product photography and room setups take visual priority.
- Text
Strong black text (#111111) ensures readability across the information-dense catalog and product pages.
- Semantic
Distinct semantic colors avoid confusion with the dominant blue and yellow brand colors.
IKEA color questions
Hex codes, RGB values, neutrals and how to use the palette.
IKEA's blue (#0058A3) and yellow (#FFDA1A) are drawn directly from the Swedish flag, reflecting founder Ingvar Kamprad's Swedish heritage. This national connection is a core part of IKEA's brand identity and global recognition.
IKEA Blue is #0058A3, a deep, saturated blue used for headers, navigation, and the primary brand identity. It pairs with IKEA Yellow (#FFDA1A) to create the iconic Swedish flag–inspired palette.
IKEA uses red (#CC0008) for sale and promotional pricing, green for sustainability messaging, and neutral grays for the digital interface. However, blue and yellow remain the dominant and instantly recognizable brand pair.
The secondary color is IKEA Yellow, #FFDA1A, and the accent is IKEA Red, #CC0008. Together with the primary they make up the three brand colors at the top of this page.
IKEA uses #FFFFFF for backgrounds, #F5F5F5 for surfaces and #DFDFDF for borders. Text runs #111111, #484848 and #929292 from strongest to most muted.
5 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 IKEA's colors consistently when it generates UI.
Make something in the spirit of IKEA
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
