Lavender Hex Code #E6E6FA — Copy + RGB, Shades & Pairings
Lavender hex code is #E6E6FA (RGB 230, 230, 250). Copy ten shades from pale white-lavender to deep purple, four palette pairings, and UI notes for soft elegant design.
CSS lavender
Floral lavender
Dark lavender
Lavender = #E6E6FA
CSS named color lavender — copy hex, RGB, or HSL for Figma, CSS variables, or brand tokens.
Lavender Hex Code Shades
Ten stops from airy white-lavender and blush tints through canonical lavender, floral purple, and deep indigo. Use light rows for backgrounds; mid and dark rows for navigation, type, and CTAs.
| Swatch | Shade | Hex |
|---|---|---|
| White Lavender | #F8F8FF | |
| Ghost White | #F5F5FF | |
| Lavender Blush | #FFF0F5 | |
| Pale Lavender | #DCD0FF | |
| Lavender | #E6E6FA | |
| Floral Lavender | #B57EDC | |
| Medium Purple | #9370DB | |
| Amethyst | #9966CC | |
| Dark Lavender | #734F96 | |
| Deep Purple | #4B0082 |
Lavender Color Palette Pairings
Four lavender combinations with copy-ready hex codes—wellness sage, editorial charcoal, soft luxury gold, and romantic blush accents.
Lavender + Sage + Cream (wellness calm)
Sage #B2AC88 grounds airy lavender fields; cream #FFF8F0 cards keep typography warm. Ideal for spas, meditation apps, and organic skincare where you want botanical calm without clinical white.
Lavender + Charcoal + White (modern editorial)
Charcoal #374151 headlines on white content wells with lavender #E6E6FA section bands signal creative confidence. Use floral lavender #B57EDC for links and CTAs so actions stay visible.
Lavender + Gold + Ivory (soft luxury)
Muted gold #C9A227 rules and ivory #FFFBEB backgrounds elevate lavender for jewelry, wedding stationery, and premium beauty. Reserve deep purple #4B0082 for logos and navigation only.
Lavender + Blush + Dusty rose (romantic lifestyle)
Blush #E8C4B8 and dusty rose #DCAE96 warm up cool lavender for lookbooks and bridal brands. Keep body copy in charcoal so pastel stacks do not wash out at 14px.
Lavender in UI and Brand Design
Wellness and beauty. Lavender backgrounds (#E6E6FA, #F5F5FF) reduce visual noise next to product photography and soft illustration. Pair with charcoal body copy (#374151) and floral lavender buttons (#B57EDC) for primary actions—run white-on-purple and charcoal-on-lavender pairs through the contrast checker before shipping 14px labels.
Creative portfolios and events. Lavender section bands signal imagination without the aggression of pure magenta. Use deep purple (#4B0082) for navigation chrome and amethyst (#9966CC) for hover states so affordances stay obvious on pale fields.
Wedding and lifestyle brands. Lavender blush (#FFF0F5) cards on ghost white (#F5F5FF) feel editorial and romantic. Gold accents (#C9A227) on ivory (#FFFBEB) elevate invitations and landing heroes—limit saturated purple to one CTA per viewport so checkout flows stay calm.
Dark mode. Lavender tints glow too brightly on #111827. Desaturate accent purples by 10–15% or swap to dark lavender (#734F96) for chips and badges. Re-test focus rings on both light lavender wells and dark charcoal surfaces.
Lavender vs Purple — What is the Difference?
Searchers often conflate names. Lavender (#E6E6FA) is a very light, desaturated blue-violet—94% HSL lightness—designed as a gentle wash, not a bold brand mark. Purple in UI usually means something saturated and mid-dark: medium purple (#9370DB), amethyst (#9966CC), or deep purple (#4B0082).
When stakeholders say “lavender purple hex,” they may want the pale CSS lavender for backgrounds or a richer floral lavender (#B57EDC) for logos. The shade table above lists both families so you can brief “use #E6E6FA for page chrome, #734F96 for headings” instead of debating ad hoc swatches. For adjacent soft purples, compare our mauve color reference and #C4B5FD lavender purple guide.
In print and paint, “lavender” skews even pinker than web lavender; digital handoffs should always specify hex. If packaging must match screen, note the delta between #E6E6FA and Pantone or CMYK references so manufacturing variance does not surprise brand reviewers.
If you searched lavender hex code, hex code for lavender purple, or lavender purple hex, start with #E6E6FA for canonical web lavender, then pick darker rows from the table for structure. Extend any anchor hex into hover and disabled ramps with our palette generator so tints stay on the same hue angle.
FAQ
- What is the lavender hex code?
- The CSS named color lavender is #E6E6FA, which is RGB(230, 230, 250) and HSL(240, 67%, 94%). For deeper UI accents, designers often use floral lavender #B57EDC or dark lavender #734F96.
- What is the hex code for lavender purple?
- Canonical web lavender is #E6E6FA. When people search hex code for lavender purple they may also mean medium purple #9370DB or amethyst #9966CC—document which hex maps to each token in your style guide.
- What colors go with lavender?
- Sage green (#B2AC88), cream (#FFF8F0), charcoal (#374151), gold (#C9A227), and blush pink (#E8C4B8) pair reliably with lavender. Always verify text and button contrast with a WCAG checker.
- Is lavender good for website backgrounds?
- Yes for wellness, beauty, and creative portfolios when paired with darker type colors. Use #E6E6FA or ghost white #F5F5FF for large calm surfaces; reserve medium purple and deep purple rows for navigation, links, and CTAs.
Related colors
- #C4B5FD Lavender Purple — softer violet for UI tints and luxury brands
- Pink and Purple Color — magenta and mauve mixes between pink and purple
- Purple Dream Palette — full violet ramp from #7C3AED to #EDE9FE
Build your palette
Use our free tools to create and test your color palette.