#B9C4B8 + #C4BFAA + #DAB297 + #E8A290 + #628081 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B9C4B8

Celadon · Silver · Pearl Gray

HEX

#B9C4B8

RGB

rgb(185, 196, 184)

HSL

hsl(115, 9%, 75%)

HSB

hsb(115, 6%, 77%)

CMYK

cmyk(6%, 0%, 6%, 23%)

Oklch

oklch(80.8% 0.021 143.0)

Traditional「Celadon」· Paint「Pearl Gray」· Creative Silver Lining

#C4BFAA

Goose Yellow · Silver · Sunflower

HEX

#C4BFAA

RGB

rgb(196, 191, 170)

HSL

hsl(48, 18%, 72%)

HSB

hsb(48, 13%, 77%)

CMYK

cmyk(0%, 3%, 13%, 23%)

Oklch

oklch(80.3% 0.029 96.0)

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

#DAB297

Apricot · Tan · Warm Sun

HEX

#DAB297

RGB

rgb(218, 178, 151)

HSL

hsl(24, 48%, 72%)

HSB

hsb(24, 31%, 85%)

CMYK

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

Oklch

oklch(79.2% 0.060 55.7)

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

#E8A290

Peach Pink · DarkSalmon · Coral Red

HEX

#E8A290

RGB

rgb(232, 162, 144)

HSL

hsl(12, 66%, 74%)

HSB

hsb(12, 38%, 91%)

CMYK

cmyk(0%, 30%, 38%, 9%)

Oklch

oklch(77.5% 0.088 35.0)

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

#628081

Slate Blue · SlateGray · Mint Ice

HEX

#628081

RGB

rgb(98, 128, 129)

HSL

hsl(182, 14%, 45%)

HSB

hsb(182, 24%, 51%)

CMYK

cmyk(24%, 1%, 0%, 49%)

Oklch

oklch(57.7% 0.034 198.8)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9C4B8

C4BAC5

Analogous

C0C5BA

B9C4B8

BAC5BE

Triadic

B9C4B8

BABAC5

C5BABA

Split-Comp.

B9C4B8

BEBAC5

C5BAC0

Tetradic

B9C4B8

BAC0C5

C4BAC5

C5BEBA

Contrast Matrix WCAG 2.1 Contrast

B9C4B8	C4BFAA	DAB297	E8A290	628081
—	1.0 Fail	1.1 Fail	1.2 Fail	2.4 Fail
1.0 Fail	—	1.1 Fail	1.1 Fail	2.3 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	2.2 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	2.0 Fail
2.4 Fail	2.3 Fail	2.2 Fail	2.0 Fail	—

White BG

1.8Fail

1.9Fail

2.1Fail

4.3AA Large

Black BG

11.7AAA

11.4AAA

10.8AAA

10.0AAA

4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBEBB

C2C2AF

C9C89E

CAC994

6F6F81

Deuteranopia

BDBCBC

C2C3B0

CBCE9F

CED395

6D6B81

Tritanopia

BABDBE

C4B3B4

D8A3A4

E49899

648181

Achromatopsia

BFBFBF

BEBEBE

BBBBBB

B5B5B5

777777

Shades & Tints Shades & Tints

#B9C4B8

Dark

Light

#C4BFAA

Dark

Light

#DAB297

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9c4b8;
  --color-2: #c4bfaa;
  --color-3: #dab297;
  --color-4: #e8a290;
  --color-5: #628081;
}

SCSS

$color-1: #b9c4b8;
$color-2: #c4bfaa;
$color-3: #dab297;
$color-4: #e8a290;
$color-5: #628081;

TAILWIND

colors: {
  'brand-1': '#b9c4b8',
  'brand-2': '#c4bfaa',
  'brand-3': '#dab297',
  'brand-4': '#e8a290',
  'brand-5': '#628081',
}

RGB Array

[185, 196, 184], [196, 191, 170], [218, 178, 151], [232, 162, 144], [98, 128, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B9C4B8, #C4BFAA, #DAB297, #E8A290, #628081 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: #b9c4b8; --color-2: #c4bfaa; --color-3: #dab297; --color-4: #e8a290; --color-5: #628081. 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