#F1DFCB + #E2D2B0 + #CBB8AA + #AEA09D + #9B8BB0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1DFCB

Goose Yellow · Bisque · Peach Orange

HEX

#F1DFCB

RGB

rgb(241, 223, 203)

HSL

hsl(32, 58%, 87%)

HSB

hsb(32, 16%, 95%)

CMYK

cmyk(0%, 7%, 16%, 5%)

Oklch

oklch(91.3% 0.033 70.3)

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

#E2D2B0

Goose Yellow · Wheat · Lemon Cream

HEX

#E2D2B0

RGB

rgb(226, 210, 176)

HSL

hsl(41, 46%, 79%)

HSB

hsb(41, 22%, 89%)

CMYK

cmyk(0%, 7%, 22%, 11%)

Oklch

oklch(86.8% 0.049 85.8)

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

#CBB8AA

Apricot · Silver · Warm Sun

HEX

#CBB8AA

RGB

rgb(203, 184, 170)

HSL

hsl(25, 24%, 73%)

HSB

hsb(25, 16%, 80%)

CMYK

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

Oklch

oklch(79.5% 0.029 58.7)

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

#AEA09D

Peach Pink · DarkGray · Silver Sand

HEX

#AEA09D

RGB

rgb(174, 160, 157)

HSL

hsl(11, 9%, 65%)

HSB

hsb(11, 10%, 68%)

CMYK

cmyk(0%, 8%, 10%, 32%)

Oklch

oklch(71.7% 0.017 32.0)

Traditional「Peach Pink」· Paint「Silver Sand」· Creative Urban Concrete

#9B8BB0

Wisteria · DarkGray · Lilac Purple

HEX

#9B8BB0

RGB

rgb(155, 139, 176)

HSL

hsl(266, 19%, 62%)

HSB

hsb(266, 21%, 69%)

CMYK

cmyk(12%, 21%, 0%, 31%)

Oklch

oklch(66.4% 0.057 304.6)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1DFCB

CBDDF1

Analogous

F1CCCB

F1DFCB

F0F1CB

Triadic

F1DFCB

CBF1DF

DFCBF1

Split-Comp.

F1DFCB

CBF0F1

CCCBF1

Tetradic

F1DFCB

CBF1CC

CBDDF1

F1CBF0

Contrast Matrix WCAG 2.1 Contrast

F1DFCB	E2D2B0	CBB8AA	AEA09D	9B8BB0
—	1.1 Fail	1.5 Fail	1.9 Fail	2.4 Fail
1.1 Fail	—	1.3 Fail	1.7 Fail	2.1 Fail
1.5 Fail	1.3 Fail	—	1.3 Fail	1.6 Fail
1.9 Fail	1.7 Fail	1.3 Fail	—	1.2 Fail
2.4 Fail	2.1 Fail	1.6 Fail	1.2 Fail	—

White BG

1.3Fail

1.5Fail

1.9Fail

2.5Fail

3.1AA Large

Black BG

16.2AAA

14.1AAA

11.0AAA

8.3AAA

6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E9D0

DBDBB8

C3C3AD

A8A89E

9494A7

Deuteranopia

EAECD1

DCDDBA

C4C5AE

A9AA9E

9596A5

Tritanopia

F0D4D5

E1BFC0

CAB0B1

AD9E9E

9AA09E

Achromatopsia

E2E2E2

D3D3D3

BCBCBC

A4A4A4

949494

Shades & Tints Shades & Tints

#F1DFCB

Dark

Light

#E2D2B0

Dark

Light

#CBB8AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1dfcb;
  --color-2: #e2d2b0;
  --color-3: #cbb8aa;
  --color-4: #aea09d;
  --color-5: #9b8bb0;
}

SCSS

$color-1: #f1dfcb;
$color-2: #e2d2b0;
$color-3: #cbb8aa;
$color-4: #aea09d;
$color-5: #9b8bb0;

TAILWIND

colors: {
  'brand-1': '#f1dfcb',
  'brand-2': '#e2d2b0',
  'brand-3': '#cbb8aa',
  'brand-4': '#aea09d',
  'brand-5': '#9b8bb0',
}

RGB Array

[241, 223, 203], [226, 210, 176], [203, 184, 170], [174, 160, 157], [155, 139, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1DFCB, #E2D2B0, #CBB8AA, #AEA09D, #9B8BB0 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: #f1dfcb; --color-2: #e2d2b0; --color-3: #cbb8aa; --color-4: #aea09d; --color-5: #9b8bb0. 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