Purple color palette
ConsumerPurple is a consumer mattress and bedding brand known for its distinctive purple color palette, which emphasizes comfort and innovation. The brand uses a bold purple as its primary color, complemented by deep neutrals and clean whites for a modern, approachable look.
purple.comPurple colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Purple CorePrimary107, 30, 154
- Purple DeepSecondary75, 23, 105
- Purple LightAccent243, 239, 255
Surfaces
Page, cards and dividers.- Purple WhiteBackground255, 255, 255
- Purple SurfaceSurface246, 246, 247
- Purple BorderBorder227, 227, 230
Text
Three tiers of copy.- Purple CharcoalText45, 45, 45
- Purple CoreSecondary text107, 30, 154
- Purple MutedMuted text117, 117, 117
Semantic
Feedback and state colors.- Purple SuccessSuccess0, 182, 122
- Purple WarningWarning255, 180, 0
- Purple ErrorError224, 62, 62
- Purple InfoInfo61, 90, 254
Use Purple's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
purple-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3D5AFE;
--error: #E03E3E;
--accent: #F3EFFF;
--border: #E3E3E6;
--primary: #6B1E9A;
--success: #00B67A;
--surface: #F6F6F7;
--warning: #FFB400;
--secondary: #4B1769;
--text-muted: #757575;
--background: #FFFFFF;
--text-primary: #2D2D2D;
--text-secondary: #6B1E9A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.8:1
Pass
Text on surface
Needs 4.5:1 for body text
12.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.5:1
Pass
Muted text on background
Needs 3:1 for large text
4.6:1
Pass
Muted text on surface
Needs 3:1 for large text
4.3:1
Pass
Purple background, border and text colors
The quiet part of the Purple palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Purple WhiteBackground
- HEX
- RGB
- HSL
- Purple SurfaceSurface
- HEX
- RGB
- HSL
- Purple BorderBorder
- HEX
- RGB
- HSL
- Purple CharcoalText
- HEX
- RGB
- HSL
- Purple CoreSecondary text
- HEX
- RGB
- HSL
- Purple MutedMuted text
- HEX
- RGB
- HSL
About Purple's colors
Purple's palette is anchored by a rich, saturated purple, contrasted with deep neutrals and bright whites for clarity and approachability. The color system is designed to evoke comfort, trust, and innovation.
Primary purple is paired with deep and light purples for hierarchy.
Neutrals provide balance and legibility.
Accent colors are used sparingly for feedback and highlights.
Psychology
Purple is associated with creativity, luxury, and calm, aligning with the brand's promise of comfort and innovation. The deep neutrals and clean whites reinforce a sense of trust and modernity.
Evolution
Purple's core color palette has remained consistent since its launch, maintaining strong brand recognition. Minor adjustments have been made to accent and neutral tones for improved accessibility and digital clarity.
Where Purple uses each color
- Primary
Purple Core is used for main navigation, primary buttons, and key brand elements.
- Secondary
Purple Deep appears in headers, footers, and secondary call-to-actions.
- Accent
Purple Light is used for backgrounds, highlights, and subtle UI accents.
- Backgrounds
Purple White and Purple Surface are used as main page and section backgrounds.
- Text
Purple Charcoal is the primary text color, with Purple Core for links and highlights.
- Semantic
Success, warning, error, and info colors are used for status messages, alerts, and feedback.
Purple color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Purple brand color hex code is #6B1E9A.
The primary color #6B1E9A is RGB(107, 30, 154) and CMYK(31, 81, 0, 40).
Purple uses #2D2D2D (Purple Charcoal) for primary text and #F6F6F7 (Purple Surface) for backgrounds, providing a clean, modern neutral base.
Use Purple Core (#6B1E9A) for primary actions and branding, with neutrals for backgrounds and text to ensure accessibility and clarity.
The secondary color is Purple Deep, #4B1769, and the accent is Purple Light, #F3EFFF. Together with the primary they make up the three brand colors at the top of this page.
6 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 Purple's colors consistently when it generates UI.
Make something in the spirit of Purple
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.