#9BA1B0 + #A6AED7 + #B3C1DC + #C8CFDE + #FEF6EA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9BA1B0

Azure · DarkGray · Cobalt Blue

HEX

#9BA1B0

RGB

rgb(155, 161, 176)

HSL

hsl(223, 12%, 65%)

HSB

hsb(223, 12%, 69%)

CMYK

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

Oklch

oklch(70.9% 0.023 268.3)

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

#A6AED7

Azure · LightSteelBlue · Cobalt Blue

HEX

#A6AED7

RGB

rgb(166, 174, 215)

HSL

hsl(230, 38%, 75%)

HSB

hsb(230, 23%, 84%)

CMYK

cmyk(23%, 19%, 0%, 16%)

Oklch

oklch(75.9% 0.060 276.3)

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

#B3C1DC

Azure · LightSteelBlue · Cobalt Blue

HEX

#B3C1DC

RGB

rgb(179, 193, 220)

HSL

hsl(220, 37%, 78%)

HSB

hsb(220, 19%, 86%)

CMYK

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

Oklch

oklch(80.9% 0.041 263.6)

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

#C8CFDE

Azure · LightGray · Sky Blue

HEX

#C8CFDE

RGB

rgb(200, 207, 222)

HSL

hsl(221, 25%, 83%)

HSB

hsb(221, 10%, 87%)

CMYK

cmyk(10%, 7%, 0%, 13%)

Oklch

oklch(85.4% 0.022 265.7)

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

#FEF6EA

Goose Yellow · SeaShell · Peach Orange

HEX

#FEF6EA

RGB

rgb(254, 246, 234)

HSL

hsl(36, 91%, 96%)

HSB

hsb(36, 8%, 100%)

CMYK

cmyk(0%, 3%, 8%, 0%)

Oklch

oklch(97.6% 0.018 78.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BA1B0

B0AA9B

Analogous

9BACB0

9BA1B0

A09BB0

Triadic

9BA1B0

B09BA1

A1B09B

Split-Comp.

9BA1B0

B0A09B

ACB09B

Tetradic

9BA1B0

B09BAC

B0AA9B

9BB0A0

Contrast Matrix WCAG 2.1 Contrast

9BA1B0	A6AED7	B3C1DC	C8CFDE	FEF6EA
—	1.2 Fail	1.4 Fail	1.7 Fail	2.4 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	2.0 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.7 Fail
1.7 Fail	1.4 Fail	1.2 Fail	—	1.5 Fail
2.4 Fail	2.0 Fail	1.7 Fail	1.5 Fail	—

White BG

2.6Fail

2.2Fail

1.8Fail

1.6Fail

1.1Fail

Black BG

8.1AAA

9.7AAA

11.6AAA

13.4AAA

19.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9EAC

A9AACD

B9B9D5

CBCBDA

FBFAED

Deuteranopia

9D9DAC

A9A8CB

B8B7D4

CBCAD9

FBFCEE

Tritanopia

9BAAA9

A6C5C4

B4D0CF

C8D8D7

FEEFF0

Achromatopsia

A1A1A1

B0B0B0

C0C0C0

CFCFCF

F7F7F7

Shades & Tints Shades & Tints

#9BA1B0

Dark

Light

#A6AED7

Dark

Light

#B3C1DC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ba1b0;
  --color-2: #a6aed7;
  --color-3: #b3c1dc;
  --color-4: #c8cfde;
  --color-5: #fef6ea;
}

SCSS

$color-1: #9ba1b0;
$color-2: #a6aed7;
$color-3: #b3c1dc;
$color-4: #c8cfde;
$color-5: #fef6ea;

TAILWIND

colors: {
  'brand-1': '#9ba1b0',
  'brand-2': '#a6aed7',
  'brand-3': '#b3c1dc',
  'brand-4': '#c8cfde',
  'brand-5': '#fef6ea',
}

RGB Array

[155, 161, 176], [166, 174, 215], [179, 193, 220], [200, 207, 222], [254, 246, 234]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BA1B0, #A6AED7, #B3C1DC, #C8CFDE, #FEF6EA 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: #9ba1b0; --color-2: #a6aed7; --color-3: #b3c1dc; --color-4: #c8cfde; --color-5: #fef6ea. 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