← Back to Editor

#4B5470 · #666780 · #668079 · #74918A · #8FB3A9

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

#4B5470

Indigo · DarkSlateBlue · Prussian Blue

HEX
#4B5470
RGB
rgb(75, 84, 112)
HSL
hsl(225, 20%, 37%)
HSB
hsb(225, 33%, 44%)
CMYK
cmyk(33%, 25%, 0%, 56%)
Oklch
oklch(45.0% 0.047 270.6)

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

#666780

Indigo · DimGray · Navy Blue

HEX
#666780
RGB
rgb(102, 103, 128)
HSL
hsl(238, 11%, 45%)
HSB
hsb(238, 20%, 50%)
CMYK
cmyk(20%, 20%, 0%, 50%)
Oklch
oklch(52.2% 0.039 283.1)

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

#668079

Mineral Blue · SlateGray · Mint Ice

HEX
#668079
RGB
rgb(102, 128, 121)
HSL
hsl(164, 11%, 45%)
HSB
hsb(164, 20%, 50%)
CMYK
cmyk(20%, 0%, 5%, 50%)
Oklch
oklch(57.7% 0.032 176.9)

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

#74918A

Mineral Blue · LightSlateGray · Lake Green

HEX
#74918A
RGB
rgb(116, 145, 138)
HSL
hsl(166, 12%, 51%)
HSB
hsb(166, 20%, 57%)
CMYK
cmyk(20%, 0%, 5%, 43%)
Oklch
oklch(63.2% 0.034 178.8)

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

#8FB3A9

Jade · DarkSeaGreen · Lake Green

HEX
#8FB3A9
RGB
rgb(143, 179, 169)
HSL
hsl(163, 19%, 63%)
HSB
hsb(163, 20%, 70%)
CMYK
cmyk(20%, 0%, 6%, 30%)
Oklch
oklch(73.7% 0.042 176.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B5470
71684B

Analogous

4B6871
4B5470
554B71

Triadic

4B5470
714B55
55714B

Split-Comp.

4B5470
71554B
68714B

Tetradic

4B5470
714B68
71684B
4B7155

Contrast Matrix WCAG 2.1 Contrast

4B5470
666780
668079
74918A
8FB3A9
—
1.4
Fail
1.8
Fail
2.2
Fail
3.3
AA Large
1.4
Fail
—
1.3
Fail
1.6
Fail
2.4
Fail
1.8
Fail
1.3
Fail
—
1.2
Fail
1.9
Fail
2.2
Fail
1.6
Fail
1.2
Fail
—
1.5
Fail
3.3
AA Large
2.4
Fail
1.9
Fail
1.5
Fail
—
White BG
7.5AAA
5.5AA
4.3AA Large
3.4AA Large
2.3Fail
Black BG
2.8Fail
3.8AA Large
4.9AA
6.2AA
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F69
66667A
71717B
81818C
9F9FAB

Deuteranopia

4E4E68
666679
706E7B
7F7D8C
9D9AAC

Tritanopia

4B6463
667574
677C7C
758D8D
91ADAE

Achromatopsia

555555
6A6A6A
777777
888888
A7A7A7

Shades & Tints Shades & Tints

#4B5470

Dark
Light

#666780

Dark
Light

#668079

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b5470;
  --color-2: #666780;
  --color-3: #668079;
  --color-4: #74918a;
  --color-5: #8fb3a9;
}

SCSS

$color-1: #4b5470;
$color-2: #666780;
$color-3: #668079;
$color-4: #74918a;
$color-5: #8fb3a9;

TAILWIND

colors: {
  'brand-1': '#4b5470',
  'brand-2': '#666780',
  'brand-3': '#668079',
  'brand-4': '#74918a',
  'brand-5': '#8fb3a9',
}

RGB Array

[75, 84, 112], [102, 103, 128], [102, 128, 121], [116, 145, 138], [143, 179, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4B5470, #666780, #668079, #74918A, #8FB3A9 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: #4b5470; --color-2: #666780; --color-3: #668079; --color-4: #74918a; --color-5: #8fb3a9. 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