#7FA89A + #D6C2A1 + #FECEA8 + #FFDCBE + #D1D8C8 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7FA89A

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#7FA89A

RGB

rgb(127, 168, 154)

HSL

hsl(160, 19%, 58%)

HSB

hsb(160, 24%, 66%)

CMYK

cmyk(24%, 0%, 8%, 34%)

Oklch

oklch(69.8% 0.049 171.8)

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

#D6C2A1

Goose Yellow · Tan · Warm Sun

HEX

#D6C2A1

RGB

rgb(214, 194, 161)

HSL

hsl(37, 39%, 74%)

HSB

hsb(37, 25%, 84%)

CMYK

cmyk(0%, 9%, 25%, 16%)

Oklch

oklch(82.2% 0.050 80.2)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#FECEA8

Apricot · Wheat · Peach Orange

HEX

#FECEA8

RGB

rgb(254, 206, 168)

HSL

hsl(27, 98%, 83%)

HSB

hsb(27, 34%, 100%)

CMYK

cmyk(0%, 19%, 34%, 0%)

Oklch

oklch(88.4% 0.074 60.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FFDCBE

Apricot · Bisque · Peach Orange

HEX

#FFDCBE

RGB

rgb(255, 220, 190)

HSL

hsl(28, 100%, 87%)

HSB

hsb(28, 25%, 100%)

CMYK

cmyk(0%, 14%, 25%, 0%)

Oklch

oklch(91.6% 0.056 62.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D1D8C8

Willow Green · LightGray · Mint Green

HEX

#D1D8C8

RGB

rgb(209, 216, 200)

HSL

hsl(86, 17%, 82%)

HSB

hsb(86, 7%, 85%)

CMYK

cmyk(3%, 0%, 7%, 15%)

Oklch

oklch(87.2% 0.023 126.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7FA89A

A8808D

Analogous

80A886

7FA89A

80A1A8

Triadic

7FA89A

9B80A8

A89B80

Split-Comp.

7FA89A

A880A1

A88680

Tetradic

7FA89A

8680A8

A8808D

A1A880

Contrast Matrix WCAG 2.1 Contrast

7FA89A	D6C2A1	FECEA8	FFDCBE	D1D8C8
—	1.5 Fail	1.8 Fail	2.0 Fail	1.8 Fail
1.5 Fail	—	1.2 Fail	1.3 Fail	1.2 Fail
1.8 Fail	1.2 Fail	—	1.1 Fail	1.0 Fail
2.0 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.8 Fail	1.2 Fail	1.0 Fail	1.1 Fail	—

White BG

2.6Fail

1.7Fail

1.4Fail

1.3Fail

1.5Fail

Black BG

8.0AAA

12.1AAA

14.6AAA

16.2AAA

14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

91919D

CDCDA9

E9E9B1

F0F0C5

D4D4CC

Deuteranopia

8E8B9E

CFD0AB

ECF0B3

F2F5C7

D4D3CD

Tritanopia

81A0A1

D5AFB1

FCB8BA

FDCBCC

D1CFD0

Achromatopsia

9A9A9A

C4C4C4

D8D8D8

E3E3E3

D4D4D4

Shades & Tints Shades & Tints

#7FA89A

Dark

Light

#D6C2A1

Dark

Light

#FECEA8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7fa89a;
  --color-2: #d6c2a1;
  --color-3: #fecea8;
  --color-4: #ffdcbe;
  --color-5: #d1d8c8;
}

SCSS

$color-1: #7fa89a;
$color-2: #d6c2a1;
$color-3: #fecea8;
$color-4: #ffdcbe;
$color-5: #d1d8c8;

TAILWIND

colors: {
  'brand-1': '#7fa89a',
  'brand-2': '#d6c2a1',
  'brand-3': '#fecea8',
  'brand-4': '#ffdcbe',
  'brand-5': '#d1d8c8',
}

RGB Array

[127, 168, 154], [214, 194, 161], [254, 206, 168], [255, 220, 190], [209, 216, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #7FA89A, #D6C2A1, #FECEA8, #FFDCBE, #D1D8C8 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: #7fa89a; --color-2: #d6c2a1; --color-3: #fecea8; --color-4: #ffdcbe; --color-5: #d1d8c8. 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