← Back to Editor

#CC8C89 · #7E8581 · #5E777E · #685F78 · #6D64CC

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CC8C89

Peach Pink · DarkSalmon · Coral Red

HEX
#CC8C89
RGB
rgb(204, 140, 137)
HSL
hsl(3, 40%, 67%)
HSB
hsb(3, 33%, 80%)
CMYK
cmyk(0%, 31%, 33%, 20%)
Oklch
oklch(70.3% 0.079 22.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#7E8581

Ash · Gray · Warm Gray

HEX
#7E8581
RGB
rgb(126, 133, 129)
HSL
hsl(146, 3%, 51%)
HSB
hsb(146, 5%, 52%)
CMYK
cmyk(5%, 0%, 3%, 48%)
Oklch
oklch(61.0% 0.010 161.2)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#5E777E

Slate Blue · SlateGray · Mint Ice

HEX
#5E777E
RGB
rgb(94, 119, 126)
HSL
hsl(193, 15%, 43%)
HSB
hsb(193, 25%, 49%)
CMYK
cmyk(25%, 6%, 0%, 51%)
Oklch
oklch(55.2% 0.031 216.7)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#685F78

Deep Indigo · DimGray · Violet

HEX
#685F78
RGB
rgb(104, 95, 120)
HSL
hsl(262, 12%, 42%)
HSB
hsb(262, 21%, 47%)
CMYK
cmyk(13%, 21%, 0%, 53%)
Oklch
oklch(50.3% 0.041 301.4)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#6D64CC

Deep Indigo · SlateBlue · Navy Blue

HEX
#6D64CC
RGB
rgb(109, 100, 204)
HSL
hsl(245, 50%, 60%)
HSB
hsb(245, 51%, 80%)
CMYK
cmyk(47%, 51%, 0%, 20%)
Oklch
oklch(56.3% 0.156 284.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC8C89
89C9CD

Analogous

CD89A7
CC8C89
CDAE89

Triadic

CC8C89
89CD8D
8D89CD

Split-Comp.

CC8C89
89CDAE
89A7CD

Tetradic

CC8C89
A7CD89
89C9CD
AE89CD

Contrast Matrix WCAG 2.1 Contrast

CC8C89
7E8581
5E777E
685F78
6D64CC
—
1.4
Fail
1.7
Fail
2.2
Fail
1.8
Fail
1.4
Fail
—
1.3
Fail
1.6
Fail
1.3
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.0
Fail
2.2
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
1.8
Fail
1.3
Fail
1.0
Fail
1.2
Fail
—
White BG
2.7Fail
3.8AA Large
4.8AA
6.0AA
4.8AA
Black BG
7.7AAA
5.6AA
4.4AA Large
3.5AA Large
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0B08A
818182
69697C
646472
6969B3

Deuteranopia

B4B98A
818082
67667C
656571
6A6AAD

Tritanopia

C98A8A
7E8383
5F7B7B
686D6C
6D9F9B

Achromatopsia

9F9F9F
828282
707070
656565
737373

Shades & Tints Shades & Tints

#CC8C89

Dark
Light

#7E8581

Dark
Light

#5E777E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc8c89;
  --color-2: #7e8581;
  --color-3: #5e777e;
  --color-4: #685f78;
  --color-5: #6d64cc;
}

SCSS

$color-1: #cc8c89;
$color-2: #7e8581;
$color-3: #5e777e;
$color-4: #685f78;
$color-5: #6d64cc;

TAILWIND

colors: {
  'brand-1': '#cc8c89',
  'brand-2': '#7e8581',
  'brand-3': '#5e777e',
  'brand-4': '#685f78',
  'brand-5': '#6d64cc',
}

RGB Array

[204, 140, 137], [126, 133, 129], [94, 119, 126], [104, 95, 120], [109, 100, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC8C89, #7E8581, #5E777E, #685F78, #6D64CC is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #cc8c89; --color-2: #7e8581; --color-3: #5e777e; --color-4: #685f78; --color-5: #6d64cc. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. 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