Oatly color palette
Food & DrinkOatly's color identity is defined by a distinctive blue primary, paired with bold black and neutral tones, reflecting its playful and modern brand voice. The palette is consistent across packaging, digital, and print materials.
oatly.comOatly colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Oatly BluePrimary134, 182, 226
- Oatly BlackSecondary35, 31, 32
- Oatly YellowAccent242, 199, 92
Surfaces
Page, cards and dividers.- Oatly Off WhiteBackground245, 245, 245
- Oatly Light GraySurface233, 233, 233
- Oatly Border GrayBorder194, 194, 194
Text
Three tiers of copy.- Oatly BlackText35, 31, 32
- Oatly Medium GraySecondary text109, 110, 113
- Oatly Muted GrayMuted text167, 169, 172
Semantic
Feedback and state colors.- Oatly GreenSuccess122, 193, 67
- Oatly YellowWarning242, 199, 92
- Oatly RedError233, 79, 55
- Oatly BlueInfo134, 182, 226
Use Oatly's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
oatly-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #86B6E2;
--error: #E94F37;
--accent: #F2C75C;
--border: #C2C2C2;
--primary: #86B6E2;
--success: #7AC143;
--surface: #E9E9E9;
--warning: #F2C75C;
--secondary: #231F20;
--text-muted: #A7A9AC;
--background: #F5F5F5;
--text-primary: #231F20;
--text-secondary: #6D6E71;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
13.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Oatly gray and neutral colors
The quiet part of the Oatly palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Oatly Off WhiteBackground
- HEX
- RGB
- HSL
- Oatly Light GraySurface
- HEX
- RGB
- HSL
- Oatly Border GrayBorder
- HEX
- RGB
- HSL
- Oatly BlackText
- HEX
- RGB
- HSL
- Oatly Medium GraySecondary text
- HEX
- RGB
- HSL
- Oatly Muted GrayMuted text
- HEX
- RGB
- HSL
About Oatly's colors
Oatly's palette is anchored by its signature blue, contrasted with bold black and softened by neutral grays and off-whites. Accent colors are used sparingly to highlight calls to action and important information.
Primary blue contrasts with black for high visibility.
Yellow accent provides warmth and draws attention.
Grays and off-whites create a neutral, approachable background.
Psychology
The blue conveys trust, freshness, and approachability, while black adds boldness and clarity. Yellow accents introduce energy and optimism, supporting the brand's playful tone.
Evolution
Oatly's palette has remained stable, with the blue and black combination consistently present since the brand's major rebranding. Minor adjustments have been made to gray tones for improved digital accessibility.
Where Oatly uses each color
- Primary
Oatly Blue is used for key brand elements, packaging backgrounds, and website highlights.
- Secondary
Oatly Black is used for logos, headlines, and main navigation.
- Accent
Oatly Yellow appears in call-to-action buttons and promotional graphics.
- Backgrounds
Oatly Off White and Light Gray are used for website and app backgrounds.
- Text
Oatly Black and Medium Gray are used for primary and secondary text, respectively.
- Semantic
Green, yellow, and red are used for success, warning, and error states in digital interfaces.
Oatly color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Oatly brand color is Oatly Blue, with the hex code #86B6E2.
Oatly Blue (#86B6E2) is RGB(134, 182, 226); in CMYK it is approximately 41, 19, 0, 11.
Oatly uses several grays: Oatly Light Gray (#E9E9E9), Border Gray (#C2C2C2), Medium Gray (#6D6E71), and Muted Gray (#A7A9AC) for backgrounds, borders, and secondary text.
Use Oatly Blue (#86B6E2) for primary highlights, Black (#231F20) for text and logos, and grays for backgrounds and secondary elements to maintain brand consistency.
The secondary color is Oatly Black, #231F20, and the accent is Oatly Yellow, #F2C75C. Together with the primary they make up the three brand colors at the top of this page.
3 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 Oatly's colors consistently when it generates UI.
Make something in the spirit of Oatly
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.