← Back to Editor

#671073 · #B4D676 · #5F8739 · #341538 · #261525

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 WebsiteBlogData Visualization

Color Details Color Details

#671073

Royal Purple · Purple · Eggplant

HEX
#671073
RGB
rgb(103, 16, 115)
HSL
hsl(293, 76%, 26%)
HSB
hsb(293, 86%, 45%)
CMYK
cmyk(10%, 86%, 0%, 55%)
Oklch
oklch(37.7% 0.164 322.3)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

#B4D676

Willow Green · Tan · Apple Green

HEX
#B4D676
RGB
rgb(180, 214, 118)
HSL
hsl(81, 54%, 65%)
HSB
hsb(81, 45%, 84%)
CMYK
cmyk(16%, 0%, 45%, 16%)
Oklch
oklch(83.0% 0.129 125.1)

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

#5F8739

Celadon · DarkOliveGreen · Forest Green

HEX
#5F8739
RGB
rgb(95, 135, 57)
HSL
hsl(91, 41%, 38%)
HSB
hsb(91, 58%, 53%)
CMYK
cmyk(30%, 0%, 58%, 47%)
Oklch
oklch(57.6% 0.117 131.8)

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

#341538

Dark Plum · MidnightBlue · Dark Purple

HEX
#341538
RGB
rgb(52, 21, 56)
HSL
hsl(293, 45%, 15%)
HSB
hsb(293, 63%, 22%)
CMYK
cmyk(7%, 62%, 0%, 78%)
Oklch
oklch(25.9% 0.074 322.9)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#261525

Rose Purple · Black · Dark Purple

HEX
#261525
RGB
rgb(38, 21, 37)
HSL
hsl(304, 29%, 12%)
HSB
hsb(304, 45%, 15%)
CMYK
cmyk(0%, 45%, 3%, 85%)
Oklch
oklch(22.6% 0.039 328.8)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

671073
1C7510

Analogous

371075
671073
75104E

Triadic

671073
756910
107569

Split-Comp.

671073
4E7510
107537

Tetradic

671073
753710
1C7510
104E75

Contrast Matrix WCAG 2.1 Contrast

671073
B4D676
5F8739
341538
261525
—
6.8
AA
2.6
Fail
1.4
Fail
1.6
Fail
6.8
AA
—
2.6
Fail
9.8
AAA
10.5
AAA
2.6
Fail
2.6
Fail
—
3.8
AA Large
4.1
AA Large
1.4
Fail
9.8
AAA
3.8
AA Large
—
1.1
Fail
1.6
Fail
10.5
AAA
4.1
AA Large
1.1
Fail
—
White BG
11.1AAA
1.6Fail
4.2AA Large
16.0AAA
17.3AAA
Black BG
1.9Fail
12.8AAA
5.0AA
1.3Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

41415B
C3C38D
70714C
272630
1F1E21

Deuteranopia

464D55
C1BE93
6E6B50
282B2D
202120

Tritanopia

634844
B6A0A4
615B5E
322927
251E1D

Achromatopsia

353535
C1C1C1
727272
222222
1C1C1C

Shades & Tints Shades & Tints

#671073

Dark
Light

#B4D676

Dark
Light

#5F8739

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #671073;
  --color-2: #b4d676;
  --color-3: #5f8739;
  --color-4: #341538;
  --color-5: #261525;
}

SCSS

$color-1: #671073;
$color-2: #b4d676;
$color-3: #5f8739;
$color-4: #341538;
$color-5: #261525;

TAILWIND

colors: {
  'brand-1': '#671073',
  'brand-2': '#b4d676',
  'brand-3': '#5f8739',
  'brand-4': '#341538',
  'brand-5': '#261525',
}

RGB Array

[103, 16, 115], [180, 214, 118], [95, 135, 57], [52, 21, 56], [38, 21, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #671073, #B4D676, #5F8739, #341538, #261525 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #671073; --color-2: #b4d676; --color-3: #5f8739; --color-4: #341538; --color-5: #261525. 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. 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 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