← Back to Editor

#DCF0A0 · #B4C8A0 · #8CA0A0 · #8C7878 · #8C5050

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

#DCF0A0

Willow Green · Khaki · Apple Green

HEX
#DCF0A0
RGB
rgb(220, 240, 160)
HSL
hsl(75, 73%, 78%)
HSB
hsb(75, 33%, 94%)
CMYK
cmyk(8%, 0%, 33%, 6%)
Oklch
oklch(92.2% 0.105 119.9)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#B4C8A0

Celadon · DarkGray · Apple Green

HEX
#B4C8A0
RGB
rgb(180, 200, 160)
HSL
hsl(90, 27%, 71%)
HSB
hsb(90, 20%, 78%)
CMYK
cmyk(10%, 0%, 20%, 22%)
Oklch
oklch(80.7% 0.059 129.3)

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

#8CA0A0

Slate Blue · DarkGray · Lake Green

HEX
#8CA0A0
RGB
rgb(140, 160, 160)
HSL
hsl(180, 10%, 59%)
HSB
hsb(180, 12%, 63%)
CMYK
cmyk(12%, 0%, 0%, 37%)
Oklch
oklch(69.0% 0.023 196.6)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#8C7878

Crimson · Gray · Warm Gray

HEX
#8C7878
RGB
rgb(140, 120, 120)
HSL
hsl(0, 8%, 51%)
HSB
hsb(0, 14%, 55%)
CMYK
cmyk(0%, 14%, 14%, 45%)
Oklch
oklch(59.1% 0.025 17.9)

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

#8C5050

Crimson · Sienna · Passion Red

HEX
#8C5050
RGB
rgb(140, 80, 80)
HSL
hsl(0, 27%, 43%)
HSB
hsb(0, 43%, 55%)
CMYK
cmyk(0%, 43%, 43%, 45%)
Oklch
oklch(50.1% 0.081 20.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCF0A0
B29EF0

Analogous

F0DB9E
DCF0A0
B2F09E

Triadic

DCF0A0
9EDBF0
F09EDB

Split-Comp.

DCF0A0
9EB2F0
DB9EF0

Tetradic

DCF0A0
9EF0DB
B29EF0
F09EB2

Contrast Matrix WCAG 2.1 Contrast

DCF0A0
B4C8A0
8CA0A0
8C7878
8C5050
—
1.5
Fail
2.2
Fail
3.4
AA Large
5.0
AA
1.5
Fail
—
1.5
Fail
2.3
Fail
3.5
AA Large
2.2
Fail
1.5
Fail
—
1.5
Fail
2.3
Fail
3.4
AA Large
2.3
Fail
1.5
Fail
—
1.5
Fail
5.0
AA
3.5
AA Large
2.3
Fail
1.5
Fail
—
White BG
1.2Fail
1.8Fail
2.7Fail
4.1AA Large
6.2AA
Black BG
17.0AAA
11.7AAA
7.7AAA
5.1AA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E5B3
BDBDAA
9595A0
838378
727150

Deuteranopia

E4E2B8
BCBAAC
9492A0
858678
767A50

Tritanopia

DDC3C6
B5B1B3
8DA0A0
8B7878
895050

Achromatopsia

E1E1E1
BDBDBD
9A9A9A
7E7E7E
626262

Shades & Tints Shades & Tints

#DCF0A0

Dark
Light

#B4C8A0

Dark
Light

#8CA0A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcf0a0;
  --color-2: #b4c8a0;
  --color-3: #8ca0a0;
  --color-4: #8c7878;
  --color-5: #8c5050;
}

SCSS

$color-1: #dcf0a0;
$color-2: #b4c8a0;
$color-3: #8ca0a0;
$color-4: #8c7878;
$color-5: #8c5050;

TAILWIND

colors: {
  'brand-1': '#dcf0a0',
  'brand-2': '#b4c8a0',
  'brand-3': '#8ca0a0',
  'brand-4': '#8c7878',
  'brand-5': '#8c5050',
}

RGB Array

[220, 240, 160], [180, 200, 160], [140, 160, 160], [140, 120, 120], [140, 80, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DCF0A0, #B4C8A0, #8CA0A0, #8C7878, #8C5050 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: #dcf0a0; --color-2: #b4c8a0; --color-3: #8ca0a0; --color-4: #8c7878; --color-5: #8c5050. 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