#BBD9B8 + #D4DEBA + #F0C281 + #DBB88A + #C9B08E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BBD9B8

Celadon · Silver · Apple Green

HEX

#BBD9B8

RGB

rgb(187, 217, 184)

HSL

hsl(115, 30%, 79%)

HSB

hsb(115, 15%, 85%)

CMYK

cmyk(14%, 0%, 15%, 15%)

Oklch

oklch(85.4% 0.055 142.6)

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

#D4DEBA

Willow Green · LightGray · Apple Green

HEX

#D4DEBA

RGB

rgb(212, 222, 186)

HSL

hsl(77, 35%, 80%)

HSB

hsb(77, 16%, 87%)

CMYK

cmyk(5%, 0%, 16%, 13%)

Oklch

oklch(88.4% 0.049 120.0)

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

#F0C281

Goose Yellow · BurlyWood · Warm Sun

HEX

#F0C281

RGB

rgb(240, 194, 129)

HSL

hsl(35, 79%, 72%)

HSB

hsb(35, 46%, 94%)

CMYK

cmyk(0%, 19%, 46%, 6%)

Oklch

oklch(84.0% 0.098 75.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#DBB88A

Ginger · BurlyWood · Warm Sun

HEX

#DBB88A

RGB

rgb(219, 184, 138)

HSL

hsl(34, 53%, 70%)

HSB

hsb(34, 37%, 86%)

CMYK

cmyk(0%, 16%, 37%, 14%)

Oklch

oklch(80.2% 0.073 74.1)

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

#C9B08E

Ginger · Tan · Warm Sun

HEX

#C9B08E

RGB

rgb(201, 176, 142)

HSL

hsl(35, 35%, 67%)

HSB

hsb(35, 29%, 79%)

CMYK

cmyk(0%, 12%, 29%, 21%)

Oklch

oklch(77.0% 0.054 75.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBD9B8

D7B9DA

Analogous

CCDAB9

BBD9B8

B9DAC7

Triadic

BBD9B8

B9BCDA

DAB9BC

Split-Comp.

BBD9B8

C7B9DA

DAB9CC

Tetradic

BBD9B8

B9CCDA

D7B9DA

DAC7B9

Contrast Matrix WCAG 2.1 Contrast

BBD9B8	D4DEBA	F0C281	DBB88A	C9B08E
—	1.1 Fail	1.1 Fail	1.2 Fail	1.4 Fail
1.1 Fail	—	1.2 Fail	1.3 Fail	1.5 Fail
1.1 Fail	1.2 Fail	—	1.1 Fail	1.3 Fail
1.2 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

1.5Fail

1.4Fail

1.6Fail

1.9Fail

2.1Fail

Black BG

13.7AAA

15.0AAA

12.7AAA

11.2AAA

10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C8C0

D8D8C3

DCDC91

CCCC95

BEBE96

Deuteranopia

C6C4C2

D8D7C5

DFE295

CED098

C0C298

Tritanopia

BDC6C8

D4CACB

EE9DA0

D99EA0

C89D9E

Achromatopsia

CCCCCC

D7D7D7

C8C8C8

BDBDBD

B4B4B4

Shades & Tints Shades & Tints

#BBD9B8

Dark

Light

#D4DEBA

Dark

Light

#F0C281

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbd9b8;
  --color-2: #d4deba;
  --color-3: #f0c281;
  --color-4: #dbb88a;
  --color-5: #c9b08e;
}

SCSS

$color-1: #bbd9b8;
$color-2: #d4deba;
$color-3: #f0c281;
$color-4: #dbb88a;
$color-5: #c9b08e;

TAILWIND

colors: {
  'brand-1': '#bbd9b8',
  'brand-2': '#d4deba',
  'brand-3': '#f0c281',
  'brand-4': '#dbb88a',
  'brand-5': '#c9b08e',
}

RGB Array

[187, 217, 184], [212, 222, 186], [240, 194, 129], [219, 184, 138], [201, 176, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBD9B8, #D4DEBA, #F0C281, #DBB88A, #C9B08E 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: #bbd9b8; --color-2: #d4deba; --color-3: #f0c281; --color-4: #dbb88a; --color-5: #c9b08e. 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