#F0E9CC + #F7BA6A + #E68166 + #A64C66 + #8DB3AE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0E9CC

Goose Yellow · Bisque · Lemon Cream

HEX

#F0E9CC

RGB

rgb(240, 233, 204)

HSL

hsl(48, 55%, 87%)

HSB

hsb(48, 15%, 94%)

CMYK

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

Oklch

oklch(93.2% 0.039 95.9)

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

#F7BA6A

Ginger · SandyBrown · Warm Sun

HEX

#F7BA6A

RGB

rgb(247, 186, 106)

HSL

hsl(34, 90%, 69%)

HSB

hsb(34, 57%, 97%)

CMYK

cmyk(0%, 25%, 57%, 3%)

Oklch

oklch(82.9% 0.120 72.3)

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

#E68166

Peach Pink · Salmon · Coral Red

HEX

#E68166

RGB

rgb(230, 129, 102)

HSL

hsl(13, 72%, 65%)

HSB

hsb(13, 56%, 90%)

CMYK

cmyk(0%, 44%, 56%, 10%)

Oklch

oklch(70.8% 0.131 35.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#A64C66

Dark Violet · Sienna · Camellia

HEX

#A64C66

RGB

rgb(166, 76, 102)

HSL

hsl(343, 37%, 47%)

HSB

hsb(343, 54%, 65%)

CMYK

cmyk(0%, 54%, 39%, 35%)

Oklch

oklch(53.8% 0.121 3.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#8DB3AE

Jade · DarkGray · Lake Green

HEX

#8DB3AE

RGB

rgb(141, 179, 174)

HSL

hsl(172, 20%, 63%)

HSB

hsb(172, 21%, 70%)

CMYK

cmyk(21%, 0%, 3%, 30%)

Oklch

oklch(73.7% 0.042 186.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E9CC

CCD3F0

Analogous

F0D7CC

F0E9CC

E5F0CC

Triadic

F0E9CC

CCF0E9

E9CCF0

Split-Comp.

F0E9CC

CCE5F0

D7CCF0

Tetradic

F0E9CC

CCF0D7

CCD3F0

F0CCE5

Contrast Matrix WCAG 2.1 Contrast

F0E9CC	F7BA6A	E68166	A64C66	8DB3AE
—	1.4 Fail	2.2 Fail	4.5 AA Large	1.9 Fail
1.4 Fail	—	1.6 Fail	3.2 AA Large	1.3 Fail
2.2 Fail	1.6 Fail	—	2.0 Fail	1.2 Fail
4.5 AA Large	3.2 AA Large	2.0 Fail	—	2.4 Fail
1.9 Fail	1.3 Fail	1.2 Fail	2.4 Fail	—

White BG

1.2Fail

1.7Fail

2.7Fail

5.5AA

2.3Fail

Black BG

17.2AAA

12.2AAA

7.7AAA

3.8AA Large

9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDD3

DDDC7D

BAB96D

7F7E60

9D9EAF

Deuteranopia

EDEED5

E0E582

C0C86E

848B5E

9B98B0

Tritanopia

F0D9DA

F48D90

E17273

A25B5A

8FB0B0

Achromatopsia

E8E8E8

C3C3C3

9C9C9C

6A6A6A

A7A7A7

Shades & Tints Shades & Tints

#F0E9CC

Dark

Light

#F7BA6A

Dark

Light

#E68166

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e9cc;
  --color-2: #f7ba6a;
  --color-3: #e68166;
  --color-4: #a64c66;
  --color-5: #8db3ae;
}

SCSS

$color-1: #f0e9cc;
$color-2: #f7ba6a;
$color-3: #e68166;
$color-4: #a64c66;
$color-5: #8db3ae;

TAILWIND

colors: {
  'brand-1': '#f0e9cc',
  'brand-2': '#f7ba6a',
  'brand-3': '#e68166',
  'brand-4': '#a64c66',
  'brand-5': '#8db3ae',
}

RGB Array

[240, 233, 204], [247, 186, 106], [230, 129, 102], [166, 76, 102], [141, 179, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0E9CC, #F7BA6A, #E68166, #A64C66, #8DB3AE 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: #f0e9cc; --color-2: #f7ba6a; --color-3: #e68166; --color-4: #a64c66; --color-5: #8db3ae. 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