Pixar color palette
EntertainmentPixar's brand identity centers on a vibrant blue paired with clean white and subtle gray tones, reflecting creativity and approachability. The palette is simple, with blue as the signature color used across digital and print applications.
pixar.comPixar colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Pixar BluePrimary54, 134, 211
- Pixar WhiteSecondary255, 255, 255
- Luxo YellowAccent245, 188, 28
Surfaces
Page, cards and dividers.- Pixar Light GrayBackground245, 247, 250
- Pixar Surface GraySurface229, 233, 239
- Pixar Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Pixar CharcoalText34, 34, 34
- Pixar Medium GraySecondary text90, 90, 90
- Pixar Muted GrayMuted text142, 153, 163
Semantic
Feedback and state colors.- Pixar Success GreenSuccess75, 181, 67
- Pixar Warning YellowWarning245, 188, 28
- Pixar Error RedError215, 38, 61
- Pixar Info BlueInfo54, 134, 211
Use Pixar's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
pixar-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3686D3;
--error: #D7263D;
--accent: #F5BC1C;
--border: #D1D5DB;
--primary: #3686D3;
--success: #4BB543;
--surface: #E5E9EF;
--warning: #F5BC1C;
--secondary: #FFFFFF;
--text-muted: #8E99A3;
--background: #F5F7FA;
--text-primary: #222222;
--text-secondary: #5A5A5A;
}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
13.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.4: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.4:1
Fail
Pixar background, border and text colors
The quiet part of the Pixar palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Pixar Light GrayBackground
- HEX
- RGB
- HSL
- Pixar Surface GraySurface
- HEX
- RGB
- HSL
- Pixar Border GrayBorder
- HEX
- RGB
- HSL
- Pixar CharcoalText
- HEX
- RGB
- HSL
- Pixar Medium GraySecondary text
- HEX
- RGB
- HSL
- Pixar Muted GrayMuted text
- HEX
- RGB
- HSL
About Pixar's colors
Pixar's palette is built around a vivid blue, complemented by neutral grays and white for clarity and accessibility. The yellow accent references the Luxo Ball, an iconic Pixar symbol.
Primary blue contrasts with white for strong brand recognition.
Yellow accent is used sparingly for highlights and references Pixar's heritage.
Neutral grays support readability and modern UI design.
Psychology
The blue conveys trust, imagination, and creativity, aligning with Pixar's storytelling ethos. Yellow adds warmth and playfulness, while grays keep the interface clean and professional.
Evolution
Pixar's color palette has remained largely consistent since its early years, with blue always at the forefront. Minor adjustments to gray tones and accent usage have modernized the look for digital platforms.
Where Pixar uses each color
- Primary
Pixar Blue is used in the website header, navigation, and key calls to action.
- Secondary
Pixar White is the main background on web pages and print materials.
- Accent
Luxo Yellow highlights interactive elements and references the Luxo Ball in graphics.
- Backgrounds
Pixar Light Gray is used for section backgrounds and cards.
- Text
Pixar Charcoal and Medium Gray are used for primary and secondary text, ensuring readability.
- Semantic
Success, warning, and error colors are used for notifications and status indicators in digital products.
Pixar color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Pixar brand blue is #3686D3. This color is used prominently in the logo and navigation.
Pixar Blue (#3686D3) in RGB is 54, 134, 211. In CMYK, it is approximately 74, 37, 0, 17.
Pixar uses several grays, including Pixar Light Gray (#F5F7FA), Surface Gray (#E5E9EF), and Border Gray (#D1D5DB), to create a clean and modern interface.
Use Pixar Blue (#3686D3) for primary actions and branding, with white and grays for backgrounds and text. Accent yellow (#F5BC1C) should be used sparingly for highlights and references to Pixar heritage.
The secondary color is Pixar White, #FFFFFF, and the accent is Luxo Yellow, #F5BC1C. 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 Pixar's colors consistently when it generates UI.
Make something in the spirit of Pixar
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.