IKEA colors

The IKEA color palette has 4 colors: IKEA blue #0058A3, IKEA yellow #FFDB00, IKEA Family blue #007CC1 and Black #111111. Below are HEX, RGB, HSL and OKLCH codes, contrast checks, CSS and Tailwind variables, all from its live website code checked on 16 October 2026.

IKEA color codes

IKEA brand colors in HEX, RGB, HSL and OKLCH
ColorRoleHEXRGBHSLOKLCH
IKEA bluePrimary#0058A3rgb(0, 88, 163)hsl(208, 100%, 32%)oklch(46% 0.14 252.7)
IKEA yellowAccent#FFDB00rgb(255, 219, 0)hsl(52, 100%, 50%)oklch(89.5% 0.184 97)
IKEA Family blueSecondary#007CC1rgb(0, 124, 193)hsl(201, 100%, 38%)oklch(56.5% 0.139 244.1)
BlackText#111111rgb(17, 17, 17)hsl(0, 0%, 7%)oklch(17.8% 0 0)

Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.

Where the IKEA colors come from

IKEA does not publish hex values in public brand guidelines, so these were read from the code of its live website (stylesheets and the SVG files it serves) on 16 October 2026. They are the colors www.ikea.com actually renders, which can differ slightly from print or logo colors.

IKEA color contrast

White text on IKEA blue has a contrast ratio of 7.18:1 and passes WCAG AAA for any text size. Used as a text color, IKEA blue reaches 7.18:1 on white and 2.92:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.

White and black text on IKEA colors
PairWCAG 2 ratioWCAG 2 resultAPCAAPCA guidance
White on IKEA blue7.18:1AAALc -89.2Fine for body text
Black on IKEA blue2.92:1FailsLc 19.8Dividers and decoration only
White on IKEA yellow1.36:1FailsLc -20.1Dividers and decoration only
Black on IKEA yellow15.38:1AAALc 86.1Fine for body text
White on IKEA Family blue4.51:1AALc -76.1Fine for body text
Black on IKEA Family blue4.65:1AALc 33.4Non-text elements, placeholder text
White on Black18.88:1AAALc -107.4Preferred for body text
Black on Black1.11:1FailsLc 0.0Not readable
IKEA colors on each other
PairWCAG 2 ratioWCAG 2 resultAPCAAPCA guidance
Black on IKEA yellow13.83:1AAALc 85.4Fine for body text
IKEA blue on IKEA yellow5.26:1AALc 64.3Content text, not long reading
Black on IKEA Family blue4.18:1AA large textLc 32.7Non-text elements, placeholder text
IKEA Family blue on IKEA yellow3.30:1AA large textLc 50.7Large or bold text, headings

IKEA colors in CSS and Tailwind

Copy the IKEA palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from IKEA blue, for hover states, borders and tinted backgrounds.

CSS variables
:root {
  --ikea-blue: #0058A3;
  --ikea-yellow: #FFDB00;
  --ikea-family-blue: #007CC1;
  --ikea-black: #111111;
}
Tailwind CSS v4 theme
@import "tailwindcss";

@theme {
  --color-ikea-blue: #0058A3;
  --color-ikea-yellow: #FFDB00;
  --color-ikea-family-blue: #007CC1;
  --color-ikea-black: #111111;
}
Tailwind scale generated from IKEA blue #0058A3
@theme {
  --color-ikea-50: #F1F6FC;
  --color-ikea-100: #E1EBF7;
  --color-ikea-200: #C8DBF2;
  --color-ikea-300: #A2C4EC;
  --color-ikea-400: #6EA4E3;
  --color-ikea-500: #448CDB;
  --color-ikea-600: #2174C8;
  --color-ikea-700: #0058A3;
  --color-ikea-800: #13508C;
  --color-ikea-900: #184370;
  --color-ikea-950: #102742;
}

Named colors closest to the IKEA palette

The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.

Brand colorHEXNearest named colorNamed HEXΔE OK
IKEA blue#0058A3Dusk Blue#26538D0.038
IKEA yellow#FFDB00Sunflower Yellow#FFDA030.003
IKEA Family blue#007CC1Windows Blue#3778BF0.023
Black#111111Almost Black#070D0D0.027

Palettes like IKEA

Curated palettes that include a color close to IKEA blue #0058A3.

How to use a IKEA-style palette

  • Lead with IKEA blue #0058A3 for buttons, links and key highlights, with white text on it.
  • Give most of the layout to Black #111111, about 60% of the screen, so IKEA blue stands out.
  • Keep IKEA yellow and IKEA Family blue for small accents (around 10%): status colors, illustrations or charts.
  • As text on a white page, IKEA blue reaches 7.18:1: it passes WCAG AAA for any text size.

To see how www.ikea.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn IKEA blue into a full light and dark color system with accessible roles, open it in the Color System Studio.

More brand colors

Trademarks

Frequently asked questions

What is the IKEA hex color?

The main IKEA color is IKEA blue #0058A3, which is rgb(0, 88, 163) in RGB. It comes from the CSS and SVG files of IKEA's live website (IKEA publishes no official hex values), checked on 16 October 2026.

What colors does IKEA use?

IKEA uses 4 core colors: IKEA blue #0058A3, IKEA yellow #FFDB00, IKEA Family blue #007CC1 and Black #111111.

What is IKEA blue in RGB, HSL and OKLCH?

IKEA blue #0058A3 is rgb(0, 88, 163), hsl(208, 100%, 32%) and oklch(46% 0.14 252.7). The closest named color is Dusk Blue #26538D.

Should text on IKEA blue be white or black?

White text reads better on IKEA blue: it has a contrast ratio of 7.18:1, which passes WCAG AAA for any text size.

Where do these IKEA colors come from?

The hex values were read from IKEA's live website code at https://www.ikea.com/global/assets/logos/brand/ikea.svg on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.

Can I use the IKEA colors in my own design?

Colors on their own are not owned, but IKEA's name, logo and the way it combines its colors are trademarks. Use these values to match IKEA when you refer to it, follow its official guidelines, and do not imply a link to IKEA in your own brand.

Use the IKEA colors

Check www.ikea.com live, build a color system from IKEA blue, or remix the palette.

Analyze IKEA's live siteBuild a color system from IKEA colorsOpen in the palette generatorPreview on a design