#B8DAAC + #CED47C + #E5A586 + #DF8884 + #7A8173 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8DAAC

Celadon · Silver · Apple Green

HEX

#B8DAAC

RGB

rgb(184, 218, 172)

HSL

hsl(104, 38%, 76%)

HSB

hsb(104, 21%, 85%)

CMYK

cmyk(16%, 0%, 21%, 15%)

Oklch

oklch(85.2% 0.072 137.6)

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

#CED47C

Fresh Green · BurlyWood · Sunflower

HEX

#CED47C

RGB

rgb(206, 212, 124)

HSL

hsl(64, 51%, 66%)

HSB

hsb(64, 42%, 83%)

CMYK

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

Oklch

oklch(84.6% 0.112 111.9)

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

#E5A586

Apricot · DarkSalmon · Warm Sun

HEX

#E5A586

RGB

rgb(229, 165, 134)

HSL

hsl(20, 65%, 71%)

HSB

hsb(20, 41%, 90%)

CMYK

cmyk(0%, 28%, 41%, 10%)

Oklch

oklch(77.5% 0.087 46.8)

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

#DF8884

Peach Pink · LightCoral · Coral Red

HEX

#DF8884

RGB

rgb(223, 136, 132)

HSL

hsl(3, 59%, 70%)

HSB

hsb(3, 41%, 87%)

CMYK

cmyk(0%, 39%, 41%, 13%)

Oklch

oklch(71.7% 0.107 22.9)

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

#7A8173

Ink Gray · Gray · Warm Gray

HEX

#7A8173

RGB

rgb(122, 129, 115)

HSL

hsl(90, 6%, 48%)

HSB

hsb(90, 11%, 51%)

CMYK

cmyk(5%, 0%, 11%, 49%)

Oklch

oklch(59.3% 0.022 128.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8DAAC

CDABD9

Analogous

CED9AB

B8DAAC

ABD9B5

Triadic

B8DAAC

ABB7D9

D9ABB7

Split-Comp.

B8DAAC

B5ABD9

D9ABCE

Tetradic

B8DAAC

ABCED9

CDABD9

D9B5AB

Contrast Matrix WCAG 2.1 Contrast

B8DAAC	CED47C	E5A586	DF8884	7A8173
—	1.0 Fail	1.4 Fail	1.7 Fail	2.6 Fail
1.0 Fail	—	1.3 Fail	1.7 Fail	2.6 Fail
1.4 Fail	1.3 Fail	—	1.3 Fail	1.9 Fail
1.7 Fail	1.7 Fail	1.3 Fail	—	1.5 Fail
2.6 Fail	2.6 Fail	1.9 Fail	1.5 Fail	—

White BG

1.5Fail

1.6Fail

2.1Fail

2.6Fail

4.0AA Large

Black BG

13.7AAA

13.3AAA

10.1AAA

8.0AAA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C7B7

D1D191

C9C98E

B9B985

7D7D76

Deuteranopia

C5C2BA

D0D096

CDD28F

BEC585

7D7C77

Tritanopia

BAC0C2

CEA2A6

E29395

DB8686

7A797A

Achromatopsia

CBCBCB

C8C8C8

B5B5B5

A2A2A2

7D7D7D

Shades & Tints Shades & Tints

#B8DAAC

Dark

Light

#CED47C

Dark

Light

#E5A586

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8daac;
  --color-2: #ced47c;
  --color-3: #e5a586;
  --color-4: #df8884;
  --color-5: #7a8173;
}

SCSS

$color-1: #b8daac;
$color-2: #ced47c;
$color-3: #e5a586;
$color-4: #df8884;
$color-5: #7a8173;

TAILWIND

colors: {
  'brand-1': '#b8daac',
  'brand-2': '#ced47c',
  'brand-3': '#e5a586',
  'brand-4': '#df8884',
  'brand-5': '#7a8173',
}

RGB Array

[184, 218, 172], [206, 212, 124], [229, 165, 134], [223, 136, 132], [122, 129, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8DAAC, #CED47C, #E5A586, #DF8884, #7A8173 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: #b8daac; --color-2: #ced47c; --color-3: #e5a586; --color-4: #df8884; --color-5: #7a8173. 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