IKEA Family color palette
ConsumerIKEA Family uses a bold, instantly recognizable palette centered on its signature blue and orange, reflecting the parent IKEA brand with a distinct accent for the loyalty program. The color system is designed for clarity, accessibility, and strong brand association.
ikea.comIKEA Family colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- IKEA Family OrangePrimary255, 143, 0
- IKEA BlueSecondary0, 88, 163
- IKEA YellowAccent255, 210, 0
Surfaces
Page, cards and dividers.- IKEA WhiteBackground255, 255, 255
- IKEA Light GraySurface245, 245, 245
- IKEA Border GrayBorder216, 216, 216
Text
Three tiers of copy.- IKEA Text BlackText35, 35, 35
- IKEA Text GraySecondary text110, 110, 110
- IKEA Muted GrayMuted text167, 167, 167
Semantic
Feedback and state colors.- IKEA Success GreenSuccess75, 181, 67
- IKEA Warning AmberWarning255, 179, 0
- IKEA Error RedError215, 38, 61
- IKEA Info BlueInfo25, 118, 210
Use IKEA Family's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
ikea-family-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D7263D;
--accent: #FFD200;
--border: #D8D8D8;
--primary: #FF8F00;
--success: #4BB543;
--surface: #F5F5F5;
--warning: #FFB300;
--secondary: #0058A3;
--text-muted: #A7A7A7;
--background: #FFFFFF;
--text-primary: #232323;
--text-secondary: #6E6E6E;
}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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
14.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
IKEA Family gray and neutral colors
The quiet part of the IKEA Family 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 Light GraySurface
- HEX
- RGB
- HSL
- IKEA Border GrayBorder
- HEX
- RGB
- HSL
- IKEA Text BlackText
- HEX
- RGB
- HSL
- IKEA Text GraySecondary text
- HEX
- RGB
- HSL
- IKEA Muted GrayMuted text
- HEX
- RGB
- HSL
About IKEA Family's colors
IKEA Family's palette is built around high-contrast, saturated hues for maximum visibility and brand recall. The orange primary distinguishes the loyalty program from the core blue and yellow of IKEA.
Primary orange contrasts with IKEA blue for visual hierarchy.
Yellow accent is used sparingly for highlights and calls to action.
Neutral grays and white provide clarity and accessibility.
Psychology
The orange evokes friendliness and approachability, supporting the community focus of IKEA Family. Blue and yellow reinforce trust and optimism, consistent with the parent brand.
Evolution
The IKEA Family palette has remained stable since its introduction, with orange always as the key identifier. Minor adjustments have been made to gray tones for improved digital accessibility.
Where IKEA Family uses each color
- Primary
IKEA Family Orange is used for program banners, buttons, and key loyalty highlights.
- Secondary
IKEA Blue appears in navigation bars, headings, and backgrounds.
- Accent
IKEA Yellow is reserved for special offers, icons, and attention-grabbing elements.
- Backgrounds
White and light gray are used for page backgrounds and content areas.
- Text
Text colors range from black for primary content to muted gray for secondary or disabled information.
- Semantic
Green, amber, red, and blue are used for status messages and alerts in digital interfaces.
IKEA Family color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official IKEA Family orange is #FF8F00, used as the primary color for the loyalty program.
IKEA Family Orange (#FF8F00) in RGB is 255, 143, 0; in CMYK it is 0, 44, 100, 0.
IKEA Family uses #F5F5F5 (Light Gray), #D8D8D8 (Border Gray), and #232323 (Text Black) as its main neutrals for backgrounds and text.
Use #FF8F00 for primary actions and highlights, #0058A3 for navigation and backgrounds, and #FFD200 for accents; neutrals support readability and accessibility.
The secondary color is IKEA Blue, #0058A3, and the accent is IKEA Yellow, #FFD200. 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 IKEA Family's colors consistently when it generates UI.
Make something in the spirit of IKEA Family
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.