← Back to Editor

#97B7AF · #96929D · #93787A · #DA8E93 · #D6A970

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

#97B7AF

Jade · DarkGray · Lake Green

HEX
#97B7AF
RGB
rgb(151, 183, 175)
HSL
hsl(165, 18%, 65%)
HSB
hsb(165, 17%, 72%)
CMYK
cmyk(17%, 0%, 4%, 28%)
Oklch
oklch(75.3% 0.037 178.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#96929D

Ash · DarkGray · Silver Sand

HEX
#96929D
RGB
rgb(150, 146, 157)
HSL
hsl(262, 5%, 59%)
HSB
hsb(262, 7%, 62%)
CMYK
cmyk(4%, 7%, 0%, 38%)
Oklch
oklch(66.7% 0.017 302.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#93787A

Crimson · Gray · Passion Red

HEX
#93787A
RGB
rgb(147, 120, 122)
HSL
hsl(356, 11%, 52%)
HSB
hsb(356, 18%, 58%)
CMYK
cmyk(0%, 18%, 17%, 42%)
Oklch
oklch(59.9% 0.034 13.1)

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

#DA8E93

Peach Pink · DarkSalmon · Coral Red

HEX
#DA8E93
RGB
rgb(218, 142, 147)
HSL
hsl(356, 51%, 71%)
HSB
hsb(356, 35%, 85%)
CMYK
cmyk(0%, 35%, 33%, 15%)
Oklch
oklch(72.5% 0.093 15.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#D6A970

Ginger · BurlyWood · Warm Sun

HEX
#D6A970
RGB
rgb(214, 169, 112)
HSL
hsl(34, 55%, 64%)
HSB
hsb(34, 48%, 84%)
CMYK
cmyk(0%, 21%, 48%, 16%)
Oklch
oklch(76.3% 0.091 72.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

97B7AF
B6969E

Analogous

96B69E
97B7AF
96AEB6

Triadic

97B7AF
AE96B6
B6AE96

Split-Comp.

97B7AF
B696AE
B69E96

Tetradic

97B7AF
9E96B6
B6969E
AEB696

Contrast Matrix WCAG 2.1 Contrast

97B7AF
96929D
93787A
DA8E93
D6A970
—
1.4
Fail
1.9
Fail
1.2
Fail
1.0
Fail
1.4
Fail
—
1.3
Fail
1.2
Fail
1.4
Fail
1.9
Fail
1.3
Fail
—
1.6
Fail
1.9
Fail
1.2
Fail
1.2
Fail
1.6
Fail
—
1.2
Fail
1.0
Fail
1.4
Fail
1.9
Fail
1.2
Fail
—
White BG
2.2Fail
3.0AA Large
4.0AA Large
2.5Fail
2.1Fail
Black BG
9.7AAA
6.9AA
5.2AA
8.3AAA
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A5B1
94949A
87877A
B9B892
C3C27E

Deuteranopia

A3A1B1
95959A
898B79
BEC392
C5C881

Tritanopia

99B2B3
969898
927979
D69191
D4898B

Achromatopsia

ADADAD
949494
808080
A5A5A5
B0B0B0

Shades & Tints Shades & Tints

#97B7AF

Dark
Light

#96929D

Dark
Light

#93787A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #97b7af;
  --color-2: #96929d;
  --color-3: #93787a;
  --color-4: #da8e93;
  --color-5: #d6a970;
}

SCSS

$color-1: #97b7af;
$color-2: #96929d;
$color-3: #93787a;
$color-4: #da8e93;
$color-5: #d6a970;

TAILWIND

colors: {
  'brand-1': '#97b7af',
  'brand-2': '#96929d',
  'brand-3': '#93787a',
  'brand-4': '#da8e93',
  'brand-5': '#d6a970',
}

RGB Array

[151, 183, 175], [150, 146, 157], [147, 120, 122], [218, 142, 147], [214, 169, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #97B7AF, #96929D, #93787A, #DA8E93, #D6A970 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: #97b7af; --color-2: #96929d; --color-3: #93787a; --color-4: #da8e93; --color-5: #d6a970. 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