← Back to Editor

#9CB5B9 · #736485 · #AB8A95 · #D1B5A9 · #F1DEBE

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9CB5B9

Sky Blue · DarkGray · Lake Green

HEX
#9CB5B9
RGB
rgb(156, 181, 185)
HSL
hsl(188, 17%, 67%)
HSB
hsb(188, 16%, 73%)
CMYK
cmyk(16%, 2%, 0%, 27%)
Oklch
oklch(75.5% 0.028 208.3)

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

#736485

Deep Indigo · DimGray · Violet

HEX
#736485
RGB
rgb(115, 100, 133)
HSL
hsl(267, 14%, 46%)
HSB
hsb(267, 25%, 52%)
CMYK
cmyk(14%, 25%, 0%, 48%)
Oklch
oklch(53.0% 0.054 305.3)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#AB8A95

Rouge · DarkGray · Rose Pink

HEX
#AB8A95
RGB
rgb(171, 138, 149)
HSL
hsl(340, 16%, 61%)
HSB
hsb(340, 19%, 67%)
CMYK
cmyk(0%, 19%, 13%, 33%)
Oklch
oklch(66.7% 0.043 356.4)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#D1B5A9

Apricot · Tan · Warm Sun

HEX
#D1B5A9
RGB
rgb(209, 181, 169)
HSL
hsl(18, 30%, 74%)
HSB
hsb(18, 19%, 82%)
CMYK
cmyk(0%, 13%, 19%, 18%)
Oklch
oklch(79.4% 0.037 44.6)

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

#F1DEBE

Goose Yellow · Wheat · Peach Orange

HEX
#F1DEBE
RGB
rgb(241, 222, 190)
HSL
hsl(38, 65%, 85%)
HSB
hsb(38, 21%, 95%)
CMYK
cmyk(0%, 8%, 21%, 5%)
Oklch
oklch(90.8% 0.047 80.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CB5B9
B9A09D

Analogous

9DB9AF
9CB5B9
9DA7B9

Triadic

9CB5B9
B99DB5
B5B99D

Split-Comp.

9CB5B9
B99DA7
B9AF9D

Tetradic

9CB5B9
AF9DB9
B9A09D
A7B99D

Contrast Matrix WCAG 2.1 Contrast

9CB5B9
736485
AB8A95
D1B5A9
F1DEBE
—
2.5
Fail
1.4
Fail
1.1
Fail
1.6
Fail
2.5
Fail
—
1.7
Fail
2.8
Fail
4.1
AA Large
1.4
Fail
1.7
Fail
—
1.6
Fail
2.3
Fail
1.1
Fail
2.8
Fail
1.6
Fail
—
1.5
Fail
1.6
Fail
4.1
AA Large
2.3
Fail
1.5
Fail
—
White BG
2.2Fail
5.4AA
3.1AA Large
1.9Fail
1.3Fail
Black BG
9.7AAA
3.9AA Large
6.8AA
10.9AAA
15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A7B8
6D6C7D
9D9C92
C5C5AC
E9E9C6

Deuteranopia

A5A4B8
6D6F7B
9FA192
C7C9AD
EAEBC8

Tritanopia

9DB7B7
727775
A99090
D0AEAF
F0CCCD

Achromatopsia

AEAEAE
6C6C6C
959595
BCBCBC
E0E0E0

Shades & Tints Shades & Tints

#9CB5B9

Dark
Light

#736485

Dark
Light

#AB8A95

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9cb5b9;
  --color-2: #736485;
  --color-3: #ab8a95;
  --color-4: #d1b5a9;
  --color-5: #f1debe;
}

SCSS

$color-1: #9cb5b9;
$color-2: #736485;
$color-3: #ab8a95;
$color-4: #d1b5a9;
$color-5: #f1debe;

TAILWIND

colors: {
  'brand-1': '#9cb5b9',
  'brand-2': '#736485',
  'brand-3': '#ab8a95',
  'brand-4': '#d1b5a9',
  'brand-5': '#f1debe',
}

RGB Array

[156, 181, 185], [115, 100, 133], [171, 138, 149], [209, 181, 169], [241, 222, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CB5B9, #736485, #AB8A95, #D1B5A9, #F1DEBE is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9cb5b9; --color-2: #736485; --color-3: #ab8a95; --color-4: #d1b5a9; --color-5: #f1debe. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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