Oral-B color palette
ConsumerOral-B's color identity centers on a distinctive blue, evoking cleanliness and trust, with supporting whites and grays for a clinical, professional look. The palette is consistent across packaging, digital, and advertising materials.
oralb.comOral-B colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Oral-B BluePrimary0, 116, 200
- Oral-B Deep BlueSecondary0, 90, 156
- Oral-B AquaAccent0, 174, 239
Surfaces
Page, cards and dividers.- Oral-B WhiteBackground255, 255, 255
- Oral-B Light GraySurface244, 247, 250
- Oral-B Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Oral-B CharcoalText26, 26, 26
- Oral-B Medium GraySecondary text99, 102, 106
- Oral-B Muted GrayMuted text167, 169, 172
Semantic
Feedback and state colors.- Oral-B GreenSuccess67, 176, 42
- Oral-B YellowWarning255, 194, 14
- Oral-B RedError228, 28, 35
- Oral-B AquaInfo0, 174, 239
Use Oral-B's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
oral-b-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00AEEF;
--error: #E41C23;
--accent: #00AEEF;
--border: #D1D5DB;
--primary: #0074C8;
--success: #43B02A;
--surface: #F4F7FA;
--warning: #FFC20E;
--secondary: #005A9C;
--text-muted: #A7A9AC;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #63666A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.4: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.2:1
Fail
Oral-B background, border and text colors
The quiet part of the Oral-B palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Oral-B WhiteBackground
- HEX
- RGB
- HSL
- Oral-B Light GraySurface
- HEX
- RGB
- HSL
- Oral-B Border GrayBorder
- HEX
- RGB
- HSL
- Oral-B CharcoalText
- HEX
- RGB
- HSL
- Oral-B Medium GraySecondary text
- HEX
- RGB
- HSL
- Oral-B Muted GrayMuted text
- HEX
- RGB
- HSL
About Oral-B's colors
Oral-B's palette is built on blue and white, conveying hygiene, reliability, and professionalism. The supporting grays and accent blue reinforce a clinical, trustworthy image.
Primary blue pairs with white for strong contrast.
Accent aqua is used for highlights and calls to action.
Grays provide neutral backgrounds and text support.
Psychology
Blue is associated with trust, cleanliness, and expertise, ideal for oral care. White and gray reinforce a sense of sterility and professionalism.
Evolution
Oral-B's palette has remained stable, with the blue and white combination being a core identity for decades. Minor adjustments to accent tones and gray shades have modernized the UI.
Where Oral-B uses each color
- Primary
Oral-B Blue is used for the logo, headers, and main navigation backgrounds.
- Secondary
Oral-B Deep Blue appears in secondary buttons and footer backgrounds.
- Accent
Oral-B Aqua is featured in call-to-action buttons and highlights.
- Backgrounds
Oral-B White and Light Gray are used for page backgrounds and content surfaces.
- Text
Charcoal and Medium Gray are used for primary and secondary text throughout the website and packaging.
- Semantic
Green, yellow, and red are used for success, warning, and error states in UI feedback.
Oral-B color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Oral-B brand color is #0074C8, known as Oral-B Blue.
Oral-B Blue (#0074C8) is RGB(0, 116, 200) and CMYK(100, 42, 0, 22).
Oral-B uses Light Gray (#F4F7FA), Border Gray (#D1D5DB), Medium Gray (#63666A), and Muted Gray (#A7A9AC) for backgrounds, borders, and text.
Use Oral-B Blue (#0074C8) for primary branding and navigation, with accent and neutral tones for UI elements and backgrounds to maintain clarity and accessibility.
The secondary color is Oral-B Deep Blue, #005A9C, and the accent is Oral-B Aqua, #00AEEF. 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 Oral-B's colors consistently when it generates UI.
Make something in the spirit of Oral-B
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.