← Back to Editor

#64777E · #858C92 · #BA7E8A · #FE8E8D · #EDE4C7

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 LibraryData Visualization

Color Details Color Details

#64777E

Slate Blue · SlateGray · Mint Ice

HEX
#64777E
RGB
rgb(100, 119, 126)
HSL
hsl(196, 12%, 44%)
HSB
hsb(196, 21%, 49%)
CMYK
cmyk(21%, 6%, 0%, 51%)
Oklch
oklch(55.6% 0.025 222.1)

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

#858C92

Ash · LightSlateGray · Warm Gray

HEX
#858C92
RGB
rgb(133, 140, 146)
HSL
hsl(208, 6%, 55%)
HSB
hsb(208, 9%, 57%)
CMYK
cmyk(9%, 4%, 0%, 43%)
Oklch
oklch(63.6% 0.012 243.8)

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

#BA7E8A

Peach Pink · LightCoral · Coral Red

HEX
#BA7E8A
RGB
rgb(186, 126, 138)
HSL
hsl(348, 30%, 61%)
HSB
hsb(348, 32%, 73%)
CMYK
cmyk(0%, 32%, 26%, 27%)
Oklch
oklch(65.8% 0.076 6.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#FE8E8D

Peach Pink · LightCoral · Coral Red

HEX
#FE8E8D
RGB
rgb(254, 142, 141)
HSL
hsl(1, 98%, 77%)
HSB
hsb(1, 44%, 100%)
CMYK
cmyk(0%, 44%, 44%, 0%)
Oklch
oklch(76.7% 0.136 21.3)

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

#EDE4C7

Goose Yellow · Bisque · Lemon Cream

HEX
#EDE4C7
RGB
rgb(237, 228, 199)
HSL
hsl(46, 51%, 85%)
HSB
hsb(46, 16%, 93%)
CMYK
cmyk(0%, 4%, 16%, 7%)
Oklch
oklch(91.8% 0.040 92.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

64777E
7E6A63

Analogous

637E77
64777E
63697E

Triadic

64777E
7E6376
767E63

Split-Comp.

64777E
7E6369
7E7763

Tetradic

64777E
77637E
7E6A63
697E63

Contrast Matrix WCAG 2.1 Contrast

64777E
858C92
BA7E8A
FE8E8D
EDE4C7
—
1.4
Fail
1.4
Fail
2.1
Fail
3.7
AA Large
1.4
Fail
—
1.0
Fail
1.5
Fail
2.7
Fail
1.4
Fail
1.0
Fail
—
1.5
Fail
2.6
Fail
2.1
Fail
1.5
Fail
1.5
Fail
—
1.7
Fail
3.7
AA Large
2.7
Fail
2.6
Fail
1.7
Fail
—
White BG
4.7AA
3.4AA Large
3.3AA Large
2.2Fail
1.3Fail
Black BG
4.5AA Large
6.2AA
6.4AA
9.5AAA
16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6C7C
888891
A09F87
CECC8D
E9E9CE

Deuteranopia

6B6A7C
888790
A4A886
D4DC8D
EAEAD0

Tritanopia

657B7B
858F8F
B78584
F88D8D
EDD4D5

Achromatopsia

727272
8B8B8B
919191
AFAFAF
E3E3E3

Shades & Tints Shades & Tints

#64777E

Dark
Light

#858C92

Dark
Light

#BA7E8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #64777e;
  --color-2: #858c92;
  --color-3: #ba7e8a;
  --color-4: #fe8e8d;
  --color-5: #ede4c7;
}

SCSS

$color-1: #64777e;
$color-2: #858c92;
$color-3: #ba7e8a;
$color-4: #fe8e8d;
$color-5: #ede4c7;

TAILWIND

colors: {
  'brand-1': '#64777e',
  'brand-2': '#858c92',
  'brand-3': '#ba7e8a',
  'brand-4': '#fe8e8d',
  'brand-5': '#ede4c7',
}

RGB Array

[100, 119, 126], [133, 140, 146], [186, 126, 138], [254, 142, 141], [237, 228, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #64777E, #858C92, #BA7E8A, #FE8E8D, #EDE4C7 is ideal for: 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: #64777e; --color-2: #858c92; --color-3: #ba7e8a; --color-4: #fe8e8d; --color-5: #ede4c7. 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. 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