← Back to Editor

#708C87 · #C6A8C4 · #E3CEEA · #EDE3F3 · #9DC29F

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

#708C87

Mineral Blue · SlateGray · Mint Ice

HEX
#708C87
RGB
rgb(112, 140, 135)
HSL
hsl(169, 11%, 49%)
HSB
hsb(169, 20%, 55%)
CMYK
cmyk(20%, 0%, 4%, 45%)
Oklch
oklch(61.7% 0.033 183.2)

TraditionalMineral Blue」· PaintMint Ice」· Creative Blush Sunrise

#C6A8C4

Mauve · Silver · Lilac Purple

HEX
#C6A8C4
RGB
rgb(198, 168, 196)
HSL
hsl(304, 21%, 72%)
HSB
hsb(304, 15%, 78%)
CMYK
cmyk(0%, 15%, 1%, 22%)
Oklch
oklch(76.7% 0.052 328.2)

TraditionalMauve」· PaintLilac Purple」· Creative Rose Petal

#E3CEEA

Lilac · LightGray · Lavender

HEX
#E3CEEA
RGB
rgb(227, 206, 234)
HSL
hsl(285, 40%, 86%)
HSB
hsb(285, 12%, 92%)
CMYK
cmyk(3%, 12%, 0%, 8%)
Oklch
oklch(87.7% 0.044 317.7)

TraditionalLilac」· PaintLavender」· Creative Lavender Dream

#EDE3F3

Lilac · Lavender · Lavender

HEX
#EDE3F3
RGB
rgb(237, 227, 243)
HSL
hsl(278, 40%, 92%)
HSB
hsb(278, 7%, 95%)
CMYK
cmyk(2%, 7%, 0%, 5%)
Oklch
oklch(92.8% 0.024 313.1)

TraditionalLilac」· PaintLavender」· Creative Lavender Dream

#9DC29F

Celadon · DarkSeaGreen · Apple Green

HEX
#9DC29F
RGB
rgb(157, 194, 159)
HSL
hsl(123, 23%, 69%)
HSB
hsb(123, 19%, 76%)
CMYK
cmyk(19%, 0%, 18%, 24%)
Oklch
oklch(77.7% 0.063 146.4)

TraditionalCeladon」· PaintApple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

708C87
8B6F74

Analogous

6F8B78
708C87
6F828B

Triadic

708C87
866F8B
8B866F

Split-Comp.

708C87
8B6F82
8B786F

Tetradic

708C87
786F8B
8B6F74
828B6F

Contrast Matrix WCAG 2.1 Contrast

708C87
C6A8C4
E3CEEA
EDE3F3
9DC29F
1.7
Fail
2.5
Fail
2.9
Fail
1.8
Fail
1.7
Fail
1.5
Fail
1.7
Fail
1.1
Fail
2.5
Fail
1.5
Fail
1.2
Fail
1.3
Fail
2.9
Fail
1.7
Fail
1.2
Fail
1.6
Fail
1.8
Fail
1.1
Fail
1.3
Fail
1.6
Fail
White BG
3.6AA Large
2.1Fail
1.5Fail
1.2Fail
2.0Fail
Black BG
5.8AA
9.8AAA
14.3AAA
16.9AAA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7C88
B9B9BD
DADAE3
E9E9EF
ADADA7

Deuteranopia

7B7889
BBBDBC
DBDDE2
E9EAEE
ABA8AA

Tritanopia

718989
C5B8B7
E2DEDD
ECECEB
9FAEB0

Achromatopsia

838383
B4B4B4
D7D7D7
E8E8E8
B3B3B3

Shades & Tints Shades & Tints

#708C87

Dark
Light

#C6A8C4

Dark
Light

#E3CEEA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #708c87;
  --color-2: #c6a8c4;
  --color-3: #e3ceea;
  --color-4: #ede3f3;
  --color-5: #9dc29f;
}

SCSS

$color-1: #708c87;
$color-2: #c6a8c4;
$color-3: #e3ceea;
$color-4: #ede3f3;
$color-5: #9dc29f;

TAILWIND

colors: {
  'brand-1': '#708c87',
  'brand-2': '#c6a8c4',
  'brand-3': '#e3ceea',
  'brand-4': '#ede3f3',
  'brand-5': '#9dc29f',
}

RGB Array

[112, 140, 135], [198, 168, 196], [227, 206, 234], [237, 227, 243], [157, 194, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #708C87, #C6A8C4, #E3CEEA, #EDE3F3, #9DC29F is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #708c87; --color-2: #c6a8c4; --color-3: #e3ceea; --color-4: #ede3f3; --color-5: #9dc29f. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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