#FFE3AF + #E0E0AD + #A1CEB9 + #AB85AB + #8E7D8E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFE3AF

Goose Yellow · Wheat · Peach Orange

HEX

#FFE3AF

RGB

rgb(255, 227, 175)

HSL

hsl(39, 100%, 84%)

HSB

hsb(39, 31%, 100%)

CMYK

cmyk(0%, 11%, 31%, 0%)

Oklch

oklch(92.6% 0.074 82.8)

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

#E0E0AD

Fresh Green · Wheat · Lemon Cream

HEX

#E0E0AD

RGB

rgb(224, 224, 173)

HSL

hsl(60, 45%, 78%)

HSB

hsb(60, 23%, 88%)

CMYK

cmyk(0%, 0%, 23%, 12%)

Oklch

oklch(89.4% 0.067 107.7)

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

#A1CEB9

Jade · Silver · Apple Green

HEX

#A1CEB9

RGB

rgb(161, 206, 185)

HSL

hsl(152, 31%, 72%)

HSB

hsb(152, 22%, 81%)

CMYK

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

Oklch

oklch(81.3% 0.056 164.9)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#AB85AB

Rose Purple · DarkGray · Violet

HEX

#AB85AB

RGB

rgb(171, 133, 171)

HSL

hsl(300, 18%, 60%)

HSB

hsb(300, 22%, 67%)

CMYK

cmyk(0%, 22%, 0%, 33%)

Oklch

oklch(66.5% 0.070 326.3)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#8E7D8E

Ash · Gray · Warm Gray

HEX

#8E7D8E

RGB

rgb(142, 125, 142)

HSL

hsl(300, 7%, 52%)

HSB

hsb(300, 12%, 56%)

CMYK

cmyk(0%, 12%, 0%, 44%)

Oklch

oklch(61.1% 0.032 326.0)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFE3AF

ADCAFF

Analogous

FFBAAD

FFE3AF

F3FFAD

Triadic

FFE3AF

ADFFE2

E2ADFF

Split-Comp.

FFE3AF

ADF3FF

BAADFF

Tetradic

FFE3AF

ADFFBA

ADCAFF

FFADF3

Contrast Matrix WCAG 2.1 Contrast

FFE3AF	E0E0AD	A1CEB9	AB85AB	8E7D8E
—	1.1 Fail	1.4 Fail	2.5 Fail	3.1 AA Large
1.1 Fail	—	1.3 Fail	2.3 Fail	2.8 Fail
1.4 Fail	1.3 Fail	—	1.8 Fail	2.2 Fail
2.5 Fail	2.3 Fail	1.8 Fail	—	1.2 Fail
3.1 AA Large	2.8 Fail	2.2 Fail	1.2 Fail	—

White BG

1.2Fail

1.4Fail

1.7Fail

3.1AA Large

3.8AA Large

Black BG

16.9AAA

15.4AAA

12.0AAA

6.7AA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3BC

E0E0B9

B4B5BE

9B9AA2

87868A

Deuteranopia

F5F7BF

E0E0BC

B2AFBF

9DA0A0

888989

Tritanopia

FEC6C8

E0C3C5

A3C2C3

A99B99

8D8786

Achromatopsia

E5E5E5

DADADA

BEBEBE

959595

848484

Shades & Tints Shades & Tints

#FFE3AF

Dark

Light

#E0E0AD

Dark

Light

#A1CEB9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffe3af;
  --color-2: #e0e0ad;
  --color-3: #a1ceb9;
  --color-4: #ab85ab;
  --color-5: #8e7d8e;
}

SCSS

$color-1: #ffe3af;
$color-2: #e0e0ad;
$color-3: #a1ceb9;
$color-4: #ab85ab;
$color-5: #8e7d8e;

TAILWIND

colors: {
  'brand-1': '#ffe3af',
  'brand-2': '#e0e0ad',
  'brand-3': '#a1ceb9',
  'brand-4': '#ab85ab',
  'brand-5': '#8e7d8e',
}

RGB Array

[255, 227, 175], [224, 224, 173], [161, 206, 185], [171, 133, 171], [142, 125, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFE3AF, #E0E0AD, #A1CEB9, #AB85AB, #8E7D8E 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: #ffe3af; --color-2: #e0e0ad; --color-3: #a1ceb9; --color-4: #ab85ab; --color-5: #8e7d8e. 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