KitchenAid color palette
ConsumerKitchenAid's color identity centers on its iconic red, supported by a minimal palette of black, white, and neutral grays for a modern, premium look. The colors reflect the brand's heritage and its focus on quality kitchen appliances.
kitchenaid.comKitchenAid colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- KitchenAid RedPrimary227, 24, 55
- KitchenAid BlackSecondary34, 34, 34
- KitchenAid Light GrayAccent245, 245, 245
Surfaces
Page, cards and dividers.- KitchenAid WhiteBackground255, 255, 255
- KitchenAid Surface GraySurface242, 242, 242
- KitchenAid Border GrayBorder214, 214, 214
Text
Three tiers of copy.- KitchenAid BlackText34, 34, 34
- KitchenAid Medium GraySecondary text109, 110, 113
- KitchenAid Muted GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- KitchenAid Success GreenSuccess67, 160, 71
- KitchenAid Warning YellowWarning249, 168, 37
- KitchenAid Error RedError211, 47, 47
- KitchenAid Info BlueInfo25, 118, 210
Use KitchenAid's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
kitchenaid-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #F5F5F5;
--border: #D6D6D6;
--primary: #E31837;
--success: #43A047;
--surface: #F2F2F2;
--warning: #F9A825;
--secondary: #222222;
--text-muted: #A7A8AA;
--background: #FFFFFF;
--text-primary: #222222;
--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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
KitchenAid gray and neutral colors
The quiet part of the KitchenAid palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- KitchenAid WhiteBackground
- HEX
- RGB
- HSL
- KitchenAid Surface GraySurface
- HEX
- RGB
- HSL
- KitchenAid Border GrayBorder
- HEX
- RGB
- HSL
- KitchenAid BlackText
- HEX
- RGB
- HSL
- KitchenAid Medium GraySecondary text
- HEX
- RGB
- HSL
- KitchenAid Muted GrayMuted text
- HEX
- RGB
- HSL
About KitchenAid's colors
KitchenAid's palette is dominated by a signature red, complemented by black, white, and subtle grays for clarity and contrast. The color system is simple, bold, and timeless, supporting product recognition and premium positioning.
Primary red is paired with black for strong visual impact.
Grays and white provide neutral backgrounds for product imagery.
Accent colors are used sparingly to highlight key actions or information.
Psychology
The red conveys energy, passion, and confidence, aligning with the brand's culinary heritage. Black and gray tones reinforce a sense of quality and durability.
Evolution
KitchenAid's red has remained consistent since its early days, serving as a recognizable brand anchor. The supporting palette has become more neutral and minimal over time to highlight product design.
Where KitchenAid uses each color
- Primary
KitchenAid Red is used for logos, key buttons, and product highlights.
- Secondary
KitchenAid Black appears in navigation bars, footer backgrounds, and text.
- Accent
KitchenAid Light Gray is used for backgrounds, cards, and subtle UI elements.
- Backgrounds
KitchenAid White is the main background color for web pages and packaging.
- Text
KitchenAid Black and Medium Gray are used for primary and secondary text, respectively.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status messages in digital interfaces.
KitchenAid color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official KitchenAid brand color is KitchenAid Red, with the hex code #E31837.
KitchenAid Red is RGB(227, 24, 55) and CMYK(0, 89, 76, 11), corresponding to hex #E31837.
KitchenAid uses a range of grays including #F5F5F5 (Light Gray), #F2F2F2 (Surface Gray), #D6D6D6 (Border Gray), #6D6E71 (Medium Gray), and #A7A8AA (Muted Gray) for backgrounds, borders, and text.
Use KitchenAid Red (#E31837) for primary actions and branding, with black, white, and grays providing structure and clarity in UI and print. Accent and semantic colors should be used sparingly to maintain brand consistency.
The secondary color is KitchenAid Black, #222222, and the accent is KitchenAid Light Gray, #F5F5F5. 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 KitchenAid's colors consistently when it generates UI.
Make something in the spirit of KitchenAid
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.