#8FADB3 + #BBBDBC + #E0CBC3 + #FFD2BF + #FFDAB0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8FADB3

Sky Blue · DarkGray · Lake Green

HEX

#8FADB3

RGB

rgb(143, 173, 179)

HSL

hsl(190, 19%, 63%)

HSB

hsb(190, 20%, 70%)

CMYK

cmyk(20%, 3%, 0%, 30%)

Oklch

oklch(72.7% 0.034 211.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#BBBDBC

Silver Gray · Silver · Pearl Gray

HEX

#BBBDBC

RGB

rgb(187, 189, 188)

HSL

hsl(150, 1%, 74%)

HSB

hsb(150, 1%, 74%)

CMYK

cmyk(1%, 0%, 1%, 26%)

Oklch

oklch(79.6% 0.003 165.1)

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

#E0CBC3

Apricot · LightGray · Peach Orange

HEX

#E0CBC3

RGB

rgb(224, 203, 195)

HSL

hsl(17, 32%, 82%)

HSB

hsb(17, 13%, 88%)

CMYK

cmyk(0%, 9%, 13%, 12%)

Oklch

oklch(85.7% 0.026 42.1)

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

#FFD2BF

Apricot · Bisque · Peach Orange

HEX

#FFD2BF

RGB

rgb(255, 210, 191)

HSL

hsl(18, 100%, 87%)

HSB

hsb(18, 25%, 100%)

CMYK

cmyk(0%, 18%, 25%, 0%)

Oklch

oklch(89.8% 0.057 44.1)

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

#FFDAB0

Goose Yellow · Wheat · Peach Orange

HEX

#FFDAB0

RGB

rgb(255, 218, 176)

HSL

hsl(32, 100%, 85%)

HSB

hsb(32, 31%, 100%)

CMYK

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

Oklch

oklch(90.9% 0.069 70.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8FADB3

B3958F

Analogous

8FB3A7

8FADB3

8F9BB3

Triadic

8FADB3

B38FAD

ADB38F

Split-Comp.

8FADB3

B38F9B

B3A78F

Tetradic

8FADB3

A78FB3

B3958F

9BB38F

Contrast Matrix WCAG 2.1 Contrast

8FADB3	BBBDBC	E0CBC3	FFD2BF	FFDAB0
—	1.3 Fail	1.5 Fail	1.7 Fail	1.8 Fail
1.3 Fail	—	1.2 Fail	1.4 Fail	1.4 Fail
1.5 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.7 Fail	1.4 Fail	1.1 Fail	—	1.0 Fail
1.8 Fail	1.4 Fail	1.2 Fail	1.0 Fail	—

White BG

2.4Fail

1.9Fail

1.6Fail

1.4Fail

1.3Fail

Black BG

8.8AAA

11.1AAA

13.5AAA

15.2AAA

15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CB2

BCBCBC

D7D7C5

ECEBC4

EFEFBA

Deuteranopia

9A98B1

BCBCBC

D8DAC5

EEF2C5

F1F4BD

Tritanopia

91B0B0

BBBCBC

DFC6C7

FDC7C8

FDC2C4

Achromatopsia

A5A5A5

BCBCBC

D0D0D0

DDDDDD

E0E0E0

Shades & Tints Shades & Tints

#8FADB3

Dark

Light

#BBBDBC

Dark

Light

#E0CBC3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8fadb3;
  --color-2: #bbbdbc;
  --color-3: #e0cbc3;
  --color-4: #ffd2bf;
  --color-5: #ffdab0;
}

SCSS

$color-1: #8fadb3;
$color-2: #bbbdbc;
$color-3: #e0cbc3;
$color-4: #ffd2bf;
$color-5: #ffdab0;

TAILWIND

colors: {
  'brand-1': '#8fadb3',
  'brand-2': '#bbbdbc',
  'brand-3': '#e0cbc3',
  'brand-4': '#ffd2bf',
  'brand-5': '#ffdab0',
}

RGB Array

[143, 173, 179], [187, 189, 188], [224, 203, 195], [255, 210, 191], [255, 218, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8FADB3, #BBBDBC, #E0CBC3, #FFD2BF, #FFDAB0 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: #8fadb3; --color-2: #bbbdbc; --color-3: #e0cbc3; --color-4: #ffd2bf; --color-5: #ffdab0. 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