#6F57A5 + #C677CD + #C39BBE + #BEE4C8 + #8FDDBC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#6F57A5

Deep Indigo · SlateBlue · Navy Blue

HEX

#6F57A5

RGB

rgb(111, 87, 165)

HSL

hsl(258, 31%, 49%)

HSB

hsb(258, 47%, 65%)

CMYK

cmyk(33%, 47%, 0%, 35%)

Oklch

oklch(51.7% 0.121 296.1)

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

#C677CD

Lilac · Orchid · Lilac Purple

HEX

#C677CD

RGB

rgb(198, 119, 205)

HSL

hsl(295, 46%, 64%)

HSB

hsb(295, 42%, 80%)

CMYK

cmyk(3%, 42%, 0%, 20%)

Oklch

oklch(68.5% 0.149 324.1)

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

#C39BBE

Mauve · DarkGray · Lilac Purple

HEX

#C39BBE

RGB

rgb(195, 155, 190)

HSL

hsl(308, 25%, 69%)

HSB

hsb(308, 21%, 76%)

CMYK

cmyk(0%, 21%, 3%, 24%)

Oklch

oklch(73.7% 0.067 330.4)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#BEE4C8

Celadon · LightGray · Mint Green

HEX

#BEE4C8

RGB

rgb(190, 228, 200)

HSL

hsl(136, 41%, 82%)

HSB

hsb(136, 17%, 89%)

CMYK

cmyk(17%, 0%, 12%, 11%)

Oklch

oklch(88.4% 0.055 153.2)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#8FDDBC

Jade · LightGreen · Apple Green

HEX

#8FDDBC

RGB

rgb(143, 221, 188)

HSL

hsl(155, 53%, 71%)

HSB

hsb(155, 35%, 87%)

CMYK

cmyk(35%, 0%, 15%, 13%)

Oklch

oklch(83.8% 0.091 165.7)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6F57A5

8CA456

Analogous

5666A4

6F57A5

9456A4

Triadic

6F57A5

A46D56

56A46D

Split-Comp.

6F57A5

A49456

66A456

Tetradic

6F57A5

A45666

8CA456

56A494

Contrast Matrix WCAG 2.1 Contrast

6F57A5	C677CD	C39BBE	BEE4C8	8FDDBC
—	1.9 Fail	2.4 Fail	4.2 AA Large	3.7 AA Large
1.9 Fail	—	1.3 Fail	2.2 Fail	1.9 Fail
2.4 Fail	1.3 Fail	—	1.7 Fail	1.5 Fail
4.2 AA Large	2.2 Fail	1.7 Fail	—	1.1 Fail
3.7 AA Large	1.9 Fail	1.5 Fail	1.1 Fail	—

White BG

5.9AA

3.0AA Large

2.4Fail

1.4Fail

1.6Fail

Black BG

3.6AA Large

6.9AA

8.8AAA

15.1AAA

13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

656492

A4A3B8

B2B1B6

CECFCF

B1B1C4

Deuteranopia

66688E

A8AEB3

B4B7B4

CCC9D0

ACA6C6

Tritanopia

6E8380

C2A8A4

C1AFAD

C0D4D5

93CACC

Achromatopsia

676767

989898

ABABAB

D5D5D5

C2C2C2

Shades & Tints Shades & Tints

#6F57A5

Dark

Light

#C677CD

Dark

Light

#C39BBE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6f57a5;
  --color-2: #c677cd;
  --color-3: #c39bbe;
  --color-4: #bee4c8;
  --color-5: #8fddbc;
}

SCSS

$color-1: #6f57a5;
$color-2: #c677cd;
$color-3: #c39bbe;
$color-4: #bee4c8;
$color-5: #8fddbc;

TAILWIND

colors: {
  'brand-1': '#6f57a5',
  'brand-2': '#c677cd',
  'brand-3': '#c39bbe',
  'brand-4': '#bee4c8',
  'brand-5': '#8fddbc',
}

RGB Array

[111, 87, 165], [198, 119, 205], [195, 155, 190], [190, 228, 200], [143, 221, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6F57A5, #C677CD, #C39BBE, #BEE4C8, #8FDDBC is ideal for: health products, baby brands, fresh-style blogs. 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: #6f57a5; --color-2: #c677cd; --color-3: #c39bbe; --color-4: #bee4c8; --color-5: #8fddbc. 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. 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