#F2E3AF + #CDD9B6 + #A8CFBC + #AFAE9C + #EDAD7D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2E3AF

Goose Yellow · Wheat · Lemon Cream

HEX

#F2E3AF

RGB

rgb(242, 227, 175)

HSL

hsl(47, 72%, 82%)

HSB

hsb(47, 28%, 95%)

CMYK

cmyk(0%, 6%, 28%, 5%)

Oklch

oklch(91.5% 0.069 93.9)

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

#CDD9B6

Willow Green · Silver · Apple Green

HEX

#CDD9B6

RGB

rgb(205, 217, 182)

HSL

hsl(81, 32%, 78%)

HSB

hsb(81, 16%, 85%)

CMYK

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

Oklch

oklch(86.7% 0.049 122.8)

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

#A8CFBC

Jade · Silver · Apple Green

HEX

#A8CFBC

RGB

rgb(168, 207, 188)

HSL

hsl(151, 29%, 74%)

HSB

hsb(151, 19%, 81%)

CMYK

cmyk(19%, 0%, 9%, 19%)

Oklch

oklch(82.1% 0.049 164.1)

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

#AFAE9C

Fresh Green · DarkGray · Sunflower

HEX

#AFAE9C

RGB

rgb(175, 174, 156)

HSL

hsl(57, 11%, 65%)

HSB

hsb(57, 11%, 69%)

CMYK

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

Oklch

oklch(74.7% 0.025 104.4)

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

#EDAD7D

Apricot · BurlyWood · Warm Sun

HEX

#EDAD7D

RGB

rgb(237, 173, 125)

HSL

hsl(26, 76%, 71%)

HSB

hsb(26, 47%, 93%)

CMYK

cmyk(0%, 27%, 47%, 7%)

Oklch

oklch(79.7% 0.098 57.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2E3AF

B0BEF2

Analogous

F2C3B0

F2E3AF

DFF2B0

Triadic

F2E3AF

B0F2E4

E4B0F2

Split-Comp.

F2E3AF

B0DFF2

C3B0F2

Tetradic

F2E3AF

B0F2C3

B0BEF2

F2B0DF

Contrast Matrix WCAG 2.1 Contrast

F2E3AF	CDD9B6	A8CFBC	AFAE9C	EDAD7D
—	1.2 Fail	1.3 Fail	1.8 Fail	1.5 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.3 Fail
1.3 Fail	1.2 Fail	—	1.3 Fail	1.1 Fail
1.8 Fail	1.5 Fail	1.3 Fail	—	1.2 Fail
1.5 Fail	1.3 Fail	1.1 Fail	1.2 Fail	—

White BG

1.3Fail

1.5Fail

1.7Fail

2.2Fail

1.9Fail

Black BG

16.4AAA

14.2AAA

12.3AAA

9.4AAA

10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECEBBC

D2D2BE

B9B9C1

AFAFA0

D1D189

Deuteranopia

ECEDBF

D2D1C1

B7B4C2

AFAFA1

D5DA8B

Tritanopia

F1C6C8

CEC5C7

AAC4C5

AFA4A5

EA9294

Achromatopsia

E2E2E2

D1D1D1

C1C1C1

ACACAC

BBBBBB

Shades & Tints Shades & Tints

#F2E3AF

Dark

Light

#CDD9B6

Dark

Light

#A8CFBC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2e3af;
  --color-2: #cdd9b6;
  --color-3: #a8cfbc;
  --color-4: #afae9c;
  --color-5: #edad7d;
}

SCSS

$color-1: #f2e3af;
$color-2: #cdd9b6;
$color-3: #a8cfbc;
$color-4: #afae9c;
$color-5: #edad7d;

TAILWIND

colors: {
  'brand-1': '#f2e3af',
  'brand-2': '#cdd9b6',
  'brand-3': '#a8cfbc',
  'brand-4': '#afae9c',
  'brand-5': '#edad7d',
}

RGB Array

[242, 227, 175], [205, 217, 182], [168, 207, 188], [175, 174, 156], [237, 173, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2E3AF, #CDD9B6, #A8CFBC, #AFAE9C, #EDAD7D 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: #f2e3af; --color-2: #cdd9b6; --color-3: #a8cfbc; --color-4: #afae9c; --color-5: #edad7d. 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