McDonald’s colors

The McDonald’s color palette has 2 colors: Golden Arches yellow #FFBC0D and McDonald’s red #DB0007. 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.

McDonald’s color codes

McDonald’s brand colors in HEX, RGB, HSL and OKLCH
Color	Role	HEX	RGB	HSL	OKLCH
Golden Arches yellow	Primary	#FFBC0D	rgb(255, 188, 13)	hsl(43, 100%, 53%)	oklch(83.5% 0.17 82.3)
McDonald’s red	Secondary	#DB0007	rgb(219, 0, 7)	hsl(358, 100%, 43%)	oklch(56% 0.229 28.7)

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 McDonald’s colors come from

McDonald’s 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.mcdonalds.com actually renders, which can differ slightly from print or logo colors.

McDonald’s US site blocks automated requests, so the two logo colors were read from the logo SVG on its Japanese and Polish sites, which match.

Source (live website CSS or SVG): https://www.mcdonalds.co.jp/ checked 2026-10-16
Also: https://www.mcdonalds.pl/ checked 2026-10-16

McDonald’s color contrast

Black text on McDonald’s golden arches yellow has a contrast ratio of 12.45:1 and passes WCAG AAA for any text size. Used as a text color, Golden Arches yellow reaches 1.68:1 on white and 12.45:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.

White and black text on McDonald’s colors
Pair	WCAG 2 ratio	WCAG 2 result	APCA	APCA guidance
White on Golden Arches yellow	1.68:1	Fails	Lc -33.4	Non-text elements, placeholder text
Black on Golden Arches yellow	12.45:1	AAA	Lc 74.2	Content text, not long reading
White on McDonald’s red	5.23:1	AA	Lc -78.4	Fine for body text
Black on McDonald’s red	4.01:1	AA large text	Lc 31.1	Non-text elements, placeholder text

McDonald’s colors on each other
Pair	WCAG 2 ratio	WCAG 2 result	APCA	APCA guidance
McDonald’s red on Golden Arches yellow	3.10:1	AA large text	Lc 41.1	Non-text elements, placeholder text

McDonald’s colors in CSS and Tailwind

Copy the McDonald’s 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 Golden Arches yellow, for hover states, borders and tinted backgrounds.

CSS variables

:root {
  --mcdonalds-golden-arches-yellow: #FFBC0D;
  --mcdonalds-red: #DB0007;
}

Tailwind CSS v4 theme

@import "tailwindcss";

@theme {
  --color-mcdonalds-golden-arches-yellow: #FFBC0D;
  --color-mcdonalds-red: #DB0007;
}

Tailwind scale generated from Golden Arches yellow #FFBC0D

@theme {
  --color-mcdonalds-50: #FDF4E5;
  --color-mcdonalds-100: #FAE7C5;
  --color-mcdonalds-200: #F8D490;
  --color-mcdonalds-300: #FFBC0D;
  --color-mcdonalds-400: #CD9600;
  --color-mcdonalds-500: #B08000;
  --color-mcdonalds-600: #946B00;
  --color-mcdonalds-700: #7D5A00;
  --color-mcdonalds-800: #674900;
  --color-mcdonalds-900: #563D00;
  --color-mcdonalds-950: #342300;
}

Named colors closest to the McDonald’s 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 color	HEX	Nearest named color	Named HEX	ΔE OK
Golden Arches yellow	#FFBC0D	Amber	#FFBE0B	0.005
McDonald’s red	#DB0007	Crimson	#DC143C	0.036

Palettes like McDonald’s

Curated palettes that include a color close to McDonald’s golden arches yellow #FFBC0D.

How to use a McDonald’s-style palette

Lead with Golden Arches yellow #FFBC0D for buttons, links and key highlights, with black text on it.
McDonald’s lists no neutrals, so pair Golden Arches yellow with white or a near-black for about 60% of the layout and let Golden Arches yellow take about 30%.
Keep McDonald’s red for small accents (around 10%): status colors, illustrations or charts.
As text on a white page, Golden Arches yellow reaches 1.68:1: it fails WCAG 2 for text there, so keep it for icons, fills and borders.

To see how www.mcdonalds.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Golden Arches yellow 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 McDonald’s hex color?

The main McDonald’s color is Golden Arches yellow #FFBC0D, which is rgb(255, 188, 13) in RGB. It comes from the CSS and SVG files of McDonald’s live website (McDonald’s publishes no official hex values), checked on 16 October 2026.

What colors does McDonald’s use?

McDonald’s uses 2 core colors: Golden Arches yellow #FFBC0D and McDonald’s red #DB0007.

What is McDonald’s golden arches yellow in RGB, HSL and OKLCH?

McDonald’s golden arches yellow #FFBC0D is rgb(255, 188, 13), hsl(43, 100%, 53%) and oklch(83.5% 0.17 82.3). The closest named color is Amber #FFBE0B.

Should text on McDonald’s golden arches yellow be white or black?

Black text reads better on McDonald’s golden arches yellow: it has a contrast ratio of 12.45:1, which passes WCAG AAA for any text size.

Where do these McDonald’s colors come from?

The hex values were read from McDonald’s live website code at https://www.mcdonalds.co.jp/ on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.

Can I use the McDonald’s colors in my own design?

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

Use the McDonald’s colors

Check www.mcdonalds.com live, build a color system from Golden Arches yellow, or remix the palette.

Analyze McDonald’s live site Build a color system from McDonald’s colors Open in the palette generator Preview on a design