Pepsi colors

The Pepsi color palette has 5 colors: Electric blue #0000FE, Pepsi blue #0025FF, Dark blue #0E0E96, Pepsi red #FF1400 and Black #000000. 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.

Pepsi color codes

Pepsi brand colors in HEX, RGB, HSL and OKLCH
Color	Role	HEX	RGB	HSL	OKLCH
Electric blue	Primary	#0000FE	rgb(0, 0, 254)	hsl(240, 100%, 50%)	oklch(45.1% 0.312 264.1)
Pepsi blue	Secondary	#0025FF	rgb(0, 37, 255)	hsl(231, 100%, 50%)	oklch(47.1% 0.3 264.2)
Dark blue	Secondary	#0E0E96	rgb(14, 14, 150)	hsl(240, 83%, 32%)	oklch(31.8% 0.201 267)
Pepsi red	Accent	#FF1400	rgb(255, 20, 0)	hsl(5, 100%, 50%)	oklch(63.2% 0.254 29.9)
Black	Text	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)	oklch(0% 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 Pepsi colors come from

Pepsi 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.pepsi.co.uk actually renders, which can differ slightly from print or logo colors.

Source (live website CSS or SVG): https://www.pepsi.co.uk/themes/custom/pepsizero_fe/assets/css/app.css?tm1y8o checked 2026-10-16

Pepsi color contrast

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

White and black text on Pepsi colors
Pair	WCAG 2 ratio	WCAG 2 result	APCA	APCA guidance
White on Electric blue	8.63:1	AAA	Lc -90.8	Preferred for body text
Black on Electric blue	2.43:1	Fails	Lc 18.1	Dividers and decoration only
White on Pepsi blue	7.75:1	AAA	Lc -89.4	Fine for body text
Black on Pepsi blue	2.70:1	Fails	Lc 19.6	Dividers and decoration only
White on Dark blue	13.79:1	AAA	Lc -102.0	Preferred for body text
Black on Dark blue	1.52:1	Fails	Lc 0.0	Not readable
White on Pepsi red	3.92:1	AA large text	Lc -69.4	Content text, not long reading
Black on Pepsi red	5.35:1	AA	Lc 40.2	Non-text elements, placeholder text

Pepsi colors on each other
Pair	WCAG 2 ratio	WCAG 2 result	APCA	APCA guidance
Dark blue on Pepsi red	3.51:1	AA large text	Lc 32.8	Non-text elements, placeholder text
Electric blue on Pepsi red	2.20:1	Fails	Lc 20.1	Dividers and decoration only
Pepsi blue on Pepsi red	1.97:1	Fails	Lc 18.6	Dividers and decoration only
Dark blue on Pepsi blue	1.77:1	Fails	Lc 12.2	Not readable

Pepsi colors in CSS and Tailwind

Copy the Pepsi 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 Electric blue, for hover states, borders and tinted backgrounds.

CSS variables

:root {
  --pepsi-electric-blue: #0000FE;
  --pepsi-blue: #0025FF;
  --pepsi-dark-blue: #0E0E96;
  --pepsi-red: #FF1400;
  --pepsi-black: #000000;
}

Tailwind CSS v4 theme

@import "tailwindcss";

@theme {
  --color-pepsi-electric-blue: #0000FE;
  --color-pepsi-blue: #0025FF;
  --color-pepsi-dark-blue: #0E0E96;
  --color-pepsi-red: #FF1400;
  --color-pepsi-black: #000000;
}

Tailwind scale generated from Electric blue #0000FE

@theme {
  --color-pepsi-50: #F1F6FF;
  --color-pepsi-100: #E0EAFF;
  --color-pepsi-200: #C7DAFF;
  --color-pepsi-300: #A1C0FF;
  --color-pepsi-400: #6F9DFF;
  --color-pepsi-500: #4A80FF;
  --color-pepsi-600: #235FFF;
  --color-pepsi-700: #0038FF;
  --color-pepsi-800: #0000FE;
  --color-pepsi-900: #0024B4;
  --color-pepsi-950: #001570;
}

Named colors closest to the Pepsi 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
Electric blue	#0000FE	Blue	#0000FF	0.002
Pepsi blue	#0025FF	Rich Blue	#021BF9	0.015
Dark blue	#0E0E96	Royal	#0C1793	0.010
Pepsi red	#FF1400	Red	#FF0000	0.006
Black	#000000	Black	#000000	Exact match

How to use a Pepsi-style palette

Lead with Electric blue #0000FE for buttons, links and key highlights, with white text on it.
Give most of the layout to Black #000000, about 60% of the screen, so Electric blue stands out.
Keep Pepsi blue, Dark blue and Pepsi red for small accents (around 10%): status colors, illustrations or charts.
As text on a white page, Electric blue reaches 8.63:1: it passes WCAG AAA for any text size.

To see how www.pepsi.co.uk uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Electric 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 Pepsi hex color?

The main Pepsi color is Electric blue #0000FE, which is rgb(0, 0, 254) in RGB. It comes from the CSS and SVG files of Pepsi's live website (Pepsi publishes no official hex values), checked on 16 October 2026.

What colors does Pepsi use?

Pepsi uses 5 core colors: Electric blue #0000FE, Pepsi blue #0025FF, Dark blue #0E0E96, Pepsi red #FF1400 and Black #000000.

What is Pepsi electric blue in RGB, HSL and OKLCH?

Pepsi electric blue #0000FE is rgb(0, 0, 254), hsl(240, 100%, 50%) and oklch(45.1% 0.312 264.1). The closest named color is Blue #0000FF.

Should text on Pepsi electric blue be white or black?

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

Where do these Pepsi colors come from?

The hex values were read from Pepsi's live website code at https://www.pepsi.co.uk/themes/custom/pepsizero_fe/assets/css/app.css?tm1y8o on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.

Can I use the Pepsi colors in my own design?

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

Use the Pepsi colors

Check www.pepsi.co.uk live, build a color system from Electric blue, or remix the palette.

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