← Back to Editor

#6C686F · #6A7C8A · #638B7E · #8EB096 · #B0BEA0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#6C686F

Ink Gray · DimGray · Warm Gray

HEX
#6C686F
RGB
rgb(108, 104, 111)
HSL
hsl(274, 3%, 42%)
HSB
hsb(274, 6%, 44%)
CMYK
cmyk(3%, 6%, 0%, 56%)
Oklch
oklch(52.3% 0.012 311.1)

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

#6A7C8A

Slate Blue · SlateGray · Navy Blue

HEX
#6A7C8A
RGB
rgb(106, 124, 138)
HSL
hsl(206, 13%, 48%)
HSB
hsb(206, 23%, 54%)
CMYK
cmyk(23%, 10%, 0%, 46%)
Oklch
oklch(57.7% 0.030 241.5)

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

#638B7E

Mineral Blue · SlateGray · Mint Ice

HEX
#638B7E
RGB
rgb(99, 139, 126)
HSL
hsl(161, 17%, 47%)
HSB
hsb(161, 29%, 55%)
CMYK
cmyk(29%, 0%, 9%, 45%)
Oklch
oklch(60.3% 0.049 172.5)

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

#8EB096

Celadon · DarkSeaGreen · Apple Green

HEX
#8EB096
RGB
rgb(142, 176, 150)
HSL
hsl(134, 18%, 62%)
HSB
hsb(134, 19%, 69%)
CMYK
cmyk(19%, 0%, 15%, 31%)
Oklch
oklch(72.5% 0.053 152.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#B0BEA0

Willow Green · DarkGray · Apple Green

HEX
#B0BEA0
RGB
rgb(176, 190, 160)
HSL
hsl(88, 19%, 69%)
HSB
hsb(88, 16%, 75%)
CMYK
cmyk(7%, 0%, 16%, 25%)
Oklch
oklch(78.2% 0.044 127.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6C686F
6B6E68

Analogous

68686E
6C686F
6E686E

Triadic

6C686F
6E6C68
686E6C

Split-Comp.

6C686F
6E6E68
686E68

Tetradic

6C686F
6E6868
6B6E68
686E6E

Contrast Matrix WCAG 2.1 Contrast

6C686F
6A7C8A
638B7E
8EB096
B0BEA0
—
1.3
Fail
1.4
Fail
2.3
Fail
2.8
Fail
1.3
Fail
—
1.1
Fail
1.8
Fail
2.2
Fail
1.4
Fail
1.1
Fail
—
1.6
Fail
1.9
Fail
2.3
Fail
1.8
Fail
1.6
Fail
—
1.2
Fail
2.8
Fail
2.2
Fail
1.9
Fail
1.2
Fail
—
White BG
5.5AA
4.3AA Large
3.8AA Large
2.4Fail
2.0Fail
Black BG
3.8AA Large
4.9AA
5.5AA
8.8AAA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6A6D
727287
747581
9D9D9C
B6B6A7

Deuteranopia

6B6B6D
716F86
726F82
9B989E
B5B4A9

Tritanopia

6C6C6C
6B8483
658484
90A1A2
B1ADAE

Achromatopsia

6A6A6A
787878
7E7E7E
A3A3A3
B6B6B6

Shades & Tints Shades & Tints

#6C686F

Dark
Light

#6A7C8A

Dark
Light

#638B7E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6c686f;
  --color-2: #6a7c8a;
  --color-3: #638b7e;
  --color-4: #8eb096;
  --color-5: #b0bea0;
}

SCSS

$color-1: #6c686f;
$color-2: #6a7c8a;
$color-3: #638b7e;
$color-4: #8eb096;
$color-5: #b0bea0;

TAILWIND

colors: {
  'brand-1': '#6c686f',
  'brand-2': '#6a7c8a',
  'brand-3': '#638b7e',
  'brand-4': '#8eb096',
  'brand-5': '#b0bea0',
}

RGB Array

[108, 104, 111], [106, 124, 138], [99, 139, 126], [142, 176, 150], [176, 190, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6C686F, #6A7C8A, #638B7E, #8EB096, #B0BEA0 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: #6c686f; --color-2: #6a7c8a; --color-3: #638b7e; --color-4: #8eb096; --color-5: #b0bea0. 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