← Back to Editor

#517A28 · #A3CC7A · #7AA351 · #517A51 · #282800

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#517A28

Pine Green · DarkOliveGreen · Forest Green

HEX
#517A28
RGB
rgb(81, 122, 40)
HSL
hsl(90, 51%, 32%)
HSB
hsb(90, 67%, 48%)
CMYK
cmyk(34%, 0%, 67%, 52%)
Oklch
oklch(53.1% 0.121 132.0)

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

#A3CC7A

Celadon · DarkSeaGreen · Apple Green

HEX
#A3CC7A
RGB
rgb(163, 204, 122)
HSL
hsl(90, 45%, 64%)
HSB
hsb(90, 40%, 80%)
CMYK
cmyk(20%, 0%, 40%, 20%)
Oklch
oklch(79.6% 0.117 130.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#7AA351

Celadon · Gray · Olive Green

HEX
#7AA351
RGB
rgb(122, 163, 81)
HSL
hsl(90, 34%, 48%)
HSB
hsb(90, 50%, 64%)
CMYK
cmyk(25%, 0%, 50%, 36%)
Oklch
oklch(66.6% 0.120 130.9)

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

#517A51

Celadon · DarkOliveGreen · Forest Green

HEX
#517A51
RGB
rgb(81, 122, 81)
HSL
hsl(120, 20%, 40%)
HSB
hsb(120, 34%, 48%)
CMYK
cmyk(34%, 0%, 34%, 52%)
Oklch
oklch(53.8% 0.078 144.4)

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

#282800

Autumn Sage · Black · Amber Gold

HEX
#282800
RGB
rgb(40, 40, 0)
HSL
hsl(60, 100%, 8%)
HSB
hsb(60, 100%, 16%)
CMYK
cmyk(0%, 0%, 100%, 84%)
Oklch
oklch(26.8% 0.058 109.8)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

517A28
52287B

Analogous

7B7B28
517A28
287B28

Triadic

517A28
28527B
7B2852

Split-Comp.

517A28
28287B
7B287B

Tetradic

517A28
287B7B
52287B
7B2828

Contrast Matrix WCAG 2.1 Contrast

517A28
A3CC7A
7AA351
517A51
282800
—
2.8
Fail
1.7
Fail
1.0
Fail
3.0
Fail
2.8
Fail
—
1.6
Fail
2.7
Fail
8.2
AAA
1.7
Fail
1.6
Fail
—
1.7
Fail
5.2
AA
1.0
Fail
2.7
Fail
1.7
Fail
—
3.1
AA Large
3.0
Fail
8.2
AAA
5.2
AA
3.1
AA Large
—
White BG
5.0AA
1.8Fail
2.9Fail
4.9AA
15.1AAA
Black BG
4.2AA Large
11.5AAA
7.2AAA
4.3AA Large
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

63633C
B5B58E
8C8C65
63635B
28280A

Deuteranopia

605D41
B2AF93
89866A
605D5D
28280C

Tritanopia

534C4F
A59EA1
7C7578
536364
281113

Achromatopsia

646464
B6B6B6
8D8D8D
696969
232323

Shades & Tints Shades & Tints

#517A28

Dark
Light

#A3CC7A

Dark
Light

#7AA351

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #517a28;
  --color-2: #a3cc7a;
  --color-3: #7aa351;
  --color-4: #517a51;
  --color-5: #282800;
}

SCSS

$color-1: #517a28;
$color-2: #a3cc7a;
$color-3: #7aa351;
$color-4: #517a51;
$color-5: #282800;

TAILWIND

colors: {
  'brand-1': '#517a28',
  'brand-2': '#a3cc7a',
  'brand-3': '#7aa351',
  'brand-4': '#517a51',
  'brand-5': '#282800',
}

RGB Array

[81, 122, 40], [163, 204, 122], [122, 163, 81], [81, 122, 81], [40, 40, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #517A28, #A3CC7A, #7AA351, #517A51, #282800 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: #517a28; --color-2: #a3cc7a; --color-3: #7aa351; --color-4: #517a51; --color-5: #282800. 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