#B3B1A5 + #B6C5AE + #D6C8AB + #F1CDA9 + #E4D7AD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B3B1A5

Fresh Green · DarkGray · Silver Sand

HEX

#B3B1A5

RGB

rgb(179, 177, 165)

HSL

hsl(51, 8%, 67%)

HSB

hsb(51, 8%, 70%)

CMYK

cmyk(0%, 1%, 8%, 30%)

Oklch

oklch(75.9% 0.017 99.1)

Traditional「Fresh Green」· Paint「Silver Sand」· Creative Urban Concrete

#B6C5AE

Celadon · Silver · Apple Green

HEX

#B6C5AE

RGB

rgb(182, 197, 174)

HSL

hsl(99, 17%, 73%)

HSB

hsb(99, 12%, 77%)

CMYK

cmyk(8%, 0%, 12%, 23%)

Oklch

oklch(80.6% 0.036 134.6)

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

#D6C8AB

Goose Yellow · Silver · Sunflower

HEX

#D6C8AB

RGB

rgb(214, 200, 171)

HSL

hsl(40, 34%, 75%)

HSB

hsb(40, 20%, 84%)

CMYK

cmyk(0%, 7%, 20%, 16%)

Oklch

oklch(83.7% 0.042 85.3)

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

#F1CDA9

Goose Yellow · Wheat · Peach Orange

HEX

#F1CDA9

RGB

rgb(241, 205, 169)

HSL

hsl(30, 72%, 80%)

HSB

hsb(30, 30%, 95%)

CMYK

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

Oklch

oklch(87.0% 0.063 66.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E4D7AD

Goose Yellow · Wheat · Lemon Cream

HEX

#E4D7AD

RGB

rgb(228, 215, 173)

HSL

hsl(46, 50%, 79%)

HSB

hsb(46, 24%, 89%)

CMYK

cmyk(0%, 6%, 24%, 11%)

Oklch

oklch(87.9% 0.057 92.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3B1A5

A4A6B2

Analogous

B2A9A4

B3B1A5

ADB2A4

Triadic

B3B1A5

A4B2B0

B0A4B2

Split-Comp.

B3B1A5

A4ADB2

A9A4B2

Tetradic

B3B1A5

A4B2A9

A4A6B2

B2A4AD

Contrast Matrix WCAG 2.1 Contrast

B3B1A5	B6C5AE	D6C8AB	F1CDA9	E4D7AD
—	1.2 Fail	1.3 Fail	1.4 Fail	1.5 Fail
1.2 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.0 Fail
1.5 Fail	1.3 Fail	1.2 Fail	1.0 Fail	—

White BG

2.2Fail

1.8Fail

1.7Fail

1.5Fail

1.4Fail

Black BG

9.7AAA

11.6AAA

12.7AAA

14.0AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B2A8

BCBDB4

D0D0B2

E1E1B2

DEDEB7

Deuteranopia

B2B2A9

BCBBB5

D1D2B4

E4E6B4

DFE0BA

Tritanopia

B3AAAB

B7B8B9

D5B8B9

EFB9BA

E3BFC1

Achromatopsia

B0B0B0

BEBEBE

C9C9C9

D4D4D4

D6D6D6

Shades & Tints Shades & Tints

#B3B1A5

Dark

Light

#B6C5AE

Dark

Light

#D6C8AB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3b1a5;
  --color-2: #b6c5ae;
  --color-3: #d6c8ab;
  --color-4: #f1cda9;
  --color-5: #e4d7ad;
}

SCSS

$color-1: #b3b1a5;
$color-2: #b6c5ae;
$color-3: #d6c8ab;
$color-4: #f1cda9;
$color-5: #e4d7ad;

TAILWIND

colors: {
  'brand-1': '#b3b1a5',
  'brand-2': '#b6c5ae',
  'brand-3': '#d6c8ab',
  'brand-4': '#f1cda9',
  'brand-5': '#e4d7ad',
}

RGB Array

[179, 177, 165], [182, 197, 174], [214, 200, 171], [241, 205, 169], [228, 215, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3B1A5, #B6C5AE, #D6C8AB, #F1CDA9, #E4D7AD 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: #b3b1a5; --color-2: #b6c5ae; --color-3: #d6c8ab; --color-4: #f1cda9; --color-5: #e4d7ad. 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