Oreo color palette
Food & DrinkOreo's brand identity is defined by its iconic blue, white, and black color palette, reflecting its classic packaging and playful spirit. The colors are used consistently across packaging, digital, and advertising materials.
oreo.comOreo colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Oreo BluePrimary0, 92, 180
- Oreo WhiteSecondary255, 255, 255
- Oreo BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- Oreo Light GrayBackground245, 247, 250
- Oreo Surface GraySurface227, 231, 237
- Oreo Border GrayBorder191, 201, 209
Text
Three tiers of copy.- Oreo Text BlackText34, 34, 34
- Oreo Text GraySecondary text75, 90, 103
- Oreo Muted GrayMuted text138, 153, 168
Semantic
Feedback and state colors.- Oreo Success GreenSuccess46, 204, 113
- Oreo Warning YellowWarning245, 185, 66
- Oreo Error RedError231, 76, 60
- Oreo Info BlueInfo52, 152, 219
Use Oreo's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
oreo-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3498DB;
--error: #E74C3C;
--accent: #000000;
--border: #BFC9D1;
--primary: #005CB4;
--success: #2ECC71;
--surface: #E3E7ED;
--warning: #F5B942;
--secondary: #FFFFFF;
--text-muted: #8A99A8;
--background: #F5F7FA;
--text-primary: #222222;
--text-secondary: #4B5A67;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.8:1
Pass
Text on surface
Needs 4.5:1 for body text
12.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Oreo background, border and text colors
The quiet part of the Oreo palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Oreo Light GrayBackground
- HEX
- RGB
- HSL
- Oreo Surface GraySurface
- HEX
- RGB
- HSL
- Oreo Border GrayBorder
- HEX
- RGB
- HSL
- Oreo Text BlackText
- HEX
- RGB
- HSL
- Oreo Text GraySecondary text
- HEX
- RGB
- HSL
- Oreo Muted GrayMuted text
- HEX
- RGB
- HSL
About Oreo's colors
Oreo's palette uses a bold blue as the primary color, complemented by white and black for strong contrast and brand recognition. The supporting grays and accent colors ensure clarity and accessibility in digital and print contexts.
Blue and white create a crisp, clean look.
Black is used for strong contrast and emphasis.
Grays support UI clarity and legibility.
Psychology
The blue conveys trust, reliability, and approachability, while white and black evoke simplicity and nostalgia. The palette is both playful and classic, appealing to a wide audience.
Evolution
Oreo's core blue, white, and black palette has remained consistent for decades, reinforcing its brand recognition. Minor updates to gray and accent tones have been made for digital optimization.
Where Oreo uses each color
- Primary
Oreo Blue is used for packaging backgrounds, website headers, and key brand visuals.
- Secondary
Oreo White is used for cookie cream, backgrounds, and text.
- Accent
Oreo Black is used for the cookie itself, logos, and key text.
- Backgrounds
Oreo Light Gray is used for website and app backgrounds.
- Text
Oreo Text Black and Oreo Text Gray are used for primary and secondary text in digital and print.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators in digital interfaces.
Oreo color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Oreo brand blue is #005CB4. This color is used as the primary brand identifier across all platforms.
Oreo Blue (#005CB4) is RGB(0, 92, 180) and CMYK(100, 49, 0, 29). These values are used for digital and print consistency.
Oreo uses a range of grays including Oreo Light Gray (#F5F7FA), Oreo Surface Gray (#E3E7ED), and Oreo Border Gray (#BFC9D1) for backgrounds and UI elements.
Oreo Blue (#005CB4) should be dominant in branding, with white and black for contrast and legibility. Grays and semantic colors support UI clarity and accessibility.
The secondary color is Oreo White, #FFFFFF, and the accent is Oreo Black, #000000. 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 Oreo's colors consistently when it generates UI.
Make something in the spirit of Oreo
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.