← Back to Editor

#5F7035 · #D1E751 · #E6E9DC · #342A14

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

Color Details Color Details

#5F7035

Grass Green · DarkOliveGreen · Forest Green

HEX
#5F7035
RGB
rgb(95, 112, 53)
HSL
hsl(77, 36%, 32%)
HSB
hsb(77, 53%, 44%)
CMYK
cmyk(15%, 0%, 53%, 56%)
Oklch
oklch(51.7% 0.086 122.7)

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

#D1E751

Fresh Green · GreenYellow · Sunflower

HEX
#D1E751
RGB
rgb(209, 231, 81)
HSL
hsl(69, 76%, 61%)
HSB
hsb(69, 65%, 91%)
CMYK
cmyk(10%, 0%, 65%, 9%)
Oklch
oklch(88.4% 0.172 117.2)

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

#E6E9DC

Willow Green · Beige · Mint Green

HEX
#E6E9DC
RGB
rgb(230, 233, 220)
HSL
hsl(74, 23%, 89%)
HSB
hsb(74, 6%, 91%)
CMYK
cmyk(1%, 0%, 6%, 9%)
Oklch
oklch(92.8% 0.018 117.3)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#342A14

Ochre · Black · Amber Gold

HEX
#342A14
RGB
rgb(52, 42, 20)
HSL
hsl(41, 44%, 14%)
HSB
hsb(41, 62%, 20%)
CMYK
cmyk(0%, 19%, 62%, 80%)
Oklch
oklch(29.0% 0.038 85.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F7035
45346F

Analogous

6F6234
5F7035
416F34

Triadic

5F7035
345E6F
6F345E

Split-Comp.

5F7035
34416F
62346F

Tetradic

5F7035
346F62
45346F
6F3441

Contrast Matrix WCAG 2.1 Contrast

5F7035
D1E751
E6E9DC
342A14
—
4.0
AA Large
4.4
AA Large
2.6
Fail
4.0
AA Large
—
1.1
Fail
10.3
AAA
4.4
AA Large
1.1
Fail
—
11.5
AAA
2.6
Fail
10.3
AAA
11.5
AAA
—
White BG
5.4AA
1.4Fail
1.2Fail
14.1AAA
Black BG
3.9AA Large
15.3AAA
17.1AAA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

666743
DBDB75
E7E7DF
303019

Deuteranopia

656447
D9D87E
E7E7E0
30311B

Tritanopia

604F51
D29298
E6E2E2
341E1E

Achromatopsia

646464
CFCFCF
E7E7E7
2A2A2A

Shades & Tints Shades & Tints

#5F7035

Dark
Light

#D1E751

Dark
Light

#E6E9DC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f7035;
  --color-2: #d1e751;
  --color-3: #e6e9dc;
  --color-4: #342a14;
}

SCSS

$color-1: #5f7035;
$color-2: #d1e751;
$color-3: #e6e9dc;
$color-4: #342a14;

TAILWIND

colors: {
  'brand-1': '#5f7035',
  'brand-2': '#d1e751',
  'brand-3': '#e6e9dc',
  'brand-4': '#342a14',
}

RGB Array

[95, 112, 53], [209, 231, 81], [230, 233, 220], [52, 42, 20]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #5F7035, #D1E751, #E6E9DC, #342A14 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #5f7035; --color-2: #d1e751; --color-3: #e6e9dc; --color-4: #342a14. 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. 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 4-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