← Back to Editor

#3C5772 · #61747F · #86918C · #ABAE99 · #D1CAA5

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3C5772

Indigo · DarkSlateBlue · Prussian Blue

HEX
#3C5772
RGB
rgb(60, 87, 114)
HSL
hsl(210, 31%, 34%)
HSB
hsb(210, 47%, 45%)
CMYK
cmyk(47%, 24%, 0%, 55%)
Oklch
oklch(44.7% 0.055 249.2)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#61747F

Slate Blue · SlateGray · Navy Blue

HEX
#61747F
RGB
rgb(97, 116, 127)
HSL
hsl(202, 13%, 44%)
HSB
hsb(202, 24%, 50%)
CMYK
cmyk(24%, 9%, 0%, 50%)
Oklch
oklch(54.7% 0.028 233.4)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#86918C

Ash · Gray · Warm Gray

HEX
#86918C
RGB
rgb(134, 145, 140)
HSL
hsl(153, 5%, 55%)
HSB
hsb(153, 8%, 57%)
CMYK
cmyk(8%, 0%, 3%, 43%)
Oklch
oklch(64.6% 0.015 166.9)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#ABAE99

Fresh Green · DarkGray · Sunflower

HEX
#ABAE99
RGB
rgb(171, 174, 153)
HSL
hsl(69, 11%, 64%)
HSB
hsb(69, 12%, 68%)
CMYK
cmyk(2%, 0%, 12%, 32%)
Oklch
oklch(74.3% 0.030 113.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D1CAA5

Fresh Green · Tan · Sunflower

HEX
#D1CAA5
RGB
rgb(209, 202, 165)
HSL
hsl(50, 32%, 73%)
HSB
hsb(50, 21%, 82%)
CMYK
cmyk(0%, 3%, 21%, 18%)
Oklch
oklch(83.5% 0.050 98.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C5772
72573C

Analogous

3C7272
3C5772
3C3C72

Triadic

3C5772
723C57
57723C

Split-Comp.

3C5772
723C3C
72723C

Tetradic

3C5772
723C72
72573C
3C723C

Contrast Matrix WCAG 2.1 Contrast

3C5772
61747F
86918C
ABAE99
D1CAA5
—
1.5
Fail
2.3
Fail
3.3
AA Large
4.5
AA
1.5
Fail
—
1.5
Fail
2.1
Fail
2.9
Fail
2.3
Fail
1.5
Fail
—
1.4
Fail
2.0
Fail
3.3
AA Large
2.1
Fail
1.4
Fail
—
1.4
Fail
4.5
AA
2.9
Fail
2.0
Fail
1.4
Fail
—
White BG
7.5AAA
4.9AA
3.3AA Large
2.3Fail
1.7Fail
Black BG
2.8Fail
4.3AA Large
6.4AA
9.2AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

48486B
69697C
8B8B8D
ACAC9E
CECEAE

Deuteranopia

46446A
68677C
8A898E
ACAC9F
CECFB0

Tritanopia

3D6665
627A7A
878E8E
ABA2A3
D1B5B7

Achromatopsia

525252
707070
8D8D8D
ABABAB
C8C8C8

Shades & Tints Shades & Tints

#3C5772

Dark
Light

#61747F

Dark
Light

#86918C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c5772;
  --color-2: #61747f;
  --color-3: #86918c;
  --color-4: #abae99;
  --color-5: #d1caa5;
}

SCSS

$color-1: #3c5772;
$color-2: #61747f;
$color-3: #86918c;
$color-4: #abae99;
$color-5: #d1caa5;

TAILWIND

colors: {
  'brand-1': '#3c5772',
  'brand-2': '#61747f',
  'brand-3': '#86918c',
  'brand-4': '#abae99',
  'brand-5': '#d1caa5',
}

RGB Array

[60, 87, 114], [97, 116, 127], [134, 145, 140], [171, 174, 153], [209, 202, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #3C5772, #61747F, #86918C, #ABAE99, #D1CAA5 is ideal for: brand design, premium product pages, magazine layouts. 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: #3c5772; --color-2: #61747f; --color-3: #86918c; --color-4: #abae99; --color-5: #d1caa5. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 tech, SaaS, healthcare, eco 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