#AA977D + #E0C9A3 + #D1DDAC + #EFF4D3 + #F2F7E5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AA977D

Ginger · DarkGray · Warm Sun

HEX

#AA977D

RGB

rgb(170, 151, 125)

HSL

hsl(35, 21%, 58%)

HSB

hsb(35, 26%, 67%)

CMYK

cmyk(0%, 11%, 26%, 33%)

Oklch

oklch(68.6% 0.043 75.6)

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

#E0C9A3

Goose Yellow · BurlyWood · Peach Orange

HEX

#E0C9A3

RGB

rgb(224, 201, 163)

HSL

hsl(37, 50%, 76%)

HSB

hsb(37, 27%, 88%)

CMYK

cmyk(0%, 10%, 27%, 12%)

Oklch

oklch(84.6% 0.057 80.2)

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

#D1DDAC

Willow Green · Wheat · Apple Green

HEX

#D1DDAC

RGB

rgb(209, 221, 172)

HSL

hsl(75, 42%, 77%)

HSB

hsb(75, 22%, 87%)

CMYK

cmyk(5%, 0%, 22%, 13%)

Oklch

oklch(87.6% 0.066 119.0)

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

#EFF4D3

Fresh Green · Beige · Lemon Cream

HEX

#EFF4D3

RGB

rgb(239, 244, 211)

HSL

hsl(69, 60%, 89%)

HSB

hsb(69, 14%, 96%)

CMYK

cmyk(2%, 0%, 14%, 4%)

Oklch

oklch(95.5% 0.044 114.2)

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

#F2F7E5

Willow Green · Beige · Mint Green

HEX

#F2F7E5

RGB

rgb(242, 247, 229)

HSL

hsl(77, 53%, 93%)

HSB

hsb(77, 7%, 97%)

CMYK

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

Oklch

oklch(96.8% 0.024 119.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AA977D

7D90AA

Analogous

AA817D

AA977D

A7AA7D

Triadic

AA977D

7DAA98

987DAA

Split-Comp.

AA977D

7DA7AA

817DAA

Tetradic

AA977D

7DAA81

7D90AA

AA7DA7

Contrast Matrix WCAG 2.1 Contrast

AA977D	E0C9A3	D1DDAC	EFF4D3	F2F7E5
—	1.8 Fail	2.0 Fail	2.5 Fail	2.6 Fail
1.8 Fail	—	1.1 Fail	1.4 Fail	1.5 Fail
2.0 Fail	1.1 Fail	—	1.3 Fail	1.3 Fail
2.5 Fail	1.4 Fail	1.3 Fail	—	1.0 Fail
2.6 Fail	1.5 Fail	1.3 Fail	1.0 Fail	—

White BG

2.8Fail

1.6Fail

1.4Fail

1.1Fail

Black BG

7.4AAA

13.1AAA

14.6AAA

18.6AAA

19.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A283

D6D6AC

D6D6B8

F1F1DB

F4F4E9

Deuteranopia

A3A485

D7D9AE

D6D5BB

F1F1DD

F4F3EA

Tritanopia

A98889

DFB3B5

D2C1C3

EFE1E3

F2EDEE

Achromatopsia

9A9A9A

CCCCCC

D4D4D4

EFEFEF

F3F3F3

Shades & Tints Shades & Tints

#AA977D

Dark

Light

#E0C9A3

Dark

Light

#D1DDAC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aa977d;
  --color-2: #e0c9a3;
  --color-3: #d1ddac;
  --color-4: #eff4d3;
  --color-5: #f2f7e5;
}

SCSS

$color-1: #aa977d;
$color-2: #e0c9a3;
$color-3: #d1ddac;
$color-4: #eff4d3;
$color-5: #f2f7e5;

TAILWIND

colors: {
  'brand-1': '#aa977d',
  'brand-2': '#e0c9a3',
  'brand-3': '#d1ddac',
  'brand-4': '#eff4d3',
  'brand-5': '#f2f7e5',
}

RGB Array

[170, 151, 125], [224, 201, 163], [209, 221, 172], [239, 244, 211], [242, 247, 229]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AA977D, #E0C9A3, #D1DDAC, #EFF4D3, #F2F7E5 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: #aa977d; --color-2: #e0c9a3; --color-3: #d1ddac; --color-4: #eff4d3; --color-5: #f2f7e5. 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