← Back to Editor

#8CA2A6 · #837081 · #428490 · #5A7787 · #82706F

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

#8CA2A6

Slate Blue · DarkGray · Lake Green

HEX
#8CA2A6
RGB
rgb(140, 162, 166)
HSL
hsl(189, 13%, 60%)
HSB
hsb(189, 16%, 65%)
CMYK
cmyk(16%, 2%, 0%, 35%)
Oklch
oklch(69.7% 0.025 209.8)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#837081

Rose Purple · Gray · Warm Gray

HEX
#837081
RGB
rgb(131, 112, 129)
HSL
hsl(306, 8%, 48%)
HSB
hsb(306, 15%, 51%)
CMYK
cmyk(0%, 15%, 2%, 49%)
Oklch
oklch(56.9% 0.034 329.4)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#428490

Slate Blue · SteelBlue · Mint Ice

HEX
#428490
RGB
rgb(66, 132, 144)
HSL
hsl(189, 37%, 41%)
HSB
hsb(189, 54%, 56%)
CMYK
cmyk(54%, 8%, 0%, 44%)
Oklch
oklch(57.5% 0.069 210.9)

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

#5A7787

Slate Blue · SlateGray · Navy Blue

HEX
#5A7787
RGB
rgb(90, 119, 135)
HSL
hsl(201, 20%, 44%)
HSB
hsb(201, 33%, 53%)
CMYK
cmyk(33%, 12%, 0%, 47%)
Oklch
oklch(55.3% 0.042 232.6)

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

#82706F

Crimson · Gray · Warm Gray

HEX
#82706F
RGB
rgb(130, 112, 111)
HSL
hsl(3, 8%, 47%)
HSB
hsb(3, 15%, 51%)
CMYK
cmyk(0%, 14%, 15%, 49%)
Oklch
oklch(56.2% 0.023 21.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8CA2A6
A6908C

Analogous

8CA69D
8CA2A6
8C95A6

Triadic

8CA2A6
A68CA2
A2A68C

Split-Comp.

8CA2A6
A68C95
A69D8C

Tetradic

8CA2A6
9D8CA6
A6908C
95A68C

Contrast Matrix WCAG 2.1 Contrast

8CA2A6
837081
428490
5A7787
82706F
—
1.7
Fail
1.6
Fail
1.8
Fail
1.7
Fail
1.7
Fail
—
1.1
Fail
1.0
Fail
1.0
Fail
1.6
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.8
Fail
1.0
Fail
1.1
Fail
—
1.0
Fail
1.7
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
White BG
2.7Fail
4.6AA
4.3AA Large
4.7AA
4.7AA
Black BG
7.8AAA
4.6AA
4.9AA
4.4AA Large
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9696A5
7B7B7D
5F5F8D
676783
7A7A6F

Deuteranopia

9493A5
7C7D7C
5B568C
656382
7B7D6F

Tritanopia

8DA4A4
827A79
458B8A
5B807F
816F6F

Achromatopsia

9C9C9C
787878
727272
707070
757575

Shades & Tints Shades & Tints

#8CA2A6

Dark
Light

#837081

Dark
Light

#428490

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ca2a6;
  --color-2: #837081;
  --color-3: #428490;
  --color-4: #5a7787;
  --color-5: #82706f;
}

SCSS

$color-1: #8ca2a6;
$color-2: #837081;
$color-3: #428490;
$color-4: #5a7787;
$color-5: #82706f;

TAILWIND

colors: {
  'brand-1': '#8ca2a6',
  'brand-2': '#837081',
  'brand-3': '#428490',
  'brand-4': '#5a7787',
  'brand-5': '#82706f',
}

RGB Array

[140, 162, 166], [131, 112, 129], [66, 132, 144], [90, 119, 135], [130, 112, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8CA2A6, #837081, #428490, #5A7787, #82706F 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: #8ca2a6; --color-2: #837081; --color-3: #428490; --color-4: #5a7787; --color-5: #82706f. 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