← Back to Editor

#517A4A · #2B1513 · #7F6C99 · #E3AD34 · #397D9F

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

#517A4A

Celadon · DarkOliveGreen · Forest Green

HEX
#517A4A
RGB
rgb(81, 122, 74)
HSL
hsl(111, 24%, 38%)
HSB
hsb(111, 39%, 48%)
CMYK
cmyk(34%, 0%, 39%, 52%)
Oklch
oklch(53.6% 0.086 140.9)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#2B1513

Crimson · Black · Deep Berry

HEX
#2B1513
RGB
rgb(43, 21, 19)
HSL
hsl(5, 39%, 12%)
HSB
hsb(5, 56%, 17%)
CMYK
cmyk(0%, 51%, 56%, 83%)
Oklch
oklch(22.6% 0.036 25.9)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#7F6C99

Deep Indigo · SlateGray · Violet

HEX
#7F6C99
RGB
rgb(127, 108, 153)
HSL
hsl(265, 18%, 51%)
HSB
hsb(265, 29%, 60%)
CMYK
cmyk(17%, 29%, 0%, 40%)
Oklch
oklch(56.6% 0.071 303.5)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#E3AD34

Ginger · GoldenRod · Sunflower

HEX
#E3AD34
RGB
rgb(227, 173, 52)
HSL
hsl(41, 76%, 55%)
HSB
hsb(41, 77%, 89%)
CMYK
cmyk(0%, 24%, 77%, 11%)
Oklch
oklch(77.8% 0.144 83.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#397D9F

Slate Blue · SteelBlue · Navy Blue

HEX
#397D9F
RGB
rgb(57, 125, 159)
HSL
hsl(200, 47%, 42%)
HSB
hsb(200, 64%, 62%)
CMYK
cmyk(64%, 21%, 0%, 38%)
Oklch
oklch(56.0% 0.086 233.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

517A4A
714A78

Analogous

68784A
517A4A
4A785A

Triadic

517A4A
4A5178
784A51

Split-Comp.

517A4A
5A4A78
784A68

Tetradic

517A4A
4A6878
714A78
785A4A

Contrast Matrix WCAG 2.1 Contrast

517A4A
2B1513
7F6C99
E3AD34
397D9F
—
3.5
AA Large
1.1
Fail
2.4
Fail
1.1
Fail
3.5
AA Large
—
3.7
AA Large
8.4
AAA
3.8
AA Large
1.1
Fail
3.7
AA Large
—
2.3
Fail
1.0
Fail
2.4
Fail
8.4
AAA
2.3
Fail
—
2.2
Fail
1.1
Fail
3.8
AA Large
1.0
Fail
2.2
Fail
—
White BG
5.0AA
17.2AAA
4.7AA
2.0Fail
4.6AA
Black BG
4.2AA Large
1.2Fail
4.5AA
10.3AAA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

636356
212113
77778E
CCCB51
565797

Deuteranopia

605D58
232414
78798C
CFD358
534D95

Tritanopia

535F61
2A1414
7E8684
E0686D
3C908F

Achromatopsia

686868
1B1B1B
777777
AFAFAF
6D6D6D

Shades & Tints Shades & Tints

#517A4A

Dark
Light

#2B1513

Dark
Light

#7F6C99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #517a4a;
  --color-2: #2b1513;
  --color-3: #7f6c99;
  --color-4: #e3ad34;
  --color-5: #397d9f;
}

SCSS

$color-1: #517a4a;
$color-2: #2b1513;
$color-3: #7f6c99;
$color-4: #e3ad34;
$color-5: #397d9f;

TAILWIND

colors: {
  'brand-1': '#517a4a',
  'brand-2': '#2b1513',
  'brand-3': '#7f6c99',
  'brand-4': '#e3ad34',
  'brand-5': '#397d9f',
}

RGB Array

[81, 122, 74], [43, 21, 19], [127, 108, 153], [227, 173, 52], [57, 125, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #517A4A, #2B1513, #7F6C99, #E3AD34, #397D9F 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: #517a4a; --color-2: #2b1513; --color-3: #7f6c99; --color-4: #e3ad34; --color-5: #397d9f. 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