← Back to Editor

#31514E · #ACB759 · #EDE687 · #681D69 · #3A1042

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 LibraryData Visualization

Color Details Color Details

#31514E

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#31514E
RGB
rgb(49, 81, 78)
HSL
hsl(174, 25%, 25%)
HSB
hsb(174, 40%, 32%)
CMYK
cmyk(40%, 0%, 4%, 68%)
Oklch
oklch(40.9% 0.038 188.3)

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

#ACB759

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ACB759
RGB
rgb(172, 183, 89)
HSL
hsl(67, 39%, 53%)
HSB
hsb(67, 51%, 72%)
CMYK
cmyk(6%, 0%, 51%, 28%)
Oklch
oklch(75.1% 0.120 114.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#EDE687

Fresh Green · Khaki · Sunflower

HEX
#EDE687
RGB
rgb(237, 230, 135)
HSL
hsl(56, 74%, 73%)
HSB
hsb(56, 43%, 93%)
CMYK
cmyk(0%, 3%, 43%, 7%)
Oklch
oklch(91.0% 0.117 104.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#681D69

Royal Purple · Purple · Eggplant

HEX
#681D69
RGB
rgb(104, 29, 105)
HSL
hsl(299, 57%, 26%)
HSB
hsb(299, 72%, 41%)
CMYK
cmyk(1%, 72%, 0%, 59%)
Oklch
oklch(38.3% 0.142 327.4)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

#3A1042

Royal Purple · MidnightBlue · Dark Purple

HEX
#3A1042
RGB
rgb(58, 16, 66)
HSL
hsl(290, 61%, 16%)
HSB
hsb(290, 76%, 26%)
CMYK
cmyk(12%, 76%, 0%, 74%)
Oklch
oklch(26.8% 0.098 320.8)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

31514E
503033

Analogous

30503D
31514E
304350

Triadic

31514E
4D3050
504D30

Split-Comp.

31514E
503043
503D30

Tetradic

31514E
3D3050
503033
435030

Contrast Matrix WCAG 2.1 Contrast

31514E
ACB759
EDE687
681D69
3A1042
—
4.0
AA Large
6.7
AA
1.2
Fail
1.8
Fail
4.0
AA Large
—
1.7
Fail
4.9
AA
7.3
AAA
6.7
AA
1.7
Fail
—
8.3
AAA
12.2
AAA
1.2
Fail
4.9
AA
8.3
AAA
—
1.5
Fail
1.8
Fail
7.3
AAA
12.2
AAA
1.5
Fail
—
White BG
8.7AAA
2.2Fail
1.3Fail
10.7AAA
15.8AAA
Black BG
2.4Fail
9.7AAA
16.3AAA
2.0Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F4F
B1B170
EAEA9E
484757
282736

Deuteranopia

3D3B4F
B0AF75
EAEBA4
4C5252
2A2D33

Tritanopia

334F4F
AD8286
EDB0B4
644845
382C2A

Achromatopsia

474747
A9A9A9
DDDDDD
3C3C3C
222222

Shades & Tints Shades & Tints

#31514E

Dark
Light

#ACB759

Dark
Light

#EDE687

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #31514e;
  --color-2: #acb759;
  --color-3: #ede687;
  --color-4: #681d69;
  --color-5: #3a1042;
}

SCSS

$color-1: #31514e;
$color-2: #acb759;
$color-3: #ede687;
$color-4: #681d69;
$color-5: #3a1042;

TAILWIND

colors: {
  'brand-1': '#31514e',
  'brand-2': '#acb759',
  'brand-3': '#ede687',
  'brand-4': '#681d69',
  'brand-5': '#3a1042',
}

RGB Array

[49, 81, 78], [172, 183, 89], [237, 230, 135], [104, 29, 105], [58, 16, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #31514E, #ACB759, #EDE687, #681D69, #3A1042 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #31514e; --color-2: #acb759; --color-3: #ede687; --color-4: #681d69; --color-5: #3a1042. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. High-contrast palettes naturally meet WCAG accessibility standards. 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