Braun color palette
ConsumerBraun's brand color identity is rooted in a minimalist, functional aesthetic, dominated by a signature dark gray and complemented by neutral tones. The palette reflects Braun's commitment to clarity, usability, and timeless design.
braun.comBraun colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Braun CharcoalPrimary35, 31, 32
- Braun WhiteSecondary255, 255, 255
- Braun YellowAccent245, 193, 0
Surfaces
Page, cards and dividers.- Braun Light GrayBackground247, 247, 247
- Braun Surface GraySurface229, 229, 229
- Braun Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Braun CharcoalText35, 31, 32
- Braun Medium GraySecondary text109, 110, 113
- Braun Muted GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- Braun GreenSuccess107, 190, 68
- Braun YellowWarning245, 193, 0
- Braun RedError210, 38, 48
- Braun BlueInfo0, 159, 218
Use Braun's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
braun-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FDA;
--error: #D22630;
--accent: #F5C100;
--border: #CCCCCC;
--primary: #231F20;
--success: #6BBE44;
--surface: #E5E5E5;
--warning: #F5C100;
--secondary: #FFFFFF;
--text-muted: #A7A8AA;
--background: #F7F7F7;
--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.2:1
Pass
Text on surface
Needs 4.5:1 for body text
12.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.0: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
Braun gray and neutral colors
The quiet part of the Braun palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Braun Light GrayBackground
- HEX
- RGB
- HSL
- Braun Surface GraySurface
- HEX
- RGB
- HSL
- Braun Border GrayBorder
- HEX
- RGB
- HSL
- Braun CharcoalText
- HEX
- RGB
- HSL
- Braun Medium GraySecondary text
- HEX
- RGB
- HSL
- Braun Muted GrayMuted text
- HEX
- RGB
- HSL
About Braun's colors
Braun's palette is grounded in neutral, functional tones with minimal accent colors, emphasizing clarity and timelessness. The use of dark gray and white supports a clean, modern interface.
Primary charcoal contrasts with white for maximum readability.
Yellow accent highlights calls to action or key features.
Grays provide hierarchy and separation in UI elements.
Psychology
The dominant charcoal and white convey professionalism, reliability, and simplicity. Yellow adds a touch of energy and draws attention without overwhelming the design.
Evolution
Braun's color palette has remained largely stable, reflecting its heritage of functional minimalism. Occasional updates to accent colors have modernized the look while preserving core brand values.
Where Braun uses each color
- Primary
Braun Charcoal is used for the logo, navigation bar, and primary headings.
- Secondary
Braun White serves as the main background for web pages and product displays.
- Accent
Braun Yellow highlights buttons, icons, and important notifications.
- Backgrounds
Braun Light Gray and Surface Gray are used for section backgrounds and cards.
- Text
Charcoal and Medium Gray are used for primary and secondary text, with Muted Gray for less prominent information.
- Semantic
Green, Yellow, Red, and Blue are used for success, warning, error, and informational states in UI feedback.
Braun color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Braun brand color is Braun Charcoal, hex code #231F20.
Braun Charcoal (#231F20) in RGB is 35, 31, 32; in CMYK it is 0, 11, 9, 86.
Braun uses a range of grays including Surface Gray (#E5E5E5), Border Gray (#CCCCCC), Medium Gray (#6D6E71), and Muted Gray (#A7A8AA) for backgrounds, borders, and secondary text.
Use Braun Charcoal for primary elements and text, with White and Light Gray for backgrounds. Apply Yellow, Green, Red, and Blue sparingly for accents and semantic feedback, ensuring clarity and accessibility.
The secondary color is Braun White, #FFFFFF, and the accent is Braun Yellow, #F5C100. 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 Braun's colors consistently when it generates UI.
Make something in the spirit of Braun
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.