#99B3C7 + #BCB6CF + #E0BCBC + #F7C5B5 + #F0D7C5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#99B3C7

Sky Blue · DarkGray · Cobalt Blue

HEX

#99B3C7

RGB

rgb(153, 179, 199)

HSL

hsl(206, 29%, 69%)

HSB

hsb(206, 23%, 78%)

CMYK

cmyk(23%, 10%, 0%, 22%)

Oklch

oklch(75.4% 0.041 241.2)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#BCB6CF

Wisteria · Silver · Cobalt Blue

HEX

#BCB6CF

RGB

rgb(188, 182, 207)

HSL

hsl(254, 21%, 76%)

HSB

hsb(254, 12%, 81%)

CMYK

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

Oklch

oklch(78.9% 0.036 296.6)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#E0BCBC

Peach Pink · LightPink · Cherry Blossom

HEX

#E0BCBC

RGB

rgb(224, 188, 188)

HSL

hsl(0, 37%, 81%)

HSB

hsb(0, 16%, 88%)

CMYK

cmyk(0%, 16%, 16%, 12%)

Oklch

oklch(82.6% 0.041 18.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F7C5B5

Apricot · LightPink · Peach Orange

HEX

#F7C5B5

RGB

rgb(247, 197, 181)

HSL

hsl(15, 80%, 84%)

HSB

hsb(15, 27%, 97%)

CMYK

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

Oklch

oklch(86.3% 0.062 38.5)

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

#F0D7C5

Apricot · Bisque · Peach Orange

HEX

#F0D7C5

RGB

rgb(240, 215, 197)

HSL

hsl(25, 59%, 86%)

HSB

hsb(25, 18%, 94%)

CMYK

cmyk(0%, 10%, 18%, 6%)

Oklch

oklch(89.5% 0.037 58.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99B3C7

C7AD99

Analogous

99C7C4

99B3C7

999CC7

Triadic

99B3C7

C799B3

B3C799

Split-Comp.

99B3C7

C7999C

C7C499

Tetradic

99B3C7

C499C7

C7AD99

9CC799

Contrast Matrix WCAG 2.1 Contrast

99B3C7	BCB6CF	E0BCBC	F7C5B5	F0D7C5
—	1.1 Fail	1.3 Fail	1.4 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.4 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.6 Fail	1.4 Fail	1.3 Fail	1.1 Fail	—

White BG

2.2Fail

2.0Fail

1.7Fail

1.5Fail

1.4Fail

Black BG

9.6AAA

10.7AAA

12.1AAA

13.6AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A4C2

B9B9C9

D0D0BC

E1E1B9

E5E5C9

Deuteranopia

A3A1C1

BABAC7

D3D5BC

E4E8BA

E7E9CA

Tritanopia

9ABEBE

BCC4C3

DEBCBC

F4BCBD

EFCDCE

Achromatopsia

AEAEAE

BBBBBB

C7C7C7

D2D2D2

DCDCDC

Shades & Tints Shades & Tints

#99B3C7

Dark

Light

#BCB6CF

Dark

Light

#E0BCBC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99b3c7;
  --color-2: #bcb6cf;
  --color-3: #e0bcbc;
  --color-4: #f7c5b5;
  --color-5: #f0d7c5;
}

SCSS

$color-1: #99b3c7;
$color-2: #bcb6cf;
$color-3: #e0bcbc;
$color-4: #f7c5b5;
$color-5: #f0d7c5;

TAILWIND

colors: {
  'brand-1': '#99b3c7',
  'brand-2': '#bcb6cf',
  'brand-3': '#e0bcbc',
  'brand-4': '#f7c5b5',
  'brand-5': '#f0d7c5',
}

RGB Array

[153, 179, 199], [188, 182, 207], [224, 188, 188], [247, 197, 181], [240, 215, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99B3C7, #BCB6CF, #E0BCBC, #F7C5B5, #F0D7C5 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: #99b3c7; --color-2: #bcb6cf; --color-3: #e0bcbc; --color-4: #f7c5b5; --color-5: #f0d7c5. 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