← Back to Editor

#624966 · #5B6878 · #4EA69C · #B5B372 · #E8BA5D

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

#624966

Dark Plum · DimGray · Eggplant

HEX
#624966
RGB
rgb(98, 73, 102)
HSL
hsl(292, 17%, 34%)
HSB
hsb(292, 28%, 40%)
CMYK
cmyk(4%, 28%, 0%, 60%)
Oklch
oklch(44.3% 0.056 321.8)

TraditionalDark Plum」· PaintEggplant」· Creative Blush Sunrise

#5B6878

Indigo · DimGray · Navy Blue

HEX
#5B6878
RGB
rgb(91, 104, 120)
HSL
hsl(213, 14%, 41%)
HSB
hsb(213, 24%, 47%)
CMYK
cmyk(24%, 13%, 0%, 53%)
Oklch
oklch(51.2% 0.030 253.7)

TraditionalIndigo」· PaintNavy Blue」· Creative Blush Sunrise

#4EA69C

Mineral Blue · CadetBlue · Mint Ice

HEX
#4EA69C
RGB
rgb(78, 166, 156)
HSL
hsl(173, 36%, 48%)
HSB
hsb(173, 53%, 65%)
CMYK
cmyk(53%, 0%, 6%, 35%)
Oklch
oklch(66.8% 0.086 185.5)

TraditionalMineral Blue」· PaintMint Ice」· Creative Blush Sunrise

#B5B372

Autumn Sage · Tan · Sunflower

HEX
#B5B372
RGB
rgb(181, 179, 114)
HSL
hsl(58, 31%, 58%)
HSB
hsb(58, 37%, 71%)
CMYK
cmyk(0%, 1%, 37%, 29%)
Oklch
oklch(75.3% 0.086 106.8)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

#E8BA5D

Ginger · SandyBrown · Sunflower

HEX
#E8BA5D
RGB
rgb(232, 186, 93)
HSL
hsl(40, 75%, 64%)
HSB
hsb(40, 60%, 91%)
CMYK
cmyk(0%, 20%, 60%, 9%)
Oklch
oklch(81.2% 0.123 83.0)

TraditionalGinger」· PaintSunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

624966
4C6548

Analogous

534865
624966
65485B

Triadic

624966
656248
486562

Split-Comp.

624966
5B6548
486553

Tetradic

624966
655348
4C6548
485B65

Contrast Matrix WCAG 2.1 Contrast

624966
5B6878
4EA69C
B5B372
E8BA5D
1.4
Fail
2.7
Fail
3.6
AA Large
4.4
AA Large
1.4
Fail
2.0
Fail
2.6
Fail
3.1
AA Large
2.7
Fail
2.0
Fail
1.3
Fail
1.6
Fail
3.6
AA Large
2.6
Fail
1.3
Fail
1.2
Fail
4.4
AA Large
3.1
AA Large
1.6
Fail
1.2
Fail
White BG
7.9AAA
5.7AA
2.9Fail
2.2Fail
1.8Fail
Black BG
2.7Fail
3.7AA Large
7.3AAA
9.7AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

57575F
616174
74759E
B4B482
D4D474

Deuteranopia

595B5D
605F73
6F689F
B4B486
D7DA79

Tritanopia

615958
5C7170
52A0A1
B58E91
E68589

Achromatopsia

545454
666666
8B8B8B
ACACAC
BDBDBD

Shades & Tints Shades & Tints

#624966

Dark
Light

#5B6878

Dark
Light

#4EA69C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #624966;
  --color-2: #5b6878;
  --color-3: #4ea69c;
  --color-4: #b5b372;
  --color-5: #e8ba5d;
}

SCSS

$color-1: #624966;
$color-2: #5b6878;
$color-3: #4ea69c;
$color-4: #b5b372;
$color-5: #e8ba5d;

TAILWIND

colors: {
  'brand-1': '#624966',
  'brand-2': '#5b6878',
  'brand-3': '#4ea69c',
  'brand-4': '#b5b372',
  'brand-5': '#e8ba5d',
}

RGB Array

[98, 73, 102], [91, 104, 120], [78, 166, 156], [181, 179, 114], [232, 186, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #624966, #5B6878, #4EA69C, #B5B372, #E8BA5D is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #624966; --color-2: #5b6878; --color-3: #4ea69c; --color-4: #b5b372; --color-5: #e8ba5d. 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. 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