#B8D9B8 + #CFC896 + #E6B06E + #E3826F + #DE5069 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8D9B8

Celadon · Silver · Apple Green

HEX

#B8D9B8

RGB

rgb(184, 217, 184)

HSL

hsl(120, 30%, 79%)

HSB

hsb(120, 15%, 85%)

CMYK

cmyk(15%, 0%, 15%, 15%)

Oklch

oklch(85.2% 0.057 145.1)

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

#CFC896

Fresh Green · Tan · Sunflower

HEX

#CFC896

RGB

rgb(207, 200, 150)

HSL

hsl(53, 37%, 70%)

HSB

hsb(53, 28%, 81%)

CMYK

cmyk(0%, 3%, 28%, 19%)

Oklch

oklch(82.6% 0.067 101.0)

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

#E6B06E

Ginger · SandyBrown · Warm Sun

HEX

#E6B06E

RGB

rgb(230, 176, 110)

HSL

hsl(33, 71%, 67%)

HSB

hsb(33, 52%, 90%)

CMYK

cmyk(0%, 23%, 52%, 10%)

Oklch

oklch(79.3% 0.105 70.9)

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

#E3826F

Peach Pink · LightCoral · Coral Red

HEX

#E3826F

RGB

rgb(227, 130, 111)

HSL

hsl(10, 67%, 66%)

HSB

hsb(10, 51%, 89%)

CMYK

cmyk(0%, 43%, 51%, 11%)

Oklch

oklch(70.8% 0.124 32.1)

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

#DE5069

Vermilion · Tomato · Passion Red

HEX

#DE5069

RGB

rgb(222, 80, 105)

HSL

hsl(349, 68%, 59%)

HSB

hsb(349, 64%, 87%)

CMYK

cmyk(0%, 64%, 53%, 13%)

Oklch

oklch(62.9% 0.177 13.3)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8D9B8

DAB9DA

Analogous

C9DAB9

B8D9B8

B9DAC9

Triadic

B8D9B8

B9B9DA

DAB9B9

Split-Comp.

B8D9B8

C9B9DA

DAB9C9

Tetradic

B8D9B8

B9C9DA

DAB9DA

DAC9B9

Contrast Matrix WCAG 2.1 Contrast

B8D9B8	CFC896	E6B06E	E3826F	DE5069
—	1.1 Fail	1.3 Fail	1.8 Fail	2.5 Fail
1.1 Fail	—	1.1 Fail	1.6 Fail	2.3 Fail
1.3 Fail	1.1 Fail	—	1.4 Fail	2.0 Fail
1.8 Fail	1.6 Fail	1.4 Fail	—	1.4 Fail
2.5 Fail	2.3 Fail	2.0 Fail	1.4 Fail	—

White BG

1.5Fail

1.7Fail

1.9Fail

2.7Fail

3.8AA Large

Black BG

13.7AAA

12.4AAA

10.8AAA

7.7AAA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C7C0

CCCCA2

CFCE7E

B9B874

A19F63

Deuteranopia

C4C2C2

CCCDA5

D2D682

BFC675

A9B362

Tritanopia

BAC6C8

CFACAE

E38B8D

DE7778

D75E5D

Achromatopsia

CBCBCB

C4C4C4

B9B9B9

9D9D9D

7D7D7D

Shades & Tints Shades & Tints

#B8D9B8

Dark

Light

#CFC896

Dark

Light

#E6B06E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8d9b8;
  --color-2: #cfc896;
  --color-3: #e6b06e;
  --color-4: #e3826f;
  --color-5: #de5069;
}

SCSS

$color-1: #b8d9b8;
$color-2: #cfc896;
$color-3: #e6b06e;
$color-4: #e3826f;
$color-5: #de5069;

TAILWIND

colors: {
  'brand-1': '#b8d9b8',
  'brand-2': '#cfc896',
  'brand-3': '#e6b06e',
  'brand-4': '#e3826f',
  'brand-5': '#de5069',
}

RGB Array

[184, 217, 184], [207, 200, 150], [230, 176, 110], [227, 130, 111], [222, 80, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8D9B8, #CFC896, #E6B06E, #E3826F, #DE5069 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: #b8d9b8; --color-2: #cfc896; --color-3: #e6b06e; --color-4: #e3826f; --color-5: #de5069. 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