Cetaphil color palette
ConsumerCetaphil's color identity centers on a distinctive blue and green palette, reflecting its gentle and dermatologically trusted positioning. The brand uses clean, clinical neutrals and soft accent colors for clarity and approachability.
cetaphil.comCetaphil colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Cetaphil BluePrimary0, 107, 166
- Cetaphil GreenSecondary107, 192, 72
- Cetaphil YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Cetaphil WhiteBackground255, 255, 255
- Cetaphil Light GraySurface245, 247, 250
- Cetaphil Soft BorderBorder217, 226, 236
Text
Three tiers of copy.- Cetaphil CharcoalText33, 43, 54
- Cetaphil Medium GraySecondary text99, 115, 129
- Cetaphil Muted GrayMuted text174, 183, 194
Semantic
Feedback and state colors.- Cetaphil GreenSuccess107, 192, 72
- Cetaphil YellowWarning255, 214, 0
- Cetaphil RedError229, 57, 53
- Cetaphil Info BlueInfo0, 147, 215
Use Cetaphil's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
cetaphil-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0093D7;
--error: #E53935;
--accent: #FFD600;
--border: #D9E2EC;
--primary: #006BA6;
--success: #6BC048;
--surface: #F5F7FA;
--warning: #FFD600;
--secondary: #6BC048;
--text-muted: #AEB7C2;
--background: #FFFFFF;
--text-primary: #212B36;
--text-secondary: #637381;
}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.3:1
Pass
Text on surface
Needs 4.5:1 for body text
13.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.9: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.0:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Cetaphil background, border and text colors
The quiet part of the Cetaphil palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Cetaphil WhiteBackground
- HEX
- RGB
- HSL
- Cetaphil Light GraySurface
- HEX
- RGB
- HSL
- Cetaphil Soft BorderBorder
- HEX
- RGB
- HSL
- Cetaphil CharcoalText
- HEX
- RGB
- HSL
- Cetaphil Medium GraySecondary text
- HEX
- RGB
- HSL
- Cetaphil Muted GrayMuted text
- HEX
- RGB
- HSL
About Cetaphil's colors
Cetaphil's palette uses a harmonious blue and green as its core, supported by clean whites and soft grays for a clinical, trustworthy feel. The yellow accent adds gentle warmth and approachability.
Primary blue and green are adjacent on the color wheel, creating a calm, unified look.
Yellow accent provides contrast and draws attention to CTAs.
Neutrals balance the palette for clarity and accessibility.
Psychology
Blue conveys trust, safety, and clinical expertise, while green signals gentleness and care. The yellow accent introduces optimism and friendliness.
Evolution
Cetaphil's palette has remained consistent, with blue and green as long-standing core colors. Recent updates have refined the neutrals and accent tones for modern digital use.
Where Cetaphil uses each color
- Primary
Cetaphil Blue is used for navigation bars, headers, and key brand elements.
- Secondary
Cetaphil Green appears on packaging, buttons, and highlights.
- Accent
Cetaphil Yellow is used for call-to-action buttons and important highlights.
- Backgrounds
Cetaphil White and Light Gray are used for page backgrounds and surfaces.
- Text
Charcoal and Medium Gray are used for primary and secondary text throughout the website and packaging.
- Semantic
Green is used for success states, yellow for warnings, red for errors, and Info Blue for informational highlights.
Cetaphil color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Cetaphil brand color is Cetaphil Blue, hex code #006BA6.
Cetaphil Blue (#006BA6) is RGB(0, 107, 166) and CMYK(100, 36, 0, 35).
Cetaphil uses Light Gray (#F5F7FA), Soft Border (#D9E2EC), Medium Gray (#637381), and Muted Gray (#AEB7C2) for backgrounds, borders, and muted text.
Use Cetaphil Blue for primary navigation and branding, Green for highlights and buttons, and Yellow for accents. Neutrals support readability and clean layouts.
The secondary color is Cetaphil Green, #6BC048, and the accent is Cetaphil Yellow, #FFD600. 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 Cetaphil's colors consistently when it generates UI.
Make something in the spirit of Cetaphil
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.