← Back to Editor

#317851 · #52943E · #A8BF5A · #A8803E · #794932

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#317851

Celadon · SeaGreen · Forest Green

HEX
#317851
RGB
rgb(49, 120, 81)
HSL
hsl(147, 42%, 33%)
HSB
hsb(147, 59%, 47%)
CMYK
cmyk(59%, 0%, 33%, 53%)
Oklch
oklch(51.6% 0.095 156.6)

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

#52943E

Celadon · DarkOliveGreen · Olive Green

HEX
#52943E
RGB
rgb(82, 148, 62)
HSL
hsl(106, 41%, 41%)
HSB
hsb(106, 58%, 58%)
CMYK
cmyk(45%, 0%, 58%, 42%)
Oklch
oklch(60.3% 0.138 139.0)

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

#A8BF5A

Grass Green · DarkSeaGreen · Olive Green

HEX
#A8BF5A
RGB
rgb(168, 191, 90)
HSL
hsl(74, 44%, 55%)
HSB
hsb(74, 53%, 75%)
CMYK
cmyk(12%, 0%, 53%, 25%)
Oklch
oklch(76.6% 0.130 120.2)

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

#A8803E

Ochre · Sienna · Amber Brown

HEX
#A8803E
RGB
rgb(168, 128, 62)
HSL
hsl(37, 46%, 45%)
HSB
hsb(37, 63%, 66%)
CMYK
cmyk(0%, 24%, 63%, 34%)
Oklch
oklch(62.5% 0.097 77.9)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#794932

Tangerine · Sienna · Amber Brown

HEX
#794932
RGB
rgb(121, 73, 50)
HSL
hsl(19, 42%, 34%)
HSB
hsb(19, 59%, 47%)
CMYK
cmyk(0%, 40%, 59%, 53%)
Oklch
oklch(45.6% 0.075 46.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

317851
773158

Analogous

347731
317851
317774

Triadic

317851
513177
775131

Split-Comp.

317851
743177
773134

Tetradic

317851
313477
773158
777431

Contrast Matrix WCAG 2.1 Contrast

317851
52943E
A8BF5A
A8803E
794932
—
1.4
Fail
2.6
Fail
1.5
Fail
1.4
Fail
1.4
Fail
—
1.8
Fail
1.0
Fail
2.0
Fail
2.6
Fail
1.8
Fail
—
1.8
Fail
3.7
AA Large
1.5
Fail
1.0
Fail
1.8
Fail
—
2.1
Fail
1.4
Fail
2.0
Fail
3.7
AA Large
2.1
Fail
—
White BG
5.3AA
3.7AA Large
2.0Fail
3.6AA Large
7.5AAA
Black BG
3.9AA Large
5.7AA
10.3AAA
5.8AA
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

50505A
6F6F53
B2B272
97964E
646438

Deuteranopia

4C465D
6B6658
B1AF78
999C52
676B39

Tritanopia

356264
556367
A9868A
A65B5D
773C3D

Achromatopsia

5E5E5E
767676
ADADAD
848484
555555

Shades & Tints Shades & Tints

#317851

Dark
Light

#52943E

Dark
Light

#A8BF5A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #317851;
  --color-2: #52943e;
  --color-3: #a8bf5a;
  --color-4: #a8803e;
  --color-5: #794932;
}

SCSS

$color-1: #317851;
$color-2: #52943e;
$color-3: #a8bf5a;
$color-4: #a8803e;
$color-5: #794932;

TAILWIND

colors: {
  'brand-1': '#317851',
  'brand-2': '#52943e',
  'brand-3': '#a8bf5a',
  'brand-4': '#a8803e',
  'brand-5': '#794932',
}

RGB Array

[49, 120, 81], [82, 148, 62], [168, 191, 90], [168, 128, 62], [121, 73, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #317851, #52943E, #A8BF5A, #A8803E, #794932 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: #317851; --color-2: #52943e; --color-3: #a8bf5a; --color-4: #a8803e; --color-5: #794932. 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