← Back to Editor

#81343A · #702F33 · #5D2A2F · #481E20 · #B2A767

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

#81343A

Crimson · Brown · Wine Red

HEX
#81343A
RGB
rgb(129, 52, 58)
HSL
hsl(355, 43%, 35%)
HSB
hsb(355, 60%, 51%)
CMYK
cmyk(0%, 60%, 55%, 49%)
Oklch
oklch(43.3% 0.107 18.0)

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

#702F33

Crimson · Brown · Wine Red

HEX
#702F33
RGB
rgb(112, 47, 51)
HSL
hsl(356, 41%, 31%)
HSB
hsb(356, 58%, 44%)
CMYK
cmyk(0%, 58%, 54%, 56%)
Oklch
oklch(39.6% 0.092 18.5)

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

#5D2A2F

Crimson · DarkOliveGreen · Wine Red

HEX
#5D2A2F
RGB
rgb(93, 42, 47)
HSL
hsl(354, 38%, 26%)
HSB
hsb(354, 55%, 36%)
CMYK
cmyk(0%, 55%, 49%, 64%)
Oklch
oklch(35.6% 0.075 15.5)

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

#481E20

Crimson · Maroon · Deep Berry

HEX
#481E20
RGB
rgb(72, 30, 32)
HSL
hsl(357, 41%, 20%)
HSB
hsb(357, 58%, 28%)
CMYK
cmyk(0%, 58%, 56%, 72%)
Oklch
oklch(29.7% 0.064 18.9)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#B2A767

Autumn Sage · Tan · Sunflower

HEX
#B2A767
RGB
rgb(178, 167, 103)
HSL
hsl(51, 33%, 55%)
HSB
hsb(51, 42%, 70%)
CMYK
cmyk(0%, 6%, 42%, 30%)
Oklch
oklch(72.3% 0.085 99.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

81343A
338079

Analogous

803360
81343A
805333

Triadic

81343A
398033
333980

Split-Comp.

81343A
338053
336080

Tetradic

81343A
608033
338079
533380

Contrast Matrix WCAG 2.1 Contrast

81343A
702F33
5D2A2F
481E20
B2A767
—
1.2
Fail
1.4
Fail
1.7
Fail
3.5
AA Large
1.2
Fail
—
1.2
Fail
1.4
Fail
4.0
AA Large
1.4
Fail
1.2
Fail
—
1.2
Fail
4.7
AA
1.7
Fail
1.4
Fail
1.2
Fail
—
5.8
AA
3.5
AA Large
4.0
AA Large
4.7
AA
5.8
AA
—
White BG
8.4AAA
9.8AAA
11.4AAA
14.2AAA
2.4Fail
Black BG
2.5Fail
2.1Fail
1.8Fail
1.5Fail
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

605F39
545332
47462E
363520
ADAD76

Deuteranopia

646A38
585C32
4A4E2E
383B1F
AEAF7A

Tritanopia

7D3737
6D3131
5A2D2D
461F1F
B18385

Achromatopsia

4C4C4C
434343
3A3A3A
2B2B2B
A3A3A3

Shades & Tints Shades & Tints

#81343A

Dark
Light

#702F33

Dark
Light

#5D2A2F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #81343a;
  --color-2: #702f33;
  --color-3: #5d2a2f;
  --color-4: #481e20;
  --color-5: #b2a767;
}

SCSS

$color-1: #81343a;
$color-2: #702f33;
$color-3: #5d2a2f;
$color-4: #481e20;
$color-5: #b2a767;

TAILWIND

colors: {
  'brand-1': '#81343a',
  'brand-2': '#702f33',
  'brand-3': '#5d2a2f',
  'brand-4': '#481e20',
  'brand-5': '#b2a767',
}

RGB Array

[129, 52, 58], [112, 47, 51], [93, 42, 47], [72, 30, 32], [178, 167, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #81343A, #702F33, #5D2A2F, #481E20, #B2A767 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: #81343a; --color-2: #702f33; --color-3: #5d2a2f; --color-4: #481e20; --color-5: #b2a767. 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