← Back to Editor

#3E6105 · #87C70A · #F9FE6C · #D48317 · #F93B2D

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#3E6105

Grass Green · DarkOliveGreen · Dark Green

HEX
#3E6105
RGB
rgb(62, 97, 5)
HSL
hsl(83, 90%, 20%)
HSB
hsb(83, 95%, 38%)
CMYK
cmyk(36%, 0%, 95%, 62%)
Oklch
oklch(44.9% 0.118 130.1)

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

#87C70A

Grass Green · Chartreuse · Olive Green

HEX
#87C70A
RGB
rgb(135, 199, 10)
HSL
hsl(80, 90%, 41%)
HSB
hsb(80, 95%, 78%)
CMYK
cmyk(32%, 0%, 95%, 22%)
Oklch
oklch(75.7% 0.200 129.2)

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

#F9FE6C

Fresh Green · Khaki · Sunflower

HEX
#F9FE6C
RGB
rgb(249, 254, 108)
HSL
hsl(62, 99%, 71%)
HSB
hsb(62, 57%, 100%)
CMYK
cmyk(2%, 0%, 57%, 0%)
Oklch
oklch(96.6% 0.167 111.0)

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

#D48317

Ochre · Chocolate · Amber Brown

HEX
#D48317
RGB
rgb(212, 131, 23)
HSL
hsl(34, 80%, 46%)
HSB
hsb(34, 89%, 83%)
CMYK
cmyk(0%, 38%, 89%, 17%)
Oklch
oklch(68.0% 0.146 65.8)

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

#F93B2D

Vermilion · OrangeRed · Passion Red

HEX
#F93B2D
RGB
rgb(249, 59, 45)
HSL
hsl(4, 94%, 58%)
HSB
hsb(4, 82%, 98%)
CMYK
cmyk(0%, 76%, 82%, 2%)
Oklch
oklch(64.4% 0.227 29.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3E6105
280561

Analogous

615605
3E6105
106105

Triadic

3E6105
053E61
61053E

Split-Comp.

3E6105
051061
560561

Tetradic

3E6105
056156
280561
610510

Contrast Matrix WCAG 2.1 Contrast

3E6105
87C70A
F9FE6C
D48317
F93B2D
—
3.5
AA Large
6.7
AA
2.4
Fail
2.0
Fail
3.5
AA Large
—
1.9
Fail
1.4
Fail
1.8
Fail
6.7
AA
1.9
Fail
—
2.8
Fail
3.4
AA Large
2.4
Fail
1.4
Fail
2.8
Fail
—
1.2
Fail
2.0
Fail
1.8
Fail
3.4
AA Large
1.2
Fail
—
White BG
7.2AAA
2.1Fail
1.1Fail
3.0Fail
3.7AA Large
Black BG
2.9Fail
10.2AAA
19.4AAA
7.1AAA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4D1B
A3A338
FBFB8F
B1B031
A7A530

Deuteranopia

4B4921
9F9A43
FBFB98
B6BC37
B2C031

Tritanopia

402D31
8A5C64
F9ABB1
D0464A
EF3334

Achromatopsia

4C4C4C
9E9E9E
ECECEC
8F8F8F
727272

Shades & Tints Shades & Tints

#3E6105

Dark
Light

#87C70A

Dark
Light

#F9FE6C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3e6105;
  --color-2: #87c70a;
  --color-3: #f9fe6c;
  --color-4: #d48317;
  --color-5: #f93b2d;
}

SCSS

$color-1: #3e6105;
$color-2: #87c70a;
$color-3: #f9fe6c;
$color-4: #d48317;
$color-5: #f93b2d;

TAILWIND

colors: {
  'brand-1': '#3e6105',
  'brand-2': '#87c70a',
  'brand-3': '#f9fe6c',
  'brand-4': '#d48317',
  'brand-5': '#f93b2d',
}

RGB Array

[62, 97, 5], [135, 199, 10], [249, 254, 108], [212, 131, 23], [249, 59, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #3E6105, #87C70A, #F9FE6C, #D48317, #F93B2D is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #3e6105; --color-2: #87c70a; --color-3: #f9fe6c; --color-4: #d48317; --color-5: #f93b2d. 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 dark-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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