Aesop color palette
ConsumerAesop's brand color system is defined by a refined, minimalist palette of warm neutrals and deep browns, reflecting its apothecary heritage and understated luxury. The colors are used consistently across packaging, retail environments, and digital interfaces.
aesop.comAesop colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Aesop BrownPrimary75, 58, 47
- Aesop SandSecondary215, 206, 199
- Aesop TaupeAccent168, 159, 148
Surfaces
Page, cards and dividers.- Aesop Off-WhiteBackground246, 245, 243
- Aesop Light StoneSurface233, 230, 225
- Aesop Border GrayBorder177, 167, 155
Text
Three tiers of copy.- Aesop Text BrownText34, 32, 28
- Aesop Text TaupeSecondary text110, 102, 94
- Aesop Muted TaupeMuted text168, 159, 148
Semantic
Feedback and state colors.- Aesop OliveSuccess124, 111, 87
- Aesop OchreWarning188, 161, 106
- Aesop ClayError160, 90, 59
- Aesop SlateInfo138, 129, 117
Use Aesop's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
aesop-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #8A8175;
--error: #A05A3B;
--accent: #A89F94;
--border: #B1A79B;
--primary: #4B3A2F;
--success: #7C6F57;
--surface: #E9E6E1;
--warning: #BCA16A;
--secondary: #D7CEC7;
--text-muted: #A89F94;
--background: #F6F5F3;
--text-primary: #22201C;
--text-secondary: #6E665E;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
13.1: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.5:1
Pass
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.1:1
Fail
Aesop gray and neutral colors
The quiet part of the Aesop palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Aesop Off-WhiteBackground
- HEX
- RGB
- HSL
- Aesop Light StoneSurface
- HEX
- RGB
- HSL
- Aesop Border GrayBorder
- HEX
- RGB
- HSL
- Aesop Text BrownText
- HEX
- RGB
- HSL
- Aesop Text TaupeSecondary text
- HEX
- RGB
- HSL
- Aesop Muted TaupeMuted text
- HEX
- RGB
- HSL
About Aesop's colors
Aesop's palette is rooted in warm, earthy neutrals, evoking natural materials and timeless design. The restrained use of color supports a sense of calm and sophistication.
Primary brown contrasts with off-white backgrounds for clarity.
Accent taupes and stones provide subtle depth and hierarchy.
All tones are harmonized with muted, low-saturation values.
Psychology
The palette conveys trust, warmth, and a sense of groundedness, aligning with Aesop's apothecary-inspired ethos. The absence of bright colors emphasizes authenticity and calm.
Evolution
Aesop's color palette has remained largely unchanged since the brand's inception, maintaining its signature browns and neutrals. This consistency reinforces brand recognition and a timeless identity.
Where Aesop uses each color
- Primary
Used for logo, navigation bar, and key headings on the website and packaging.
- Secondary
Applied to backgrounds, product labels, and secondary navigation elements.
- Accent
Used for subtle highlights, dividers, and interactive elements like buttons.
- Backgrounds
Off-white and light stone colors dominate page backgrounds and product displays.
- Text
Text brown is used for primary body text, with taupe and muted taupe for secondary and muted text.
- Semantic
Olive, ochre, clay, and slate are used for status indicators, alerts, and informational banners.
Aesop color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Aesop brand color is Aesop Brown, hex #4B3A2F. This color is used across the logo and key brand touchpoints.
Aesop Brown (#4B3A2F) in RGB is (75, 58, 47). For CMYK, it is approximately (0, 23, 37, 71).
Aesop uses a range of neutrals including Aesop Sand (#D7CEC7), Aesop Off-White (#F6F5F3), and Aesop Light Stone (#E9E6E1) for backgrounds and surfaces.
The palette should be applied with restraint, prioritizing Aesop Brown for key elements and neutrals for backgrounds. Accent and semantic colors are used sparingly for emphasis and status.
The secondary color is Aesop Sand, #D7CEC7, and the accent is Aesop Taupe, #A89F94. 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 Aesop's colors consistently when it generates UI.
Make something in the spirit of Aesop
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.