← Back to Editor

#716A9E · #9B8AD8 · #C7A8E6 · #EDC5E7 · #F2E6EB

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#716A9E

Deep Indigo · SlateGray · Navy Blue

HEX
#716A9E
RGB
rgb(113, 106, 158)
HSL
hsl(248, 21%, 52%)
HSB
hsb(248, 33%, 62%)
CMYK
cmyk(28%, 33%, 0%, 38%)
Oklch
oklch(55.2% 0.080 289.7)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#9B8AD8

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#9B8AD8
RGB
rgb(155, 138, 216)
HSL
hsl(253, 50%, 69%)
HSB
hsb(253, 36%, 85%)
CMYK
cmyk(28%, 36%, 0%, 15%)
Oklch
oklch(67.9% 0.114 293.1)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#C7A8E6

Lilac · LightSteelBlue · Lilac Purple

HEX
#C7A8E6
RGB
rgb(199, 168, 230)
HSL
hsl(270, 55%, 78%)
HSB
hsb(270, 27%, 90%)
CMYK
cmyk(13%, 27%, 0%, 10%)
Oklch
oklch(78.0% 0.092 307.1)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#EDC5E7

Mauve · Pink · Lavender

HEX
#EDC5E7
RGB
rgb(237, 197, 231)
HSL
hsl(309, 53%, 85%)
HSB
hsb(309, 17%, 93%)
CMYK
cmyk(0%, 17%, 3%, 7%)
Oklch
oklch(86.8% 0.063 331.2)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#F2E6EB

Rouge · Linen · Cherry Blossom

HEX
#F2E6EB
RGB
rgb(242, 230, 235)
HSL
hsl(335, 32%, 93%)
HSB
hsb(335, 5%, 95%)
CMYK
cmyk(0%, 5%, 3%, 5%)
Oklch
oklch(93.6% 0.015 350.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

716A9E
979E6B

Analogous

6B7E9E
716A9E
8B6B9E

Triadic

716A9E
9E726B
6B9E72

Split-Comp.

716A9E
9E8B6B
7E9E6B

Tetradic

716A9E
9E6B7E
979E6B
6B9E8B

Contrast Matrix WCAG 2.1 Contrast

716A9E
9B8AD8
C7A8E6
EDC5E7
F2E6EB
—
1.6
Fail
2.4
Fail
3.2
AA Large
4.1
AA Large
1.6
Fail
—
1.4
Fail
2.0
Fail
2.5
Fail
2.4
Fail
1.4
Fail
—
1.4
Fail
1.7
Fail
3.2
AA Large
2.0
Fail
1.4
Fail
—
1.3
Fail
4.1
AA Large
2.5
Fail
1.7
Fail
1.3
Fail
—
White BG
4.9AA
3.0Fail
2.1Fail
1.5Fail
1.2Fail
Black BG
4.3AA Large
7.0AAA
10.2AAA
13.7AAA
17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6E91
9493C5
BAB9D7
DCDBDF
EDEDEA

Deuteranopia

6E6F8E
9596C1
BBBED3
DEE1DD
EEEEEA

Tritanopia

718785
9AB6B3
C5CBC9
EBD8D7
F1E9E9

Achromatopsia

727272
989898
B8B8B8
D5D5D5
EAEAEA

Shades & Tints Shades & Tints

#716A9E

Dark
Light

#9B8AD8

Dark
Light

#C7A8E6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #716a9e;
  --color-2: #9b8ad8;
  --color-3: #c7a8e6;
  --color-4: #edc5e7;
  --color-5: #f2e6eb;
}

SCSS

$color-1: #716a9e;
$color-2: #9b8ad8;
$color-3: #c7a8e6;
$color-4: #edc5e7;
$color-5: #f2e6eb;

TAILWIND

colors: {
  'brand-1': '#716a9e',
  'brand-2': '#9b8ad8',
  'brand-3': '#c7a8e6',
  'brand-4': '#edc5e7',
  'brand-5': '#f2e6eb',
}

RGB Array

[113, 106, 158], [155, 138, 216], [199, 168, 230], [237, 197, 231], [242, 230, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #716A9E, #9B8AD8, #C7A8E6, #EDC5E7, #F2E6EB is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #716a9e; --color-2: #9b8ad8; --color-3: #c7a8e6; --color-4: #edc5e7; --color-5: #f2e6eb. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color