#A2F2DE + #F2E7C7 + #D9CCB4 + #C4B0A1 + #99897D · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A2F2DE

Jade · LightBlue · Glacier Blue

HEX

#A2F2DE

RGB

rgb(162, 242, 222)

HSL

hsl(165, 75%, 79%)

HSB

hsb(165, 33%, 95%)

CMYK

cmyk(33%, 0%, 8%, 5%)

Oklch

oklch(90.4% 0.083 176.9)

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

#F2E7C7

Goose Yellow · Bisque · Lemon Cream

HEX

#F2E7C7

RGB

rgb(242, 231, 199)

HSL

hsl(45, 62%, 86%)

HSB

hsb(45, 18%, 95%)

CMYK

cmyk(0%, 5%, 18%, 5%)

Oklch

oklch(92.8% 0.044 91.3)

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

#D9CCB4

Goose Yellow · Silver · Peach Orange

HEX

#D9CCB4

RGB

rgb(217, 204, 180)

HSL

hsl(39, 33%, 78%)

HSB

hsb(39, 17%, 85%)

CMYK

cmyk(0%, 6%, 17%, 15%)

Oklch

oklch(84.9% 0.035 82.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#C4B0A1

Apricot · Tan · Warm Sun

HEX

#C4B0A1

RGB

rgb(196, 176, 161)

HSL

hsl(26, 23%, 70%)

HSB

hsb(26, 18%, 77%)

CMYK

cmyk(0%, 10%, 18%, 23%)

Oklch

oklch(77.0% 0.031 59.2)

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

#99897D

Tangerine · Gray · Warm Sun

HEX

#99897D

RGB

rgb(153, 137, 125)

HSL

hsl(26, 12%, 55%)

HSB

hsb(26, 18%, 60%)

CMYK

cmyk(0%, 10%, 18%, 40%)

Oklch

oklch(64.1% 0.026 59.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A2F2DE

F2A1B5

Analogous

A1F2B5

A2F2DE

A1DEF2

Triadic

A2F2DE

DEA1F2

F2DEA1

Split-Comp.

A2F2DE

F2A1DE

F2B5A1

Tetradic

A2F2DE

B5A1F2

F2A1B5

DEF2A1

Contrast Matrix WCAG 2.1 Contrast

A2F2DE	F2E7C7	D9CCB4	C4B0A1	99897D
—	1.0 Fail	1.2 Fail	1.6 Fail	2.6 Fail
1.0 Fail	—	1.3 Fail	1.7 Fail	2.7 Fail
1.2 Fail	1.3 Fail	—	1.3 Fail	2.1 Fail
1.6 Fail	1.7 Fail	1.3 Fail	—	1.6 Fail
2.6 Fail	2.7 Fail	2.1 Fail	1.6 Fail	—

White BG

1.3Fail

1.2Fail

1.6Fail

2.1Fail

3.4AA Large

Black BG

16.3AAA

17.0AAA

13.2AAA

10.1AAA

6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C5E3

EDEDCF

D3D3BA

BBBBA5

929280

Deuteranopia

C0BAE4

EEEFD1

D4D5BB

BDBEA6

939481

Tritanopia

A6E7E8

F1D5D6

D8BEBF

C3A7A8

988283

Achromatopsia

D8D8D8

E7E7E7

CDCDCD

B4B4B4

8C8C8C

Shades & Tints Shades & Tints

#A2F2DE

Dark

Light

#F2E7C7

Dark

Light

#D9CCB4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a2f2de;
  --color-2: #f2e7c7;
  --color-3: #d9ccb4;
  --color-4: #c4b0a1;
  --color-5: #99897d;
}

SCSS

$color-1: #a2f2de;
$color-2: #f2e7c7;
$color-3: #d9ccb4;
$color-4: #c4b0a1;
$color-5: #99897d;

TAILWIND

colors: {
  'brand-1': '#a2f2de',
  'brand-2': '#f2e7c7',
  'brand-3': '#d9ccb4',
  'brand-4': '#c4b0a1',
  'brand-5': '#99897d',
}

RGB Array

[162, 242, 222], [242, 231, 199], [217, 204, 180], [196, 176, 161], [153, 137, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #A2F2DE, #F2E7C7, #D9CCB4, #C4B0A1, #99897D 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: #a2f2de; --color-2: #f2e7c7; --color-3: #d9ccb4; --color-4: #c4b0a1; --color-5: #99897d. 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