HomeDevLavender color codes
Color tools

Lavender color codes

Lavender color codes for #E6E6FA — HEX, RGB, HSL, HSV, shades, named lavenders, and copy-ready CSS.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Explore the base color

Review HEX, RGB, HSL, and HSV for lavender, then browse shades, tints, tones, and hues.

2

Pick a variation or named shade

Click a generated strip or a CSS named lavender shade to load codes and harmonies.

3

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS lavender#E6E6FA = rgb(230, 230, 250) = hsl(240°, 67%, 94%)
Shadesame H/S, lower L (mix toward black)
Tintsame H/S, higher L (mix toward white)
ComplementH + 180° (soft sage/yellow-green)
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.

Example colors

Common picks with formula and result.

ϟ

Base lavender

CSS keyword

color: lavender;
#E6E6FA · rgb(230, 230, 250)
ϟ

Related shade

Family neighbor

thistle
#D8BFD8
ϟ

UI accent

Background use

background-color: #E6E6FA;
Pair with readable text
ϟ

Complement direction

Harmony hint

H + 180°
Toward soft sage/yellow-green

Lavender color family specification

Version 1.0.0

Definition
Lavender in CSS centers on the keyword lavender (#E6E6FA / rgb(230, 230, 250) / hsl(240°, 67%, 94%)). Designers use lavender families for soft, calm, and delicate on screens.
What it calculates
Lavender family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs
  • Selected variation chip, named shade, or harmony swatch
  • Section mode (variations, named shades, harmonies)
Outputs
  • HEX, RGB, HSL, HSV
  • Optional CSS keyword
  • Contrast ratios on white and black
Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle

Lavender is a pastel wash for backgrounds and wellness UIs, not for small text on white.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root {
  --lavender: #e6e6fa;
  --lavender-deep: #9370db;
  --lavender-ink: #4b0082;
}

.banner {
  background-color: var(--lavender);
  color: #ffffff;
}
Popular CSS lavenders
NameHEXRGBFeel
lavender#E6E6FA230, 230, 250Base keyword
thistle#D8BFD8216, 191, 216Named shade
plum#DDA0DD221, 160, 221Named shade
violet#EE82EE238, 130, 238Named shade
mediumpurple#9370DB147, 112, 219Mid tone
lavenderblush#FFF0F5255, 240, 245Light tint
ghostwhite#F8F8FF248, 248, 255Named shade
purple#800080128, 0, 128Named shade
blueviolet#8A2BE2138, 43, 226Named shade
darkmagenta#8B008B139, 0, 139Dark shade
darkorchid#9932CC153, 50, 204Dark shade
darkviolet#9400D3148, 0, 211Dark shade
i Related hues may appear in Named shades when useful for lavender-adjacent palettes.
Assumptions
  • Base keyword lavender = #E6E6FA in sRGB.
  • Named list uses CSS Color Module keywords in/near the lavender family.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL/HSV: hue degrees; S/L/V percent
Boundary conditions
  • Lightness/saturation steps stay within visible ranges (~0–100%).
  • Hue offsets wrap modulo 360°.
Example
lavender → #E6E6FA; complementary toward soft sage/yellow-green
Validation cases
  • lavender → #E6E6FA
  • thistle → #D8BFD8
  • shade of lavender → same hue, lower lightness
  • tint of lavender → same hue, higher lightness
Sources
  • CSS Color Module named colors (lavender family)
  • Classical shade/tint/tone and hue-harmony geometry
  • WCAG relative-luminance contrast
Calculation version
1.0.0
◉ Purple color codes › ◉ Pink color codes › ◉ Blue color codes › # HTML color codes › ◌ Color wheel ›

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for lavender?

The CSS named color lavender is #E6E6FA, equal to rgb(230, 230, 250) and hsl(240°, 67%, 94%).

What is the difference between lavender and thistle?

Lavender is very light. Thistle is a bit deeper and grayer.

What colors go with lavender?

White, silver, and muted greens keep lavender serene. Deep purple anchors it. Always check text contrast.

Is lavender good for body text?

Lavender text on white fails contrast—use dark purple on lavender backgrounds instead.

How do I use lavender in CSS?

Use color: lavender;, color: #E6E6FA;, or color: rgb(230, 230, 250); on any property that accepts a <color> value, including background-color and border-color.