Lush color palette
ConsumerLush uses a bold, high-contrast color system centered on black and white, reflecting its handmade, ethical, and minimalistic brand identity. The palette is simple and striking, with black as the dominant color, complemented by white and subtle gray tones for clarity and emphasis.
lush.comLush colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Lush BlackPrimary0, 0, 0
- Lush WhiteSecondary255, 255, 255
- Lush Light GrayAccent246, 246, 246
Surfaces
Page, cards and dividers.- Lush White BackgroundBackground255, 255, 255
- Lush Surface GraySurface246, 246, 246
- Lush Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Lush Black TextText0, 0, 0
- Lush Medium Gray TextSecondary text109, 109, 109
- Lush Muted Gray TextMuted text163, 163, 163
Semantic
Feedback and state colors.- Lush GreenSuccess0, 129, 62
- Lush YellowWarning246, 167, 0
- Lush RedError230, 0, 38
- Lush BlueInfo0, 120, 168
Use Lush's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
lush-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0078A8;
--error: #E60026;
--accent: #F6F6F6;
--border: #E5E5E5;
--primary: #000000;
--success: #00813E;
--surface: #F6F6F6;
--warning: #F6A700;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--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
21.0:1
Pass
Text on surface
Needs 4.5:1 for body text
19.4: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
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Lush gray and neutral colors
The quiet part of the Lush palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Lush White BackgroundBackground
- HEX
- RGB
- HSL
- Lush Surface GraySurface
- HEX
- RGB
- HSL
- Lush Border GrayBorder
- HEX
- RGB
- HSL
- Lush Black TextText
- HEX
- RGB
- HSL
- Lush Medium Gray TextSecondary text
- HEX
- RGB
- HSL
- Lush Muted Gray TextMuted text
- HEX
- RGB
- HSL
About Lush's colors
Lush's color system is built on a stark black-and-white contrast, emphasizing clarity and ethical simplicity. Occasional use of green, yellow, and red supports semantic messaging and aligns with the brand's natural ethos.
Primary black contrasts with white for maximum legibility.
Accent and surface grays provide subtle depth and separation.
Semantic colors (green, yellow, red, blue) are reserved for messaging and alerts.
Psychology
Black conveys authority, quality, and a handcrafted feel, while white suggests purity and transparency. The restrained palette communicates trust and ethical values.
Evolution
Lush has maintained a consistent black-and-white palette since its inception, reinforcing brand recognition. The introduction of semantic colors for digital interfaces is a recent adaptation for accessibility and clarity.
Where Lush uses each color
- Primary
Lush Black is used for logos, navigation bars, and primary headings.
- Secondary
Lush White appears as the main website background and on product packaging.
- Accent
Lush Light Gray is used for backgrounds, cards, and subtle UI elements.
- Backgrounds
Lush White Background is the default for most pages and product displays.
- Text
Lush Black Text is used for primary content, while grays are used for secondary and muted text.
- Semantic
Lush Green, Yellow, Red, and Blue are used for success, warning, error, and informational messages respectively.
Lush color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Lush brand color is black, with the hex code #000000.
Lush Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100).
Lush uses several neutral tones, including Lush Light Gray (#F6F6F6), Lush Border Gray (#E5E5E5), and Lush Medium Gray Text (#6D6D6D).
Use Lush Black (#000000) and Lush White (#FFFFFF) for primary elements, with grays for backgrounds and borders; semantic colors are reserved for alerts and status messaging.
The secondary color is Lush White, #FFFFFF, and the accent is Lush Light Gray, #F6F6F6. 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 Lush's colors consistently when it generates UI.
Make something in the spirit of Lush
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.