The Ordinary color palette
ConsumerThe Ordinary's color identity is minimalist, relying on a monochromatic palette of neutral grays, white, and black to reflect its clinical, ingredient-focused approach. The brand avoids vibrant colors, emphasizing simplicity and transparency.
theordinary.comThe Ordinary colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- The Ordinary CharcoalPrimary34, 34, 34
- The Ordinary Mid GraySecondary109, 109, 109
- The Ordinary Light GrayAccent191, 191, 191
Surfaces
Page, cards and dividers.- The Ordinary WhiteBackground255, 255, 255
- The Ordinary Off WhiteSurface247, 247, 247
- The Ordinary Border GrayBorder224, 224, 224
Text
Three tiers of copy.- The Ordinary CharcoalText34, 34, 34
- The Ordinary Mid GraySecondary text109, 109, 109
- The Ordinary Light GrayMuted text191, 191, 191
Semantic
Feedback and state colors.- The Ordinary Success GreenSuccess92, 138, 94
- The Ordinary Warning GoldWarning194, 161, 77
- The Ordinary Error RedError176, 76, 76
- The Ordinary Info GrayInfo109, 109, 109
Use The Ordinary's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
the-ordinary-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #6D6D6D;
--error: #B04C4C;
--accent: #BFBFBF;
--border: #E0E0E0;
--primary: #222222;
--success: #5C8A5E;
--surface: #F7F7F7;
--warning: #C2A14D;
--secondary: #6D6D6D;
--text-muted: #BFBFBF;
--background: #FFFFFF;
--text-primary: #222222;
--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
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.8:1
Pass
Muted text on background
Needs 3:1 for large text
1.8:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
The Ordinary gray and neutral colors
The quiet part of the The Ordinary palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- The Ordinary WhiteBackground
- HEX
- RGB
- HSL
- The Ordinary Off WhiteSurface
- HEX
- RGB
- HSL
- The Ordinary Border GrayBorder
- HEX
- RGB
- HSL
- The Ordinary CharcoalText
- HEX
- RGB
- HSL
- The Ordinary Mid GraySecondary text
- HEX
- RGB
- HSL
- The Ordinary Light GrayMuted text
- HEX
- RGB
- HSL
About The Ordinary's colors
The Ordinary’s palette is rooted in grayscale, supporting a clinical and honest brand persona. The use of muted neutrals ensures product and ingredient information remain the focus.
Monochromatic neutrals dominate the palette.
Subtle accent colors are reserved for status messages.
Minimal contrast is used, except for text and key UI elements.
Psychology
The neutral colors evoke trust, clarity, and a sense of professionalism. The absence of bright colors reinforces the brand’s focus on transparency and science.
Evolution
The palette has remained consistent since launch, with only minor adjustments to gray tones for accessibility. The brand has avoided introducing vibrant or trendy colors, maintaining its minimalist identity.
Where The Ordinary uses each color
- Primary
Used for main headings, logo, and navigation text.
- Secondary
Applied to subheadings, secondary buttons, and supporting text.
- Accent
Used for muted highlights, dividers, and subtle UI elements.
- Backgrounds
Pure white is the primary background for all pages and packaging.
- Text
Charcoal and mid gray are used for primary and secondary text, respectively.
- Semantic
Green, gold, and red are used for success, warning, and error messages in forms and notifications.
The Ordinary color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Ordinary's primary brand color is #222222, a deep charcoal gray used for the logo and main text.
The RGB value for #222222 is (34, 34, 34). In CMYK, it is approximately (0, 0, 0, 87).
The Ordinary uses a range of grays: #222222 (Charcoal), #6D6D6D (Mid Gray), #BFBFBF (Light Gray), and #F7F7F7 (Off White) for UI and packaging.
Use the monochromatic grays for backgrounds, text, and UI elements, reserving green (#5C8A5E), gold (#C2A14D), and red (#B04C4C) only for semantic states like success, warning, and error.
The secondary color is The Ordinary Mid Gray, #6D6D6D, and the accent is The Ordinary Light Gray, #BFBFBF. 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 The Ordinary's colors consistently when it generates UI.
Make something in the spirit of The Ordinary
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.