CoverGirl color palette
ConsumerCoverGirl's color identity centers on a bold, modern black paired with crisp white and soft neutrals, reflecting its accessible, inclusive beauty ethos. The palette is minimal, with black as the primary color, accented by subtle grays and occasional pinks in product or campaign contexts.
covergirl.comCoverGirl colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- CoverGirl BlackPrimary0, 0, 0
- CoverGirl WhiteSecondary255, 255, 255
- CoverGirl Blush PinkAccent246, 209, 215
Surfaces
Page, cards and dividers.- CoverGirl Light GrayBackground247, 247, 247
- CoverGirl Soft GraySurface229, 229, 229
- CoverGirl Border GrayBorder204, 204, 204
Text
Three tiers of copy.- CoverGirl BlackText0, 0, 0
- CoverGirl Medium GraySecondary text109, 109, 109
- CoverGirl Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- CoverGirl Success GreenSuccess93, 187, 99
- CoverGirl Warning YellowWarning255, 217, 102
- CoverGirl Error RedError233, 79, 55
- CoverGirl Info BlueInfo74, 144, 226
Use CoverGirl's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
covergirl-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4A90E2;
--error: #E94F37;
--accent: #F6D1D7;
--border: #CCCCCC;
--primary: #000000;
--success: #5DBB63;
--surface: #E5E5E5;
--warning: #FFD966;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #F7F7F7;
--text-primary: #000000;
--text-secondary: #6D6D6D;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.6:1
Pass
Text on surface
Needs 4.5:1 for body text
16.7: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.1:1
Fail
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.0:1
Fail
CoverGirl gray and neutral colors
The quiet part of the CoverGirl palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- CoverGirl Light GrayBackground
- HEX
- RGB
- HSL
- CoverGirl Soft GraySurface
- HEX
- RGB
- HSL
- CoverGirl Border GrayBorder
- HEX
- RGB
- HSL
- CoverGirl BlackText
- HEX
- RGB
- HSL
- CoverGirl Medium GraySecondary text
- HEX
- RGB
- HSL
- CoverGirl Muted GrayMuted text
- HEX
- RGB
- HSL
About CoverGirl's colors
CoverGirl's palette is rooted in monochrome simplicity, using black and white to convey modernity and inclusivity. Soft pink and neutral grays add warmth and approachability to the brand's visual system.
Primary black contrasts with white for maximum legibility.
Accent pink is used sparingly for highlights and calls to action.
Grays create hierarchy and structure in backgrounds and UI elements.
Psychology
Black communicates sophistication and confidence, while soft pink and gray tones evoke approachability and calm. The palette balances boldness with accessibility, appealing to a wide audience.
Evolution
CoverGirl's palette has shifted from more colorful, playful tones to a minimal, black-and-white system since its 2018 rebrand. The current palette has remained stable, emphasizing clarity and inclusivity.
Where CoverGirl uses each color
- Primary
Used for the CoverGirl logo, navigation bar, and primary text.
- Secondary
Applied as background color and for negative space throughout the website and packaging.
- Accent
Appears in buttons, highlights, and promotional banners.
- Backgrounds
Light gray backgrounds are used on product pages and UI surfaces.
- Text
Black for headlines, medium gray for secondary text, and muted gray for captions or disabled states.
- Semantic
Green, yellow, red, and blue are used for status messages and alerts in digital interfaces.
CoverGirl color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official CoverGirl brand color is black, with the hex code #000000.
CoverGirl Black (#000000) is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
CoverGirl uses a range of grays: Light Gray (#F7F7F7), Soft Gray (#E5E5E5), Medium Gray (#6D6D6D), and Muted Gray (#A3A3A3) for backgrounds and text.
Use CoverGirl Black (#000000) for logos and primary text, white (#FFFFFF) for backgrounds, and blush pink (#F6D1D7) for accents or highlights. Grays structure the UI, while semantic colors are reserved for status and alerts.
The secondary color is CoverGirl White, #FFFFFF, and the accent is CoverGirl Blush Pink, #F6D1D7. 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 CoverGirl's colors consistently when it generates UI.
Make something in the spirit of CoverGirl
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.