← Back to Editor

#3197A5 · #658C9B · #88849B · #9F889C · #D99D92

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

#3197A5

Lake Blue · LightSeaGreen · Mint Ice

HEX
#3197A5
RGB
rgb(49, 151, 165)
HSL
hsl(187, 54%, 42%)
HSB
hsb(187, 70%, 65%)
CMYK
cmyk(70%, 8%, 0%, 35%)
Oklch
oklch(62.5% 0.093 208.2)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#658C9B

Slate Blue · LightSlateGray · Mint Ice

HEX
#658C9B
RGB
rgb(101, 140, 155)
HSL
hsl(197, 21%, 50%)
HSB
hsb(197, 35%, 61%)
CMYK
cmyk(35%, 10%, 0%, 39%)
Oklch
oklch(61.7% 0.049 223.7)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#88849B

Deep Indigo · LightSlateGray · Navy Blue

HEX
#88849B
RGB
rgb(136, 132, 155)
HSL
hsl(250, 10%, 56%)
HSB
hsb(250, 15%, 61%)
CMYK
cmyk(12%, 15%, 0%, 39%)
Oklch
oklch(62.5% 0.035 293.4)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#9F889C

Rose Purple · DarkGray · Violet

HEX
#9F889C
RGB
rgb(159, 136, 156)
HSL
hsl(308, 11%, 58%)
HSB
hsb(308, 14%, 62%)
CMYK
cmyk(0%, 14%, 2%, 38%)
Oklch
oklch(65.4% 0.040 330.3)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#D99D92

Peach Pink · Tan · Coral Red

HEX
#D99D92
RGB
rgb(217, 157, 146)
HSL
hsl(9, 48%, 71%)
HSB
hsb(9, 33%, 85%)
CMYK
cmyk(0%, 28%, 33%, 15%)
Oklch
oklch(75.0% 0.074 30.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3197A5
A53F31

Analogous

31A579
3197A5
315EA5

Triadic

3197A5
A53197
97A531

Split-Comp.

3197A5
A5315E
A57931

Tetradic

3197A5
7931A5
A53F31
5EA531

Contrast Matrix WCAG 2.1 Contrast

3197A5
658C9B
88849B
9F889C
D99D92
—
1.1
Fail
1.0
Fail
1.1
Fail
1.5
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.6
Fail
1.0
Fail
1.0
Fail
—
1.1
Fail
1.6
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
1.4
Fail
1.5
Fail
1.6
Fail
1.6
Fail
1.4
Fail
—
White BG
3.4AA Large
3.6AA Large
3.6AA Large
3.2AA Large
2.3Fail
Black BG
6.1AA
5.8AA
5.8AA
6.5AA
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5D5EA2
767697
868695
959597
BFBE95

Deuteranopia

5750A1
747197
878794
969896
C3C795

Tritanopia

369F9E
679594
889190
9E9393
D69797

Achromatopsia

7A7A7A
828282
888888
919191
AEAEAE

Shades & Tints Shades & Tints

#3197A5

Dark
Light

#658C9B

Dark
Light

#88849B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3197a5;
  --color-2: #658c9b;
  --color-3: #88849b;
  --color-4: #9f889c;
  --color-5: #d99d92;
}

SCSS

$color-1: #3197a5;
$color-2: #658c9b;
$color-3: #88849b;
$color-4: #9f889c;
$color-5: #d99d92;

TAILWIND

colors: {
  'brand-1': '#3197a5',
  'brand-2': '#658c9b',
  'brand-3': '#88849b',
  'brand-4': '#9f889c',
  'brand-5': '#d99d92',
}

RGB Array

[49, 151, 165], [101, 140, 155], [136, 132, 155], [159, 136, 156], [217, 157, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3197A5, #658C9B, #88849B, #9F889C, #D99D92 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: #3197a5; --color-2: #658c9b; --color-3: #88849b; --color-4: #9f889c; --color-5: #d99d92. 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