#BBD4CE + #D5C7AC + #D2B384 + #C69189 + #976387 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BBD4CE

Jade · LightGray · Glacier Blue

HEX

#BBD4CE

RGB

rgb(187, 212, 206)

HSL

hsl(166, 23%, 78%)

HSB

hsb(166, 12%, 83%)

CMYK

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

Oklch

oklch(85.0% 0.028 179.6)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#D5C7AC

Goose Yellow · Silver · Sunflower

HEX

#D5C7AC

RGB

rgb(213, 199, 172)

HSL

hsl(40, 33%, 75%)

HSB

hsb(40, 19%, 84%)

CMYK

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

Oklch

oklch(83.4% 0.040 83.8)

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

#D2B384

Ginger · Tan · Warm Sun

HEX

#D2B384

RGB

rgb(210, 179, 132)

HSL

hsl(36, 46%, 67%)

HSB

hsb(36, 37%, 82%)

CMYK

cmyk(0%, 15%, 37%, 18%)

Oklch

oklch(78.3% 0.072 77.8)

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

#C69189

Peach Pink · Tan · Coral Red

HEX

#C69189

RGB

rgb(198, 145, 137)

HSL

hsl(8, 35%, 66%)

HSB

hsb(8, 31%, 78%)

CMYK

cmyk(0%, 27%, 31%, 22%)

Oklch

oklch(70.6% 0.066 28.5)

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

#976387

Rose Purple · Gray · Violet

HEX

#976387

RGB

rgb(151, 99, 135)

HSL

hsl(318, 21%, 49%)

HSB

hsb(318, 34%, 59%)

CMYK

cmyk(0%, 34%, 11%, 41%)

Oklch

oklch(56.7% 0.083 338.8)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBD4CE

D4BAC0

Analogous

BAD4C1

BBD4CE

BACDD4

Triadic

BBD4CE

CEBAD4

D4CEBA

Split-Comp.

BBD4CE

D4BACD

D4C1BA

Tetradic

BBD4CE

C1BAD4

D4BAC0

CDD4BA

Contrast Matrix WCAG 2.1 Contrast

BBD4CE	D5C7AC	D2B384	C69189	976387
—	1.1 Fail	1.3 Fail	1.7 Fail	3.0 AA Large
1.1 Fail	—	1.2 Fail	1.6 Fail	2.8 Fail
1.3 Fail	1.2 Fail	—	1.3 Fail	2.4 Fail
1.7 Fail	1.6 Fail	1.3 Fail	—	1.8 Fail
3.0 AA Large	2.8 Fail	2.4 Fail	1.8 Fail	—

White BG

1.6Fail

1.7Fail

2.0Fail

2.7Fail

4.7AA

Black BG

13.4AAA

12.6AAA

10.5AAA

7.8AAA

4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C6CF

CFCFB3

C5C48F

AFAF8B

80807E

Deuteranopia

C4C3D0

D0D1B4

C6C992

B2B68B

84877C

Tritanopia

BCD1D1

D4B8B9

D0989A

C38C8D

947776

Achromatopsia

CCCCCC

C8C8C8

B7B7B7

A0A0A0

777777

Shades & Tints Shades & Tints

#BBD4CE

Dark

Light

#D5C7AC

Dark

Light

#D2B384

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbd4ce;
  --color-2: #d5c7ac;
  --color-3: #d2b384;
  --color-4: #c69189;
  --color-5: #976387;
}

SCSS

$color-1: #bbd4ce;
$color-2: #d5c7ac;
$color-3: #d2b384;
$color-4: #c69189;
$color-5: #976387;

TAILWIND

colors: {
  'brand-1': '#bbd4ce',
  'brand-2': '#d5c7ac',
  'brand-3': '#d2b384',
  'brand-4': '#c69189',
  'brand-5': '#976387',
}

RGB Array

[187, 212, 206], [213, 199, 172], [210, 179, 132], [198, 145, 137], [151, 99, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBD4CE, #D5C7AC, #D2B384, #C69189, #976387 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: #bbd4ce; --color-2: #d5c7ac; --color-3: #d2b384; --color-4: #c69189; --color-5: #976387. 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