#B4E6C1 + #E6E0BE + #DFD894 + #FDAE90 + #9A7E8C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B4E6C1

Celadon · Silver · Apple Green

HEX

#B4E6C1

RGB

rgb(180, 230, 193)

HSL

hsl(136, 50%, 80%)

HSB

hsb(136, 22%, 90%)

CMYK

cmyk(22%, 0%, 16%, 10%)

Oklch

oklch(88.0% 0.072 152.7)

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

#E6E0BE

Fresh Green · Wheat · Lemon Cream

HEX

#E6E0BE

RGB

rgb(230, 224, 190)

HSL

hsl(51, 44%, 82%)

HSB

hsb(51, 17%, 90%)

CMYK

cmyk(0%, 3%, 17%, 10%)

Oklch

oklch(90.3% 0.045 99.0)

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

#DFD894

Fresh Green · Khaki · Sunflower

HEX

#DFD894

RGB

rgb(223, 216, 148)

HSL

hsl(54, 54%, 73%)

HSB

hsb(54, 34%, 87%)

CMYK

cmyk(0%, 3%, 34%, 13%)

Oklch

oklch(87.2% 0.088 103.0)

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

#FDAE90

Apricot · LightSalmon · Peach Orange

HEX

#FDAE90

RGB

rgb(253, 174, 144)

HSL

hsl(17, 96%, 78%)

HSB

hsb(17, 43%, 99%)

CMYK

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

Oklch

oklch(82.0% 0.102 41.6)

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

#9A7E8C

Dark Violet · Gray · Rose Pink

HEX

#9A7E8C

RGB

rgb(154, 126, 140)

HSL

hsl(330, 12%, 55%)

HSB

hsb(330, 18%, 60%)

CMYK

cmyk(0%, 18%, 9%, 40%)

Oklch

oklch(62.4% 0.040 346.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4E6C1

E6B3D8

Analogous

BEE6B3

B4E6C1

B3E6DA

Triadic

B4E6C1

C0B3E6

E6C0B3

Split-Comp.

B4E6C1

DAB3E6

E6B3BE

Tetradic

B4E6C1

B3BEE6

E6B3D8

E6DAB3

Contrast Matrix WCAG 2.1 Contrast

B4E6C1	E6E0BE	DFD894	FDAE90	9A7E8C
—	1.0 Fail	1.0 Fail	1.3 Fail	2.6 Fail
1.0 Fail	—	1.1 Fail	1.4 Fail	2.7 Fail
1.0 Fail	1.1 Fail	—	1.2 Fail	2.5 Fail
1.3 Fail	1.4 Fail	1.2 Fail	—	2.0 Fail
2.6 Fail	2.7 Fail	2.5 Fail	2.0 Fail	—

White BG

1.4Fail

1.3Fail

1.5Fail

1.8Fail

3.7AA Large

Black BG

15.0AAA

15.8AAA

14.4AAA

11.6AAA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACACA

E3E3C6

DCDCA4

DBDA97

8E8E89

Deuteranopia

C7C3CC

E4E4C8

DCDDA8

DFE599

909288

Tritanopia

B7D1D3

E6CDCE

DFB1B4

F99D9E

998685

Achromatopsia

D3D3D3

DEDEDE

D2D2D2

C2C2C2

888888

Shades & Tints Shades & Tints

#B4E6C1

Dark

Light

#E6E0BE

Dark

Light

#DFD894

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4e6c1;
  --color-2: #e6e0be;
  --color-3: #dfd894;
  --color-4: #fdae90;
  --color-5: #9a7e8c;
}

SCSS

$color-1: #b4e6c1;
$color-2: #e6e0be;
$color-3: #dfd894;
$color-4: #fdae90;
$color-5: #9a7e8c;

TAILWIND

colors: {
  'brand-1': '#b4e6c1',
  'brand-2': '#e6e0be',
  'brand-3': '#dfd894',
  'brand-4': '#fdae90',
  'brand-5': '#9a7e8c',
}

RGB Array

[180, 230, 193], [230, 224, 190], [223, 216, 148], [253, 174, 144], [154, 126, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4E6C1, #E6E0BE, #DFD894, #FDAE90, #9A7E8C 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: #b4e6c1; --color-2: #e6e0be; --color-3: #dfd894; --color-4: #fdae90; --color-5: #9a7e8c. 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