← Back to Editor

#508C8B · #5F7A88 · #68707E · #6B5E6B · #634E5A

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

#508C8B

Mineral Blue · CadetBlue · Mint Ice

HEX
#508C8B
RGB
rgb(80, 140, 139)
HSL
hsl(179, 27%, 43%)
HSB
hsb(179, 43%, 55%)
CMYK
cmyk(43%, 0%, 1%, 45%)
Oklch
oklch(59.9% 0.063 194.2)

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

#5F7A88

Slate Blue · SlateGray · Navy Blue

HEX
#5F7A88
RGB
rgb(95, 122, 136)
HSL
hsl(200, 18%, 45%)
HSB
hsb(200, 30%, 53%)
CMYK
cmyk(30%, 10%, 0%, 47%)
Oklch
oklch(56.3% 0.038 230.8)

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

#68707E

Indigo · DimGray · Navy Blue

HEX
#68707E
RGB
rgb(104, 112, 126)
HSL
hsl(218, 10%, 45%)
HSB
hsb(218, 17%, 49%)
CMYK
cmyk(17%, 11%, 0%, 51%)
Oklch
oklch(54.3% 0.024 261.7)

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

#6B5E6B

Ink Gray · DimGray · Charcoal

HEX
#6B5E6B
RGB
rgb(107, 94, 107)
HSL
hsl(300, 6%, 39%)
HSB
hsb(300, 12%, 42%)
CMYK
cmyk(0%, 12%, 0%, 58%)
Oklch
oklch(49.9% 0.026 326.0)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#634E5A

Rose Purple · DimGray · Camellia

HEX
#634E5A
RGB
rgb(99, 78, 90)
HSL
hsl(326, 12%, 35%)
HSB
hsb(326, 21%, 39%)
CMYK
cmyk(0%, 21%, 9%, 61%)
Oklch
oklch(45.0% 0.033 343.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

508C8B
8B5051

Analogous

508B6D
508C8B
506F8B

Triadic

508C8B
8A508B
8B8A50

Split-Comp.

508C8B
8B506F
8B6D50

Tetradic

508C8B
6D508B
8B5051
6F8B50

Contrast Matrix WCAG 2.1 Contrast

508C8B
5F7A88
68707E
6B5E6B
634E5A
—
1.2
Fail
1.3
Fail
1.6
Fail
2.0
Fail
1.2
Fail
—
1.1
Fail
1.3
Fail
1.7
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.5
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
2.0
Fail
1.7
Fail
1.5
Fail
1.2
Fail
—
White BG
3.8AA Large
4.5AA
5.0AA
6.1AA
7.6AAA
Black BG
5.5AA
4.6AA
4.2AA Large
3.4AA Large
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6B8B
6B6B85
6B6C7B
656568
5A5A57

Deuteranopia

67628B
696784
6B6A7A
666767
5B5D56

Tritanopia

538B8B
608281
687877
6A6565
625554

Achromatopsia

7A7A7A
747474
6F6F6F
636363
565656

Shades & Tints Shades & Tints

#508C8B

Dark
Light

#5F7A88

Dark
Light

#68707E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #508c8b;
  --color-2: #5f7a88;
  --color-3: #68707e;
  --color-4: #6b5e6b;
  --color-5: #634e5a;
}

SCSS

$color-1: #508c8b;
$color-2: #5f7a88;
$color-3: #68707e;
$color-4: #6b5e6b;
$color-5: #634e5a;

TAILWIND

colors: {
  'brand-1': '#508c8b',
  'brand-2': '#5f7a88',
  'brand-3': '#68707e',
  'brand-4': '#6b5e6b',
  'brand-5': '#634e5a',
}

RGB Array

[80, 140, 139], [95, 122, 136], [104, 112, 126], [107, 94, 107], [99, 78, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #508C8B, #5F7A88, #68707E, #6B5E6B, #634E5A 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: #508c8b; --color-2: #5f7a88; --color-3: #68707e; --color-4: #6b5e6b; --color-5: #634e5a. 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