CeraVe color palette
ConsumerCeraVe's color identity centers on a distinctive blue, conveying trust, cleanliness, and dermatological expertise. The palette is clean and clinical, with blue, white, and neutral grays dominating both packaging and digital interfaces.
cerave.comCeraVe colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- CeraVe BluePrimary43, 110, 178
- CeraVe AquaSecondary0, 173, 239
- CeraVe Light BlueAccent110, 193, 228
Surfaces
Page, cards and dividers.- CeraVe WhiteBackground255, 255, 255
- CeraVe Light GraySurface246, 247, 249
- CeraVe Border GrayBorder217, 225, 232
Text
Three tiers of copy.- CeraVe CharcoalText26, 26, 26
- CeraVe SlateSecondary text79, 91, 98
- CeraVe Muted GrayMuted text138, 153, 168
Semantic
Feedback and state colors.- CeraVe GreenSuccess75, 181, 67
- CeraVe YellowWarning255, 179, 0
- CeraVe RedError229, 57, 53
- CeraVe Info BlueInfo25, 118, 210
Use CeraVe's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
cerave-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #E53935;
--accent: #6EC1E4;
--border: #D9E1E8;
--primary: #2B6EB2;
--success: #4BB543;
--surface: #F6F7F9;
--warning: #FFB300;
--secondary: #00ADEF;
--text-muted: #8A99A8;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4F5B62;
}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
7.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.5:1
Pass
Muted text on background
Needs 3:1 for large text
2.9:1
Fail
Muted text on surface
Needs 3:1 for large text
2.7:1
Fail
CeraVe background, border and text colors
The quiet part of the CeraVe palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- CeraVe WhiteBackground
- HEX
- RGB
- HSL
- CeraVe Light GraySurface
- HEX
- RGB
- HSL
- CeraVe Border GrayBorder
- HEX
- RGB
- HSL
- CeraVe CharcoalText
- HEX
- RGB
- HSL
- CeraVe SlateSecondary text
- HEX
- RGB
- HSL
- CeraVe Muted GrayMuted text
- HEX
- RGB
- HSL
About CeraVe's colors
CeraVe's palette uses blue as a symbol of trust and clinical efficacy, supported by clean whites and subtle grays for a medical, approachable feel. Accent blues and neutrals provide clarity and hierarchy in UI and packaging.
Primary blue contrasts with white for high readability.
Secondary and accent blues create depth and highlight key actions.
Grays unify backgrounds, surfaces, and text for a clean, modern look.
Psychology
Blue is associated with trust, calm, and professionalism, reinforcing CeraVe's dermatological credibility. The palette's restraint signals safety and reliability to consumers.
Evolution
CeraVe's palette has remained stable since its inception, focusing on blue and white to maintain brand recognition. Minor adjustments have refined the grays and accent blues for digital clarity.
Where CeraVe uses each color
- Primary
CeraVe Blue is used in the logo, main navigation, and key call-to-action buttons.
- Secondary
CeraVe Aqua appears in highlights, links, and select product packaging.
- Accent
CeraVe Light Blue is used for backgrounds, hover states, and subtle UI accents.
- Backgrounds
CeraVe White and Light Gray are used as page and card backgrounds throughout the website and packaging.
- Text
Charcoal and Slate are used for primary and secondary text, ensuring strong contrast and readability.
- Semantic
Green, Yellow, and Red are reserved for success, warning, and error messages in digital interfaces.
CeraVe color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official CeraVe brand color is CeraVe Blue, with the hex code #2B6EB2.
CeraVe Blue (#2B6EB2) is RGB(43, 110, 178) and CMYK(76, 38, 0, 30).
CeraVe uses Light Gray (#F6F7F9), Border Gray (#D9E1E8), Slate (#4F5B62), and Muted Gray (#8A99A8) for backgrounds, borders, and text.
Use CeraVe Blue (#2B6EB2) for primary actions and branding, with white and grays for backgrounds and surfaces. Accent blues and semantic colors should be used sparingly to maintain clarity and brand consistency.
The secondary color is CeraVe Aqua, #00ADEF, and the accent is CeraVe Light Blue, #6EC1E4. 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 CeraVe's colors consistently when it generates UI.
Make something in the spirit of CeraVe
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.