← Back to Editor

#8C7678 · #A19684 · #CCB593 · #EBD29A · #F7ECB6

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

WorkspaceReading

Color Details Color Details

#8C7678

Crimson · Gray · Warm Gray

HEX
#8C7678
RGB
rgb(140, 118, 120)
HSL
hsl(355, 9%, 51%)
HSB
hsb(355, 16%, 55%)
CMYK
cmyk(0%, 16%, 14%, 45%)
Oklch
oklch(58.7% 0.028 11.8)

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

#A19684

Ginger · Gray · Warm Sun

HEX
#A19684
RGB
rgb(161, 150, 132)
HSL
hsl(37, 13%, 57%)
HSB
hsb(37, 18%, 63%)
CMYK
cmyk(0%, 7%, 18%, 37%)
Oklch
oklch(67.8% 0.029 80.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#CCB593

Ginger · Tan · Warm Sun

HEX
#CCB593
RGB
rgb(204, 181, 147)
HSL
hsl(36, 36%, 69%)
HSB
hsb(36, 28%, 80%)
CMYK
cmyk(0%, 11%, 28%, 20%)
Oklch
oklch(78.4% 0.053 77.5)

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

#EBD29A

Goose Yellow · Khaki · Lemon Cream

HEX
#EBD29A
RGB
rgb(235, 210, 154)
HSL
hsl(41, 67%, 76%)
HSB
hsb(41, 34%, 92%)
CMYK
cmyk(0%, 11%, 34%, 8%)
Oklch
oklch(87.1% 0.077 86.6)

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

#F7ECB6

Fresh Green · Wheat · Lemon Cream

HEX
#F7ECB6
RGB
rgb(247, 236, 182)
HSL
hsl(50, 80%, 84%)
HSB
hsb(50, 26%, 97%)
CMYK
cmyk(0%, 4%, 26%, 3%)
Oklch
oklch(93.9% 0.070 97.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C7678
778D8B

Analogous

8D7784
8C7678
8D8077

Triadic

8C7678
798D77
77798D

Split-Comp.

8C7678
778D80
77848D

Tetradic

8C7678
848D77
778D8B
80778D

Contrast Matrix WCAG 2.1 Contrast

8C7678
A19684
CCB593
EBD29A
F7ECB6
—
1.4
Fail
2.1
Fail
2.9
Fail
3.5
AA Large
1.4
Fail
—
1.5
Fail
2.0
Fail
2.4
Fail
2.1
Fail
1.5
Fail
—
1.3
Fail
1.7
Fail
2.9
Fail
2.0
Fail
1.3
Fail
—
1.2
Fail
3.5
AA Large
2.4
Fail
1.7
Fail
1.2
Fail
—
White BG
4.2AA Large
2.9Fail
2.0Fail
1.5Fail
1.2Fail
Black BG
5.0AA
7.2AAA
10.6AAA
14.2AAA
17.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

828278
9C9C88
C2C29B
E0E0A8
F2F2C3

Deuteranopia

848577
9D9E89
C3C59D
E2E4AB
F3F4C6

Tritanopia

8B7777
A08C8D
CBA2A3
EAB2B5
F6CDD0

Achromatopsia

7D7D7D
979797
B8B8B8
D3D3D3
E9E9E9

Shades & Tints Shades & Tints

#8C7678

Dark
Light

#A19684

Dark
Light

#CCB593

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c7678;
  --color-2: #a19684;
  --color-3: #ccb593;
  --color-4: #ebd29a;
  --color-5: #f7ecb6;
}

SCSS

$color-1: #8c7678;
$color-2: #a19684;
$color-3: #ccb593;
$color-4: #ebd29a;
$color-5: #f7ecb6;

TAILWIND

colors: {
  'brand-1': '#8c7678',
  'brand-2': '#a19684',
  'brand-3': '#ccb593',
  'brand-4': '#ebd29a',
  'brand-5': '#f7ecb6',
}

RGB Array

[140, 118, 120], [161, 150, 132], [204, 181, 147], [235, 210, 154], [247, 236, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C7678, #A19684, #CCB593, #EBD29A, #F7ECB6 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: #8c7678; --color-2: #a19684; --color-3: #ccb593; --color-4: #ebd29a; --color-5: #f7ecb6. 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