← Back to Editor

#677462 · #A4997D · #DCB687 · #EAE1A6 · #EDECC0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#677462

Celadon · DimGray · Warm Gray

HEX
#677462
RGB
rgb(103, 116, 98)
HSL
hsl(103, 8%, 42%)
HSB
hsb(103, 16%, 45%)
CMYK
cmyk(11%, 0%, 16%, 55%)
Oklch
oklch(54.3% 0.032 137.0)

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

#A4997D

Ginger · Gray · Sunflower

HEX
#A4997D
RGB
rgb(164, 153, 125)
HSL
hsl(43, 18%, 57%)
HSB
hsb(43, 24%, 64%)
CMYK
cmyk(0%, 7%, 24%, 36%)
Oklch
oklch(68.5% 0.041 89.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#DCB687

Ginger · BurlyWood · Warm Sun

HEX
#DCB687
RGB
rgb(220, 182, 135)
HSL
hsl(33, 55%, 70%)
HSB
hsb(33, 39%, 86%)
CMYK
cmyk(0%, 17%, 39%, 14%)
Oklch
oklch(79.9% 0.076 72.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#EAE1A6

Fresh Green · Wheat · Lemon Cream

HEX
#EAE1A6
RGB
rgb(234, 225, 166)
HSL
hsl(52, 62%, 78%)
HSB
hsb(52, 29%, 92%)
CMYK
cmyk(0%, 4%, 29%, 8%)
Oklch
oklch(90.3% 0.077 100.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#EDECC0

Fresh Green · Bisque · Lemon Cream

HEX
#EDECC0
RGB
rgb(237, 236, 192)
HSL
hsl(59, 56%, 84%)
HSB
hsb(59, 19%, 93%)
CMYK
cmyk(0%, 0%, 19%, 7%)
Oklch
oklch(93.3% 0.057 106.4)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

677462
6F6374

Analogous

707463
677462
637466

Triadic

677462
636774
746367

Split-Comp.

677462
666374
746370

Tetradic

677462
637074
6F6374
746663

Contrast Matrix WCAG 2.1 Contrast

677462
A4997D
DCB687
EAE1A6
EDECC0
—
1.7
Fail
2.6
Fail
3.7
AA Large
4.1
AA Large
1.7
Fail
—
1.5
Fail
2.1
Fail
2.3
Fail
2.6
Fail
1.5
Fail
—
1.4
Fail
1.6
Fail
3.7
AA Large
2.1
Fail
1.4
Fail
—
1.1
Fail
4.1
AA Large
2.3
Fail
1.6
Fail
1.1
Fail
—
White BG
4.9AA
2.8Fail
1.9Fail
1.3Fail
1.2Fail
Black BG
4.3AA Large
7.4AAA
11.1AAA
15.8AAA
17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D66
9F9F84
CCCB92
E6E6B4
EDEDCB

Deuteranopia

6C6B67
A0A185
CED195
E7E7B8
EDEDCD

Tritanopia

686A6B
A3898A
DA9B9D
EAC0C2
EDD3D5

Achromatopsia

6E6E6E
999999
BCBCBC
DDDDDD
E7E7E7

Shades & Tints Shades & Tints

#677462

Dark
Light

#A4997D

Dark
Light

#DCB687

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #677462;
  --color-2: #a4997d;
  --color-3: #dcb687;
  --color-4: #eae1a6;
  --color-5: #edecc0;
}

SCSS

$color-1: #677462;
$color-2: #a4997d;
$color-3: #dcb687;
$color-4: #eae1a6;
$color-5: #edecc0;

TAILWIND

colors: {
  'brand-1': '#677462',
  'brand-2': '#a4997d',
  'brand-3': '#dcb687',
  'brand-4': '#eae1a6',
  'brand-5': '#edecc0',
}

RGB Array

[103, 116, 98], [164, 153, 125], [220, 182, 135], [234, 225, 166], [237, 236, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #677462, #A4997D, #DCB687, #EAE1A6, #EDECC0 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: #677462; --color-2: #a4997d; --color-3: #dcb687; --color-4: #eae1a6; --color-5: #edecc0. 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