← Back to Editor

#DCE6AC · #B2C9A5 · #988E99 · #7A5060 · #33282B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#DCE6AC

Willow Green · Wheat · Apple Green

HEX
#DCE6AC
RGB
rgb(220, 230, 172)
HSL
hsl(70, 54%, 79%)
HSB
hsb(70, 25%, 90%)
CMYK
cmyk(4%, 0%, 25%, 10%)
Oklch
oklch(90.3% 0.076 115.9)

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

#B2C9A5

Celadon · Silver · Apple Green

HEX
#B2C9A5
RGB
rgb(178, 201, 165)
HSL
hsl(98, 25%, 72%)
HSB
hsb(98, 18%, 79%)
CMYK
cmyk(11%, 0%, 18%, 21%)
Oklch
oklch(80.9% 0.055 134.2)

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

#988E99

Ash · LightSlateGray · Silver Sand

HEX
#988E99
RGB
rgb(152, 142, 153)
HSL
hsl(295, 5%, 58%)
HSB
hsb(295, 7%, 60%)
CMYK
cmyk(1%, 7%, 0%, 40%)
Oklch
oklch(65.9% 0.020 323.0)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#7A5060

Dark Violet · DimGray · Camellia

HEX
#7A5060
RGB
rgb(122, 80, 96)
HSL
hsl(337, 21%, 40%)
HSB
hsb(337, 34%, 48%)
CMYK
cmyk(0%, 34%, 21%, 52%)
Oklch
oklch(48.3% 0.060 355.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#33282B

Dark Violet · DarkSlateGray · Raspberry

HEX
#33282B
RGB
rgb(51, 40, 43)
HSL
hsl(344, 12%, 18%)
HSB
hsb(344, 22%, 20%)
CMYK
cmyk(0%, 22%, 16%, 80%)
Oklch
oklch(29.0% 0.017 0.0)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCE6AC
B6ADE6

Analogous

E6D3AD
DCE6AC
C0E6AD

Triadic

DCE6AC
ADDDE6
E6ADDD

Split-Comp.

DCE6AC
ADC0E6
D3ADE6

Tetradic

DCE6AC
ADE6D3
B6ADE6
E6ADC0

Contrast Matrix WCAG 2.1 Contrast

DCE6AC
B2C9A5
988E99
7A5060
33282B
—
1.4
Fail
2.4
Fail
5.1
AA
10.8
AAA
1.4
Fail
—
1.8
Fail
3.8
AA Large
8.0
AAA
2.4
Fail
1.8
Fail
—
2.1
Fail
4.5
AA
5.1
AA
3.8
AA Large
2.1
Fail
—
2.1
Fail
10.8
AAA
8.0
AAA
4.5
AA
2.1
Fail
—
White BG
1.3Fail
1.8Fail
3.2AA Large
6.7AA
14.2AAA
Black BG
16.0AAA
11.8AAA
6.7AA
3.1AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0BA
BCBCAE
949496
68675C
2E2E2A

Deuteranopia

E0DFBD
BBB9B0
949596
6A6D5B
2F302A

Tritanopia

DDC5C8
B3B5B6
989494
785958
322A2A

Achromatopsia

DCDCDC
BEBEBE
929292
5E5E5E
2C2C2C

Shades & Tints Shades & Tints

#DCE6AC

Dark
Light

#B2C9A5

Dark
Light

#988E99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dce6ac;
  --color-2: #b2c9a5;
  --color-3: #988e99;
  --color-4: #7a5060;
  --color-5: #33282b;
}

SCSS

$color-1: #dce6ac;
$color-2: #b2c9a5;
$color-3: #988e99;
$color-4: #7a5060;
$color-5: #33282b;

TAILWIND

colors: {
  'brand-1': '#dce6ac',
  'brand-2': '#b2c9a5',
  'brand-3': '#988e99',
  'brand-4': '#7a5060',
  'brand-5': '#33282b',
}

RGB Array

[220, 230, 172], [178, 201, 165], [152, 142, 153], [122, 80, 96], [51, 40, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DCE6AC, #B2C9A5, #988E99, #7A5060, #33282B is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #dce6ac; --color-2: #b2c9a5; --color-3: #988e99; --color-4: #7a5060; --color-5: #33282b. 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. 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