#E3A286 + #FFF4C2 + #DCD4A3 + #B9A695 + #AE777A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E3A286

Apricot · DarkSalmon · Warm Sun

HEX

#E3A286

RGB

rgb(227, 162, 134)

HSL

hsl(18, 62%, 71%)

HSB

hsb(18, 41%, 89%)

CMYK

cmyk(0%, 29%, 41%, 11%)

Oklch

oklch(76.8% 0.087 44.2)

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

#FFF4C2

Goose Yellow · Bisque · Lemon Cream

HEX

#FFF4C2

RGB

rgb(255, 244, 194)

HSL

hsl(49, 100%, 88%)

HSB

hsb(49, 24%, 100%)

CMYK

cmyk(0%, 4%, 24%, 0%)

Oklch

oklch(96.4% 0.065 97.1)

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

#DCD4A3

Fresh Green · Wheat · Sunflower

HEX

#DCD4A3

RGB

rgb(220, 212, 163)

HSL

hsl(52, 45%, 75%)

HSB

hsb(52, 26%, 86%)

CMYK

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

Oklch

oklch(86.4% 0.065 99.8)

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

#B9A695

Apricot · DarkGray · Warm Sun

HEX

#B9A695

RGB

rgb(185, 166, 149)

HSL

hsl(28, 20%, 65%)

HSB

hsb(28, 19%, 73%)

CMYK

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

Oklch

oklch(73.7% 0.033 64.1)

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

#AE777A

Crimson · Gray · Passion Red

HEX

#AE777A

RGB

rgb(174, 119, 122)

HSL

hsl(357, 25%, 57%)

HSB

hsb(357, 32%, 68%)

CMYK

cmyk(0%, 32%, 30%, 32%)

Oklch

oklch(62.6% 0.069 15.6)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3A286

87C7E3

Analogous

E3879A

E3A286

E3D187

Triadic

E3A286

87E3A3

A387E3

Split-Comp.

E3A286

87E3D1

879AE3

Tetradic

E3A286

9AE387

87C7E3

D187E3

Contrast Matrix WCAG 2.1 Contrast

E3A286	FFF4C2	DCD4A3	B9A695	AE777A
—	1.9 Fail	1.4 Fail	1.1 Fail	1.7 Fail
1.9 Fail	—	1.4 Fail	2.1 Fail	3.3 AA Large
1.4 Fail	1.4 Fail	—	1.6 Fail	2.4 Fail
1.1 Fail	2.1 Fail	1.6 Fail	—	1.6 Fail
1.7 Fail	3.3 AA Large	2.4 Fail	1.6 Fail	—

White BG

2.1Fail

1.1Fail

1.5Fail

2.3Fail

3.7AA Large

Black BG

9.8AAA

19.0AAA

14.0AAA

9.0AAA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C68D

FAFACE

D9D8AF

B1B199

969679

Deuteranopia

CBCF8E

FBFCD1

D9DAB2

B2B39A

999E79

Tritanopia

E09293

FED8DA

DCB8BA

B89C9D

AB7979

Achromatopsia

B2B2B2

F2F2F2

D1D1D1

AAAAAA

888888

Shades & Tints Shades & Tints

#E3A286

Dark

Light

#FFF4C2

Dark

Light

#DCD4A3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3a286;
  --color-2: #fff4c2;
  --color-3: #dcd4a3;
  --color-4: #b9a695;
  --color-5: #ae777a;
}

SCSS

$color-1: #e3a286;
$color-2: #fff4c2;
$color-3: #dcd4a3;
$color-4: #b9a695;
$color-5: #ae777a;

TAILWIND

colors: {
  'brand-1': '#e3a286',
  'brand-2': '#fff4c2',
  'brand-3': '#dcd4a3',
  'brand-4': '#b9a695',
  'brand-5': '#ae777a',
}

RGB Array

[227, 162, 134], [255, 244, 194], [220, 212, 163], [185, 166, 149], [174, 119, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3A286, #FFF4C2, #DCD4A3, #B9A695, #AE777A 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: #e3a286; --color-2: #fff4c2; --color-3: #dcd4a3; --color-4: #b9a695; --color-5: #ae777a. 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