#B6A287 + #DDD5B0 + #F0E4BE + #FBF9D0 + #F7DBCD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B6A287

Ginger · Tan · Warm Sun

HEX

#B6A287

RGB

rgb(182, 162, 135)

HSL

hsl(34, 24%, 62%)

HSB

hsb(34, 26%, 71%)

CMYK

cmyk(0%, 11%, 26%, 29%)

Oklch

oklch(72.3% 0.044 75.2)

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

#DDD5B0

Goose Yellow · Wheat · Lemon Cream

HEX

#DDD5B0

RGB

rgb(221, 213, 176)

HSL

hsl(49, 40%, 78%)

HSB

hsb(49, 20%, 87%)

CMYK

cmyk(0%, 4%, 20%, 13%)

Oklch

oklch(87.0% 0.050 97.2)

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

#F0E4BE

Goose Yellow · Wheat · Lemon Cream

HEX

#F0E4BE

RGB

rgb(240, 228, 190)

HSL

hsl(46, 62%, 84%)

HSB

hsb(46, 21%, 94%)

CMYK

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

Oklch

oklch(91.9% 0.051 92.6)

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

#FBF9D0

Fresh Green · Beige · Lemon Cream

HEX

#FBF9D0

RGB

rgb(251, 249, 208)

HSL

hsl(57, 84%, 90%)

HSB

hsb(57, 17%, 98%)

CMYK

cmyk(0%, 1%, 17%, 2%)

Oklch

oklch(97.3% 0.053 105.0)

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

#F7DBCD

Apricot · Bisque · Peach Orange

HEX

#F7DBCD

RGB

rgb(247, 219, 205)

HSL

hsl(20, 72%, 89%)

HSB

hsb(20, 17%, 97%)

CMYK

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

Oklch

oklch(91.1% 0.036 48.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B6A287

879BB5

Analogous

B58A87

B6A287

B2B587

Triadic

B6A287

87B5A1

A187B5

Split-Comp.

B6A287

87B2B5

8A87B5

Tetradic

B6A287

87B58A

879BB5

B587B2

Contrast Matrix WCAG 2.1 Contrast

B6A287	DDD5B0	F0E4BE	FBF9D0	F7DBCD
—	1.7 Fail	1.9 Fail	2.3 Fail	1.9 Fail
1.7 Fail	—	1.2 Fail	1.4 Fail	1.1 Fail
1.9 Fail	1.2 Fail	—	1.2 Fail	1.0 Fail
2.3 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
1.9 Fail	1.1 Fail	1.0 Fail	1.2 Fail	—

White BG

2.5Fail

1.5Fail

1.3Fail

1.1Fail

1.3Fail

Black BG

8.5AAA

14.2AAA

16.5AAA

19.6AAA

16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAD8E

DAD9B9

EBEBC7

FAFADA

EBEBD0

Deuteranopia

AFB08F

DADBBB

ECECC9

FAFADC

EDEFD1

Tritanopia

B59394

DDC0C2

EFCED0

FBE2E3

F6D3D4

Achromatopsia

A5A5A5

D3D3D3

E3E3E3

F5F5F5

E2E2E2

Shades & Tints Shades & Tints

#B6A287

Dark

Light

#DDD5B0

Dark

Light

#F0E4BE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b6a287;
  --color-2: #ddd5b0;
  --color-3: #f0e4be;
  --color-4: #fbf9d0;
  --color-5: #f7dbcd;
}

SCSS

$color-1: #b6a287;
$color-2: #ddd5b0;
$color-3: #f0e4be;
$color-4: #fbf9d0;
$color-5: #f7dbcd;

TAILWIND

colors: {
  'brand-1': '#b6a287',
  'brand-2': '#ddd5b0',
  'brand-3': '#f0e4be',
  'brand-4': '#fbf9d0',
  'brand-5': '#f7dbcd',
}

RGB Array

[182, 162, 135], [221, 213, 176], [240, 228, 190], [251, 249, 208], [247, 219, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B6A287, #DDD5B0, #F0E4BE, #FBF9D0, #F7DBCD 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: #b6a287; --color-2: #ddd5b0; --color-3: #f0e4be; --color-4: #fbf9d0; --color-5: #f7dbcd. 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