#E8F4EA + #F5EDD8 + #F7D0AB + #F3ABAB + #B6AD9F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E8F4EA

Celadon · Linen · Mint Green

HEX

#E8F4EA

RGB

rgb(232, 244, 234)

HSL

hsl(130, 35%, 93%)

HSB

hsb(130, 5%, 96%)

CMYK

cmyk(5%, 0%, 4%, 4%)

Oklch

oklch(95.5% 0.018 150.6)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#F5EDD8

Goose Yellow · Beige · Lemon Cream

HEX

#F5EDD8

RGB

rgb(245, 237, 216)

HSL

hsl(43, 59%, 90%)

HSB

hsb(43, 12%, 96%)

CMYK

cmyk(0%, 3%, 12%, 4%)

Oklch

oklch(94.7% 0.029 89.6)

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

#F7D0AB

Apricot · Wheat · Peach Orange

HEX

#F7D0AB

RGB

rgb(247, 208, 171)

HSL

hsl(29, 83%, 82%)

HSB

hsb(29, 31%, 97%)

CMYK

cmyk(0%, 16%, 31%, 3%)

Oklch

oklch(88.2% 0.066 65.3)

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

#F3ABAB

Peach Pink · LightPink · Cherry Blossom

HEX

#F3ABAB

RGB

rgb(243, 171, 171)

HSL

hsl(0, 75%, 81%)

HSB

hsb(0, 30%, 95%)

CMYK

cmyk(0%, 30%, 30%, 5%)

Oklch

oklch(81.0% 0.085 19.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#B6AD9F

Ginger · DarkGray · Warm Sun

HEX

#B6AD9F

RGB

rgb(182, 173, 159)

HSL

hsl(37, 14%, 67%)

HSB

hsb(37, 13%, 71%)

CMYK

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

Oklch

oklch(75.1% 0.022 79.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8F4EA

F3E7F1

Analogous

EBF3E7

E8F4EA

E7F3EF

Triadic

E8F4EA

E9E7F3

F3E9E7

Split-Comp.

E8F4EA

EFE7F3

F3E7EB

Tetradic

E8F4EA

E7EBF3

F3E7F1

F3EFE7

Contrast Matrix WCAG 2.1 Contrast

E8F4EA	F5EDD8	F7D0AB	F3ABAB	B6AD9F
—	1.0 Fail	1.3 Fail	1.7 Fail	2.0 Fail
1.0 Fail	—	1.2 Fail	1.6 Fail	1.9 Fail
1.3 Fail	1.2 Fail	—	1.3 Fail	1.5 Fail
1.7 Fail	1.6 Fail	1.3 Fail	—	1.2 Fail
2.0 Fail	1.9 Fail	1.5 Fail	1.2 Fail	—

White BG

1.1Fail

1.2Fail

1.4Fail

1.9Fail

2.2Fail

Black BG

18.6AAA

18.0AAA

14.6AAA

11.2AAA

9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDEC

F2F1DD

E6E6B4

D4D3AB

B2B2A2

Deuteranopia

EDECED

F2F3DE

E8EBB6

D8DDAB

B3B3A3

Tritanopia

E9EEEF

F5E1E2

F5BBBD

EFABAB

B6A5A6

Achromatopsia

EFEFEF

EDEDED

D7D7D7

C1C1C1

AEAEAE

Shades & Tints Shades & Tints

#E8F4EA

Dark

Light

#F5EDD8

Dark

Light

#F7D0AB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8f4ea;
  --color-2: #f5edd8;
  --color-3: #f7d0ab;
  --color-4: #f3abab;
  --color-5: #b6ad9f;
}

SCSS

$color-1: #e8f4ea;
$color-2: #f5edd8;
$color-3: #f7d0ab;
$color-4: #f3abab;
$color-5: #b6ad9f;

TAILWIND

colors: {
  'brand-1': '#e8f4ea',
  'brand-2': '#f5edd8',
  'brand-3': '#f7d0ab',
  'brand-4': '#f3abab',
  'brand-5': '#b6ad9f',
}

RGB Array

[232, 244, 234], [245, 237, 216], [247, 208, 171], [243, 171, 171], [182, 173, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8F4EA, #F5EDD8, #F7D0AB, #F3ABAB, #B6AD9F 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: #e8f4ea; --color-2: #f5edd8; --color-3: #f7d0ab; --color-4: #f3abab; --color-5: #b6ad9f. 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