Maybelline color palette
ConsumerMaybelline's color identity centers on a bold, high-contrast palette with a signature deep blue and strong black, reflecting its modern, urban brand image. The palette uses crisp neutrals and subtle accents to support product imagery and editorial content.
maybelline.comMaybelline colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Maybelline Deep BluePrimary27, 44, 90
- Maybelline BlackSecondary0, 0, 0
- Maybelline Pink AccentAccent255, 60, 110
Surfaces
Page, cards and dividers.- Maybelline WhiteBackground255, 255, 255
- Maybelline Light GraySurface245, 245, 247
- Maybelline Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Maybelline CharcoalText34, 34, 34
- Maybelline Medium GraySecondary text102, 102, 102
- Maybelline Muted GrayMuted text164, 164, 164
Semantic
Feedback and state colors.- Maybelline Success GreenSuccess60, 184, 120
- Maybelline Warning YellowWarning255, 180, 0
- Maybelline Error RedError233, 79, 55
- Maybelline Info BlueInfo0, 150, 199
Use Maybelline's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
maybelline-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0096C7;
--error: #E94F37;
--accent: #FF3C6E;
--border: #E0E0E0;
--primary: #1B2C5A;
--success: #3CB878;
--surface: #F5F5F7;
--warning: #FFB400;
--secondary: #000000;
--text-muted: #A4A4A4;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #666666;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Maybelline gray and neutral colors
The quiet part of the Maybelline palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Maybelline WhiteBackground
- HEX
- RGB
- HSL
- Maybelline Light GraySurface
- HEX
- RGB
- HSL
- Maybelline Border GrayBorder
- HEX
- RGB
- HSL
- Maybelline CharcoalText
- HEX
- RGB
- HSL
- Maybelline Medium GraySecondary text
- HEX
- RGB
- HSL
- Maybelline Muted GrayMuted text
- HEX
- RGB
- HSL
About Maybelline's colors
Maybelline's palette is built on deep blue and black, conveying confidence and sophistication, with pink and clean neutrals for vibrancy and clarity. The system ensures product visuals remain the focus while maintaining brand consistency.
Primary blue contrasts with white and black for high legibility.
Accent pink is used sparingly for highlights and CTAs.
Grays provide a neutral backdrop for product imagery.
Psychology
The deep blue and black evoke trust, authority, and modernity, while the pink accent adds a touch of energy and femininity. The neutral grays and whites keep the experience clean and approachable.
Evolution
Maybelline's core palette has remained largely stable, with the deep blue and black in use for decades. Recent updates have refined accent and neutral tones to align with digital and packaging needs.
Where Maybelline uses each color
- Primary
Used in the logo, navigation bar, and key brand headers.
- Secondary
Dominates backgrounds, footers, and product packaging.
- Accent
Highlights call-to-action buttons, links, and promotional banners.
- Backgrounds
White and light gray are used for page backgrounds and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the site.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
Maybelline color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Maybelline primary brand color is #1B2C5A, known as Maybelline Deep Blue.
Maybelline Deep Blue (#1B2C5A) in RGB is (27, 44, 90); in CMYK it is approximately (70, 51, 0, 65).
Maybelline uses #F5F5F7 (Light Gray), #E0E0E0 (Border Gray), #222222 (Charcoal), #666666 (Medium Gray), and #A4A4A4 (Muted Gray) for UI backgrounds and text.
Use Deep Blue (#1B2C5A) for primary branding elements, black and white for backgrounds, and pink (#FF3C6E) for accents and CTAs. Grays support text and UI surfaces for clarity and hierarchy.
The secondary color is Maybelline Black, #000000, and the accent is Maybelline Pink Accent, #FF3C6E. 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 Maybelline's colors consistently when it generates UI.
Make something in the spirit of Maybelline
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.