#B6CCB4 + #DFE3C3 + #F7EED3 + #F2E3C2 + #F7D3B4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B6CCB4

Celadon · Silver · Apple Green

HEX

#B6CCB4

RGB

rgb(182, 204, 180)

HSL

hsl(115, 19%, 75%)

HSB

hsb(115, 12%, 80%)

CMYK

cmyk(11%, 0%, 12%, 20%)

Oklch

oklch(82.2% 0.041 142.9)

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

#DFE3C3

Fresh Green · LightGray · Lemon Cream

HEX

#DFE3C3

RGB

rgb(223, 227, 195)

HSL

hsl(67, 36%, 83%)

HSB

hsb(67, 14%, 89%)

CMYK

cmyk(2%, 0%, 14%, 11%)

Oklch

oklch(90.4% 0.043 113.0)

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

#F7EED3

Goose Yellow · Beige · Lemon Cream

HEX

#F7EED3

RGB

rgb(247, 238, 211)

HSL

hsl(45, 69%, 90%)

HSB

hsb(45, 15%, 97%)

CMYK

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

Oklch

oklch(94.9% 0.037 91.7)

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

#F2E3C2

Goose Yellow · Bisque · Lemon Cream

HEX

#F2E3C2

RGB

rgb(242, 227, 194)

HSL

hsl(41, 65%, 85%)

HSB

hsb(41, 20%, 95%)

CMYK

cmyk(0%, 6%, 20%, 5%)

Oklch

oklch(91.9% 0.046 86.5)

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

#F7D3B4

Apricot · Wheat · Peach Orange

HEX

#F7D3B4

RGB

rgb(247, 211, 180)

HSL

hsl(28, 81%, 84%)

HSB

hsb(28, 27%, 97%)

CMYK

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

Oklch

oklch(89.0% 0.058 62.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B6CCB4

C9B3CB

Analogous

C1CBB3

B6CCB4

B3CBBD

Triadic

B6CCB4

B3B5CB

CBB3B5

Split-Comp.

B6CCB4

BDB3CB

CBB3C1

Tetradic

B6CCB4

B3C1CB

C9B3CB

CBBDB3

Contrast Matrix WCAG 2.1 Contrast

B6CCB4	DFE3C3	F7EED3	F2E3C2	F7D3B4
—	1.3 Fail	1.5 Fail	1.3 Fail	1.2 Fail
1.3 Fail	—	1.1 Fail	1.0 Fail	1.1 Fail
1.5 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.3 Fail	1.0 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.1 Fail	1.2 Fail	1.1 Fail	—

White BG

1.7Fail

1.3Fail

1.2Fail

1.3Fail

1.4Fail

Black BG

12.3AAA

15.9AAA

18.1AAA

16.5AAA

14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C0BA

E1E1CB

F3F3DA

ECEBCA

E7E7BC

Deuteranopia

BEBDBB

E1E0CD

F4F4DB

ECEDCC

EAECBD

Tritanopia

B7BEBF

DFD1D2

F7DFE0

F1D0D2

F5C1C3

Achromatopsia

C3C3C3

DEDEDE

EEEEEE

E4E4E4

DADADA

Shades & Tints Shades & Tints

#B6CCB4

Dark

Light

#DFE3C3

Dark

Light

#F7EED3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b6ccb4;
  --color-2: #dfe3c3;
  --color-3: #f7eed3;
  --color-4: #f2e3c2;
  --color-5: #f7d3b4;
}

SCSS

$color-1: #b6ccb4;
$color-2: #dfe3c3;
$color-3: #f7eed3;
$color-4: #f2e3c2;
$color-5: #f7d3b4;

TAILWIND

colors: {
  'brand-1': '#b6ccb4',
  'brand-2': '#dfe3c3',
  'brand-3': '#f7eed3',
  'brand-4': '#f2e3c2',
  'brand-5': '#f7d3b4',
}

RGB Array

[182, 204, 180], [223, 227, 195], [247, 238, 211], [242, 227, 194], [247, 211, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B6CCB4, #DFE3C3, #F7EED3, #F2E3C2, #F7D3B4 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: #b6ccb4; --color-2: #dfe3c3; --color-3: #f7eed3; --color-4: #f2e3c2; --color-5: #f7d3b4. 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