#F0E3D1 + #E6D4C8 + #B6D1D1 + #FF9F05 + #B3AFA4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0E3D1

Goose Yellow · Bisque · Peach Orange

HEX

#F0E3D1

RGB

rgb(240, 227, 209)

HSL

hsl(35, 51%, 88%)

HSB

hsb(35, 13%, 94%)

CMYK

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

Oklch

oklch(92.1% 0.028 76.2)

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

#E6D4C8

Apricot · LightGray · Peach Orange

HEX

#E6D4C8

RGB

rgb(230, 212, 200)

HSL

hsl(24, 37%, 84%)

HSB

hsb(24, 13%, 90%)

CMYK

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

Oklch

oklch(88.1% 0.026 56.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#B6D1D1

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#B6D1D1

RGB

rgb(182, 209, 209)

HSL

hsl(180, 23%, 77%)

HSB

hsb(180, 13%, 82%)

CMYK

cmyk(13%, 0%, 0%, 18%)

Oklch

oklch(84.1% 0.029 196.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#FF9F05

Ginger · Orange · Warm Sun

HEX

#FF9F05

RGB

rgb(255, 159, 5)

HSL

hsl(37, 100%, 51%)

HSB

hsb(37, 98%, 100%)

CMYK

cmyk(0%, 38%, 98%, 0%)

Oklch

oklch(78.2% 0.172 67.4)

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

#B3AFA4

Ginger · DarkGray · Silver Sand

HEX

#B3AFA4

RGB

rgb(179, 175, 164)

HSL

hsl(44, 9%, 67%)

HSB

hsb(44, 8%, 70%)

CMYK

cmyk(0%, 2%, 8%, 30%)

Oklch

oklch(75.4% 0.016 90.3)

Traditional「Ginger」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E3D1

D1DEF0

Analogous

F0D3D1

F0E3D1

EDF0D1

Triadic

F0E3D1

D1F0E3

E3D1F0

Split-Comp.

F0E3D1

D1EDF0

D3D1F0

Tetradic

F0E3D1

D1F0D3

D1DEF0

F0D1ED

Contrast Matrix WCAG 2.1 Contrast

F0E3D1	E6D4C8	B6D1D1	FF9F05	B3AFA4
—	1.1 Fail	1.3 Fail	1.6 Fail	1.7 Fail
1.1 Fail	—	1.1 Fail	1.4 Fail	1.5 Fail
1.3 Fail	1.1 Fail	—	1.3 Fail	1.4 Fail
1.6 Fail	1.4 Fail	1.3 Fail	—	1.1 Fail
1.7 Fail	1.5 Fail	1.4 Fail	1.1 Fail	—

White BG

1.3Fail

1.4Fail

1.6Fail

2.1Fail

2.2Fail

Black BG

16.6AAA

14.6AAA

13.0AAA

10.2AAA

9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAD5

DEDECB

C2C2D1

D5D52A

B1B1A7

Deuteranopia

EBECD6

DFE1CC

C0BED1

DBE233

B2B2A7

Tritanopia

EFD9DA

E5CDCE

B7D1D1

FA484E

B3A9A9

Achromatopsia

E5E5E5

D8D8D8

C9C9C9

AAAAAA

AFAFAF

Shades & Tints Shades & Tints

#F0E3D1

Dark

Light

#E6D4C8

Dark

Light

#B6D1D1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e3d1;
  --color-2: #e6d4c8;
  --color-3: #b6d1d1;
  --color-4: #ff9f05;
  --color-5: #b3afa4;
}

SCSS

$color-1: #f0e3d1;
$color-2: #e6d4c8;
$color-3: #b6d1d1;
$color-4: #ff9f05;
$color-5: #b3afa4;

TAILWIND

colors: {
  'brand-1': '#f0e3d1',
  'brand-2': '#e6d4c8',
  'brand-3': '#b6d1d1',
  'brand-4': '#ff9f05',
  'brand-5': '#b3afa4',
}

RGB Array

[240, 227, 209], [230, 212, 200], [182, 209, 209], [255, 159, 5], [179, 175, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0E3D1, #E6D4C8, #B6D1D1, #FF9F05, #B3AFA4 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: #f0e3d1; --color-2: #e6d4c8; --color-3: #b6d1d1; --color-4: #ff9f05; --color-5: #b3afa4. 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