#B0D9D1 + #B2C9A5 + #C2B184 + #BD947B + #B87D72 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B0D9D1

Jade · LightBlue · Glacier Blue

HEX

#B0D9D1

RGB

rgb(176, 217, 209)

HSL

hsl(168, 35%, 77%)

HSB

hsb(168, 19%, 85%)

CMYK

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

Oklch

oklch(85.4% 0.044 182.0)

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

#B2C9A5

Celadon · Silver · Apple Green

HEX

#B2C9A5

RGB

rgb(178, 201, 165)

HSL

hsl(98, 25%, 72%)

HSB

hsb(98, 18%, 79%)

CMYK

cmyk(11%, 0%, 18%, 21%)

Oklch

oklch(80.9% 0.055 134.2)

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

#C2B184

Ginger · Tan · Sunflower

HEX

#C2B184

RGB

rgb(194, 177, 132)

HSL

hsl(44, 34%, 64%)

HSB

hsb(44, 32%, 76%)

CMYK

cmyk(0%, 9%, 32%, 24%)

Oklch

oklch(76.4% 0.063 89.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#BD947B

Apricot · Tan · Warm Sun

HEX

#BD947B

RGB

rgb(189, 148, 123)

HSL

hsl(23, 33%, 61%)

HSB

hsb(23, 35%, 74%)

CMYK

cmyk(0%, 22%, 35%, 26%)

Oklch

oklch(69.9% 0.061 52.8)

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

#B87D72

Crimson · DarkSalmon · Passion Red

HEX

#B87D72

RGB

rgb(184, 125, 114)

HSL

hsl(9, 33%, 58%)

HSB

hsb(9, 38%, 72%)

CMYK

cmyk(0%, 32%, 38%, 28%)

Oklch

oklch(64.7% 0.076 30.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0D9D1

D9B0B8

Analogous

B0D9BC

B0D9D1

B0CDD9

Triadic

B0D9D1

D1B0D9

D9D1B0

Split-Comp.

B0D9D1

D9B0CD

D9BCB0

Tetradic

B0D9D1

BCB0D9

D9B0B8

CDD9B0

Contrast Matrix WCAG 2.1 Contrast

B0D9D1	B2C9A5	C2B184	BD947B	B87D72
—	1.2 Fail	1.4 Fail	1.8 Fail	2.2 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.9 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	1.6 Fail
1.8 Fail	1.5 Fail	1.3 Fail	—	1.2 Fail
2.2 Fail	1.9 Fail	1.6 Fail	1.2 Fail	—

White BG

1.5Fail

1.8Fail

2.1Fail

2.7Fail

3.4AA Large

Black BG

13.7AAA

11.8AAA

9.9AAA

7.7AAA

6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C2D3

BCBCAE

BBBA8F

ABAB81

9E9E75

Deuteranopia

BFBCD3

BBB9B0

BCBD92

AEB183

A2A675

Tritanopia

B2D4D5

B3B5B6

C19799

BB8687

B57777

Achromatopsia

CCCCCC

BEBEBE

B1B1B1

9D9D9D

8D8D8D

Shades & Tints Shades & Tints

#B0D9D1

Dark

Light

#B2C9A5

Dark

Light

#C2B184

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0d9d1;
  --color-2: #b2c9a5;
  --color-3: #c2b184;
  --color-4: #bd947b;
  --color-5: #b87d72;
}

SCSS

$color-1: #b0d9d1;
$color-2: #b2c9a5;
$color-3: #c2b184;
$color-4: #bd947b;
$color-5: #b87d72;

TAILWIND

colors: {
  'brand-1': '#b0d9d1',
  'brand-2': '#b2c9a5',
  'brand-3': '#c2b184',
  'brand-4': '#bd947b',
  'brand-5': '#b87d72',
}

RGB Array

[176, 217, 209], [178, 201, 165], [194, 177, 132], [189, 148, 123], [184, 125, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B0D9D1, #B2C9A5, #C2B184, #BD947B, #B87D72 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: #b0d9d1; --color-2: #b2c9a5; --color-3: #c2b184; --color-4: #bd947b; --color-5: #b87d72. 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 warm-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