← Back to Editor

#97B6B0 · #A5A799 · #BB9D81 · #D5806B · #4A473E

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

#97B6B0

Jade · DarkGray · Lake Green

HEX
#97B6B0
RGB
rgb(151, 182, 176)
HSL
hsl(168, 18%, 65%)
HSB
hsb(168, 17%, 71%)
CMYK
cmyk(17%, 0%, 3%, 29%)
Oklch
oklch(75.1% 0.035 182.3)

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

#A5A799

Ash · DarkGray · Silver Sand

HEX
#A5A799
RGB
rgb(165, 167, 153)
HSL
hsl(69, 7%, 63%)
HSB
hsb(69, 8%, 65%)
CMYK
cmyk(1%, 0%, 8%, 35%)
Oklch
oklch(72.3% 0.020 113.5)

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

#BB9D81

Apricot · Tan · Warm Sun

HEX
#BB9D81
RGB
rgb(187, 157, 129)
HSL
hsl(29, 30%, 62%)
HSB
hsb(29, 31%, 73%)
CMYK
cmyk(0%, 16%, 31%, 27%)
Oklch
oklch(71.6% 0.053 64.9)

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

#D5806B

Peach Pink · DarkSalmon · Coral Red

HEX
#D5806B
RGB
rgb(213, 128, 107)
HSL
hsl(12, 56%, 63%)
HSB
hsb(12, 50%, 84%)
CMYK
cmyk(0%, 40%, 50%, 16%)
Oklch
oklch(68.6% 0.110 34.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#4A473E

Ochre · DarkSlateGray · Charcoal

HEX
#4A473E
RGB
rgb(74, 71, 62)
HSL
hsl(45, 9%, 27%)
HSB
hsb(45, 16%, 29%)
CMYK
cmyk(0%, 4%, 16%, 71%)
Oklch
oklch(39.8% 0.015 91.7)

Traditional「Ochre」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

97B6B0
B6969C

Analogous

96B69F
97B6B0
96ACB6

Triadic

97B6B0
AF96B6
B6AF96

Split-Comp.

97B6B0
B696AC
B69F96

Tetradic

97B6B0
9F96B6
B6969C
ACB696

Contrast Matrix WCAG 2.1 Contrast

97B6B0
A5A799
BB9D81
D5806B
4A473E
—
1.1
Fail
1.2
Fail
1.4
Fail
4.3
AA Large
1.1
Fail
—
1.0
Fail
1.2
Fail
3.8
AA Large
1.2
Fail
1.0
Fail
—
1.2
Fail
3.6
AA Large
1.4
Fail
1.2
Fail
1.2
Fail
—
3.2
AA Large
4.3
AA Large
3.8
AA Large
3.6
AA Large
3.2
AA Large
—
White BG
2.2Fail
2.4Fail
2.5Fail
2.9Fail
9.3AAA
Black BG
9.6AAA
8.6AAA
8.3AAA
7.1AAA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A5B1
A6A69C
AEAE88
B0AF70
494940

Deuteranopia

A3A0B2
A6A69D
B0B289
B5BC71
494941

Tritanopia

99B3B3
A59FA0
BA8D8E
D17475
4A4242

Achromatopsia

ACACAC
A5A5A5
A3A3A3
979797
474747

Shades & Tints Shades & Tints

#97B6B0

Dark
Light

#A5A799

Dark
Light

#BB9D81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #97b6b0;
  --color-2: #a5a799;
  --color-3: #bb9d81;
  --color-4: #d5806b;
  --color-5: #4a473e;
}

SCSS

$color-1: #97b6b0;
$color-2: #a5a799;
$color-3: #bb9d81;
$color-4: #d5806b;
$color-5: #4a473e;

TAILWIND

colors: {
  'brand-1': '#97b6b0',
  'brand-2': '#a5a799',
  'brand-3': '#bb9d81',
  'brand-4': '#d5806b',
  'brand-5': '#4a473e',
}

RGB Array

[151, 182, 176], [165, 167, 153], [187, 157, 129], [213, 128, 107], [74, 71, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #97B6B0, #A5A799, #BB9D81, #D5806B, #4A473E 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: #97b6b0; --color-2: #a5a799; --color-3: #bb9d81; --color-4: #d5806b; --color-5: #4a473e. 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 general-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