#DCE2D6 + #D2E9B5 + #CDF680 + #D9F35A + #C9C7CC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DCE2D6

Celadon · LightGray · Mint Green

HEX

#DCE2D6

RGB

rgb(220, 226, 214)

HSL

hsl(90, 17%, 86%)

HSB

hsb(90, 5%, 89%)

CMYK

cmyk(3%, 0%, 5%, 11%)

Oklch

oklch(90.5% 0.017 128.7)

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

#D2E9B5

Willow Green · Wheat · Mint Green

HEX

#D2E9B5

RGB

rgb(210, 233, 181)

HSL

hsl(87, 54%, 81%)

HSB

hsb(87, 22%, 91%)

CMYK

cmyk(10%, 0%, 22%, 9%)

Oklch

oklch(90.4% 0.073 127.2)

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

#CDF680

Willow Green · Khaki · Apple Green

HEX

#CDF680

RGB

rgb(205, 246, 128)

HSL

hsl(81, 87%, 73%)

HSB

hsb(81, 48%, 96%)

CMYK

cmyk(17%, 0%, 48%, 4%)

Oklch

oklch(91.9% 0.152 125.1)

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

#D9F35A

Willow Green · Khaki · Apple Green

HEX

#D9F35A

RGB

rgb(217, 243, 90)

HSL

hsl(70, 86%, 65%)

HSB

hsb(70, 63%, 95%)

CMYK

cmyk(11%, 0%, 63%, 5%)

Oklch

oklch(91.7% 0.177 118.3)

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

#C9C7CC

Silver Gray · Silver · Pearl Gray

HEX

#C9C7CC

RGB

rgb(201, 199, 204)

HSL

hsl(264, 5%, 79%)

HSB

hsb(264, 2%, 80%)

CMYK

cmyk(1%, 2%, 0%, 20%)

Oklch

oklch(83.3% 0.007 304.2)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCE2D6

DBD5E1

Analogous

E1E1D5

DCE2D6

D5E1D5

Triadic

DCE2D6

D5DBE1

E1D5DB

Split-Comp.

DCE2D6

D5D5E1

E1D5E1

Tetradic

DCE2D6

D5E1E1

DBD5E1

E1D5D5

Contrast Matrix WCAG 2.1 Contrast

DCE2D6	D2E9B5	CDF680	D9F35A	C9C7CC
—	1.0 Fail	1.1 Fail	1.1 Fail	1.3 Fail
1.0 Fail	—	1.1 Fail	1.1 Fail	1.3 Fail
1.1 Fail	1.1 Fail	—	1.0 Fail	1.4 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.4 Fail
1.3 Fail	1.3 Fail	1.4 Fail	1.4 Fail	—

White BG

1.3Fail

1.2Fail

1.7Fail

Black BG

15.9AAA

16.1AAA

17.1AAA

16.9AAA

12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFD9

DCDCC2

DFDF9D

E4E47F

C8C8CB

Deuteranopia

DEDEDA

DBD9C5

DCD9A3

E3E188

C8C8CA

Tritanopia

DCDBDC

D3CCCE

CFB3B8

DA9CA3

C9CACA

Achromatopsia

DFDFDF

DCDCDC

DADADA

C8C8C8

Shades & Tints Shades & Tints

#DCE2D6

Dark

Light

#D2E9B5

Dark

Light

#CDF680

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dce2d6;
  --color-2: #d2e9b5;
  --color-3: #cdf680;
  --color-4: #d9f35a;
  --color-5: #c9c7cc;
}

SCSS

$color-1: #dce2d6;
$color-2: #d2e9b5;
$color-3: #cdf680;
$color-4: #d9f35a;
$color-5: #c9c7cc;

TAILWIND

colors: {
  'brand-1': '#dce2d6',
  'brand-2': '#d2e9b5',
  'brand-3': '#cdf680',
  'brand-4': '#d9f35a',
  'brand-5': '#c9c7cc',
}

RGB Array

[220, 226, 214], [210, 233, 181], [205, 246, 128], [217, 243, 90], [201, 199, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DCE2D6, #D2E9B5, #CDF680, #D9F35A, #C9C7CC 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: #dce2d6; --color-2: #d2e9b5; --color-3: #cdf680; --color-4: #d9f35a; --color-5: #c9c7cc. 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