← Back to Editor

#405842 · #7F241F · #161415 · #755E34 · #987B35

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#405842

Celadon · DarkSlateGray · Forest Green

HEX
#405842
RGB
rgb(64, 88, 66)
HSL
hsl(125, 16%, 30%)
HSB
hsb(125, 27%, 35%)
CMYK
cmyk(27%, 0%, 25%, 65%)
Oklch
oklch(43.4% 0.046 146.9)

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

#7F241F

Vermilion · Brown · Wine Red

HEX
#7F241F
RGB
rgb(127, 36, 31)
HSL
hsl(3, 61%, 31%)
HSB
hsb(3, 76%, 50%)
CMYK
cmyk(0%, 72%, 76%, 50%)
Oklch
oklch(40.4% 0.126 27.4)

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

#161415

Ink Black · Black · Jet Black

HEX
#161415
RGB
rgb(22, 20, 21)
HSL
hsl(330, 5%, 8%)
HSB
hsb(330, 9%, 9%)
CMYK
cmyk(0%, 9%, 5%, 91%)
Oklch
oklch(19.4% 0.004 345.6)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#755E34

Ochre · DarkOliveGreen · Amber Brown

HEX
#755E34
RGB
rgb(117, 94, 52)
HSL
hsl(39, 38%, 33%)
HSB
hsb(39, 56%, 46%)
CMYK
cmyk(0%, 20%, 56%, 54%)
Oklch
oklch(49.5% 0.066 81.3)

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

#987B35

Ochre · Sienna · Honey Gold

HEX
#987B35
RGB
rgb(152, 123, 53)
HSL
hsl(42, 48%, 40%)
HSB
hsb(42, 65%, 60%)
CMYK
cmyk(0%, 19%, 65%, 40%)
Oklch
oklch(59.6% 0.095 86.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

405842
594057

Analogous

4A5940
405842
40594F

Triadic

405842
424059
594240

Split-Comp.

405842
4F4059
59404A

Tetradic

405842
404A59
594057
594F40

Contrast Matrix WCAG 2.1 Contrast

405842
7F241F
161415
755E34
987B35
—
1.2
Fail
2.4
Fail
1.3
Fail
1.9
Fail
1.2
Fail
—
1.9
Fail
1.6
Fail
2.4
Fail
2.4
Fail
1.9
Fail
—
3.0
Fail
4.6
AA
1.3
Fail
1.6
Fail
3.0
Fail
—
1.5
Fail
1.9
Fail
2.4
Fail
4.6
AA
1.5
Fail
—
White BG
7.8AAA
9.7AAA
18.3AAA
6.2AA
4.0AA Large
Black BG
2.7Fail
2.2Fail
1.1Fail
3.4AA Large
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4B47
585720
151515
6B6B3E
8B8B46

Deuteranopia

494749
5D6421
151515
6C6E41
8D8F4A

Tritanopia

414C4C
7A2121
161515
744648
975356

Achromatopsia

4E4E4E
3F3F3F
151515
606060
7C7C7C

Shades & Tints Shades & Tints

#405842

Dark
Light

#7F241F

Dark
Light

#161415

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #405842;
  --color-2: #7f241f;
  --color-3: #161415;
  --color-4: #755e34;
  --color-5: #987b35;
}

SCSS

$color-1: #405842;
$color-2: #7f241f;
$color-3: #161415;
$color-4: #755e34;
$color-5: #987b35;

TAILWIND

colors: {
  'brand-1': '#405842',
  'brand-2': '#7f241f',
  'brand-3': '#161415',
  'brand-4': '#755e34',
  'brand-5': '#987b35',
}

RGB Array

[64, 88, 66], [127, 36, 31], [22, 20, 21], [117, 94, 52], [152, 123, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #405842, #7F241F, #161415, #755E34, #987B35 is ideal for: tech websites, dark mode UIs, game UIs. 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: #405842; --color-2: #7f241f; --color-3: #161415; --color-4: #755e34; --color-5: #987b35. 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. 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 nature-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