#D2E6C3 + #9CE8E8 + #D6AEAC + #D79E51 + #F2E8B5 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D2E6C3

Celadon · LightGray · Mint Green

HEX

#D2E6C3

RGB

rgb(210, 230, 195)

HSL

hsl(94, 41%, 83%)

HSB

hsb(94, 15%, 90%)

CMYK

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

Oklch

oklch(90.1% 0.051 131.8)

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

#9CE8E8

Sky Blue · LightBlue · Glacier Blue

HEX

#9CE8E8

RGB

rgb(156, 232, 232)

HSL

hsl(180, 62%, 76%)

HSB

hsb(180, 33%, 91%)

CMYK

cmyk(33%, 0%, 0%, 9%)

Oklch

oklch(88.2% 0.075 195.9)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#D6AEAC

Peach Pink · Tan · Coral Red

HEX

#D6AEAC

RGB

rgb(214, 174, 172)

HSL

hsl(3, 34%, 76%)

HSB

hsb(3, 20%, 84%)

CMYK

cmyk(0%, 19%, 20%, 16%)

Oklch

oklch(78.6% 0.047 21.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D79E51

Ginger · SandyBrown · Warm Sun

HEX

#D79E51

RGB

rgb(215, 158, 81)

HSL

hsl(34, 63%, 58%)

HSB

hsb(34, 62%, 84%)

CMYK

cmyk(0%, 27%, 62%, 16%)

Oklch

oklch(73.9% 0.116 72.5)

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

#F2E8B5

Fresh Green · Wheat · Lemon Cream

HEX

#F2E8B5

RGB

rgb(242, 232, 181)

HSL

hsl(50, 70%, 83%)

HSB

hsb(50, 25%, 95%)

CMYK

cmyk(0%, 4%, 25%, 5%)

Oklch

oklch(92.7% 0.067 98.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2E6C3

D6C2E5

Analogous

E3E5C2

D2E6C3

C2E5C4

Triadic

D2E6C3

C2D1E5

E5C2D1

Split-Comp.

D2E6C3

C4C2E5

E5C2E3

Tetradic

D2E6C3

C2E3E5

D6C2E5

E5C4C2

Contrast Matrix WCAG 2.1 Contrast

D2E6C3	9CE8E8	D6AEAC	D79E51	F2E8B5
—	1.0 Fail	1.5 Fail	1.8 Fail	1.1 Fail
1.0 Fail	—	1.4 Fail	1.7 Fail	1.1 Fail
1.5 Fail	1.4 Fail	—	1.2 Fail	1.6 Fail
1.8 Fail	1.7 Fail	1.2 Fail	—	1.9 Fail
1.1 Fail	1.1 Fail	1.6 Fail	1.9 Fail	—

White BG

1.3Fail

1.4Fail

2.0Fail

2.4Fail

1.2Fail

Black BG

15.8AAA

15.1AAA

10.5AAA

8.9AAA

17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBCB

BDBEE8

C5C4AC

BEBE64

EEEEC1

Deuteranopia

DAD8CE

B9B3E8

C7CAAD

C2C668

EEEFC4

Tritanopia

D3D2D4

A0E8E8

D4ADAD

D47276

F1CBCD

Achromatopsia

DCDCDC

D1D1D1

BABABA

A6A6A6

E5E5E5

Shades & Tints Shades & Tints

#D2E6C3

Dark

Light

#9CE8E8

Dark

Light

#D6AEAC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2e6c3;
  --color-2: #9ce8e8;
  --color-3: #d6aeac;
  --color-4: #d79e51;
  --color-5: #f2e8b5;
}

SCSS

$color-1: #d2e6c3;
$color-2: #9ce8e8;
$color-3: #d6aeac;
$color-4: #d79e51;
$color-5: #f2e8b5;

TAILWIND

colors: {
  'brand-1': '#d2e6c3',
  'brand-2': '#9ce8e8',
  'brand-3': '#d6aeac',
  'brand-4': '#d79e51',
  'brand-5': '#f2e8b5',
}

RGB Array

[210, 230, 195], [156, 232, 232], [214, 174, 172], [215, 158, 81], [242, 232, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #D2E6C3, #9CE8E8, #D6AEAC, #D79E51, #F2E8B5 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: #d2e6c3; --color-2: #9ce8e8; --color-3: #d6aeac; --color-4: #d79e51; --color-5: #f2e8b5. 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 earth-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