← Back to Editor

#9D7F77 · #8899C7 · #B7A098 · #A7B5D0 · #ACBED6

cool

A 5-color cool 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

#9D7F77

Crimson · Gray · Passion Red

HEX
#9D7F77
RGB
rgb(157, 127, 119)
HSL
hsl(13, 16%, 54%)
HSB
hsb(13, 24%, 62%)
CMYK
cmyk(0%, 19%, 24%, 38%)
Oklch
oklch(62.3% 0.039 35.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#8899C7

Azure · DarkGray · Cobalt Blue

HEX
#8899C7
RGB
rgb(136, 153, 199)
HSL
hsl(224, 36%, 66%)
HSB
hsb(224, 32%, 78%)
CMYK
cmyk(32%, 23%, 0%, 22%)
Oklch
oklch(68.7% 0.071 268.8)

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

#B7A098

Apricot · DarkGray · Warm Sun

HEX
#B7A098
RGB
rgb(183, 160, 152)
HSL
hsl(15, 18%, 66%)
HSB
hsb(15, 17%, 72%)
CMYK
cmyk(0%, 13%, 17%, 28%)
Oklch
oklch(72.4% 0.030 40.1)

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

#A7B5D0

Azure · LightSteelBlue · Cobalt Blue

HEX
#A7B5D0
RGB
rgb(167, 181, 208)
HSL
hsl(220, 30%, 74%)
HSB
hsb(220, 20%, 82%)
CMYK
cmyk(20%, 13%, 0%, 18%)
Oklch
oklch(77.1% 0.042 263.6)

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

#ACBED6

Azure · LightSteelBlue · Cobalt Blue

HEX
#ACBED6
RGB
rgb(172, 190, 214)
HSL
hsl(214, 34%, 76%)
HSB
hsb(214, 20%, 84%)
CMYK
cmyk(20%, 11%, 0%, 16%)
Oklch
oklch(79.6% 0.039 255.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9D7F77
77949C

Analogous

9C7782
9D7F77
9C9277

Triadic

9D7F77
779C7F
7F779C

Split-Comp.

9D7F77
779C92
77829C

Tetradic

9D7F77
829C77
77949C
92779C

Contrast Matrix WCAG 2.1 Contrast

9D7F77
8899C7
B7A098
A7B5D0
ACBED6
—
1.3
Fail
1.5
Fail
1.8
Fail
1.9
Fail
1.3
Fail
—
1.1
Fail
1.4
Fail
1.5
Fail
1.5
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.9
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
White BG
3.7AA Large
2.8Fail
2.5Fail
2.1Fail
1.9Fail
Black BG
5.7AA
7.4AAA
8.5AAA
10.2AAA
11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

909079
8F90BC
ADAD9A
ADADC9
B4B4D0

Deuteranopia

929479
8E8DB9
AEB09A
ACABC8
B3B1CF

Tritanopia

9C7A7B
89B3B1
B69B9C
A8C4C3
ADCCCB

Achromatopsia

878787
999999
A6A6A6
B4B4B4
BBBBBB

Shades & Tints Shades & Tints

#9D7F77

Dark
Light

#8899C7

Dark
Light

#B7A098

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9d7f77;
  --color-2: #8899c7;
  --color-3: #b7a098;
  --color-4: #a7b5d0;
  --color-5: #acbed6;
}

SCSS

$color-1: #9d7f77;
$color-2: #8899c7;
$color-3: #b7a098;
$color-4: #a7b5d0;
$color-5: #acbed6;

TAILWIND

colors: {
  'brand-1': '#9d7f77',
  'brand-2': '#8899c7',
  'brand-3': '#b7a098',
  'brand-4': '#a7b5d0',
  'brand-5': '#acbed6',
}

RGB Array

[157, 127, 119], [136, 153, 199], [183, 160, 152], [167, 181, 208], [172, 190, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #9D7F77, #8899C7, #B7A098, #A7B5D0, #ACBED6 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: #9d7f77; --color-2: #8899c7; --color-3: #b7a098; --color-4: #a7b5d0; --color-5: #acbed6. 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 cool-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