← Back to Editor

#301F2B · #8F6082 · #7BB082 · #99C76D · #E6DED3

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

#301F2B

Rose Purple · DarkSlateGray · Dark Purple

HEX
#301F2B
RGB
rgb(48, 31, 43)
HSL
hsl(318, 22%, 15%)
HSB
hsb(318, 35%, 19%)
CMYK
cmyk(0%, 35%, 10%, 81%)
Oklch
oklch(26.5% 0.033 337.8)

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

#8F6082

Rose Purple · Gray · Violet

HEX
#8F6082
RGB
rgb(143, 96, 130)
HSL
hsl(317, 20%, 47%)
HSB
hsb(317, 33%, 56%)
CMYK
cmyk(0%, 33%, 9%, 44%)
Oklch
oklch(55.1% 0.077 337.3)

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

#7BB082

Celadon · DarkSeaGreen · Olive Green

HEX
#7BB082
RGB
rgb(123, 176, 130)
HSL
hsl(128, 25%, 59%)
HSB
hsb(128, 30%, 69%)
CMYK
cmyk(30%, 0%, 26%, 31%)
Oklch
oklch(70.8% 0.087 148.0)

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

#99C76D

Celadon · DarkSeaGreen · Olive Green

HEX
#99C76D
RGB
rgb(153, 199, 109)
HSL
hsl(91, 45%, 60%)
HSB
hsb(91, 45%, 78%)
CMYK
cmyk(23%, 0%, 45%, 22%)
Oklch
oklch(77.6% 0.129 131.0)

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

#E6DED3

Goose Yellow · LightGray · Peach Orange

HEX
#E6DED3
RGB
rgb(230, 222, 211)
HSL
hsl(35, 28%, 86%)
HSB
hsb(35, 8%, 90%)
CMYK
cmyk(0%, 3%, 8%, 10%)
Oklch
oklch(90.4% 0.017 76.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

301F2B
1E2F23

Analogous

2B1E2F
301F2B
2F1E21

Triadic

301F2B
2A2F1E
1E2A2F

Split-Comp.

301F2B
212F1E
1E2F2B

Tetradic

301F2B
2F2B1E
1E2F23
1E212F

Contrast Matrix WCAG 2.1 Contrast

301F2B
8F6082
7BB082
99C76D
E6DED3
—
3.1
AA Large
6.2
AA
7.9
AAA
11.6
AAA
3.1
AA Large
—
2.0
Fail
2.6
Fail
3.8
AA Large
6.2
AA
2.0
Fail
—
1.3
Fail
1.9
Fail
7.9
AAA
2.6
Fail
1.3
Fail
—
1.5
Fail
11.6
AAA
3.8
AA Large
1.9
Fail
1.5
Fail
—
White BG
15.5AAA
5.0AA
2.5Fail
2.0Fail
1.3Fail
Black BG
1.4Fail
4.2AA Large
8.4AAA
10.7AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

292828
7B7A7A
92928D
ADAD83
E3E2D6

Deuteranopia

2A2B27
7D8178
8F8B90
AAA788
E3E4D6

Tritanopia

2F2625
8D7372
7E9698
9B9498
E6D8D8

Achromatopsia

252525
727272
9B9B9B
AFAFAF
DFDFDF

Shades & Tints Shades & Tints

#301F2B

Dark
Light

#8F6082

Dark
Light

#7BB082

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #301f2b;
  --color-2: #8f6082;
  --color-3: #7bb082;
  --color-4: #99c76d;
  --color-5: #e6ded3;
}

SCSS

$color-1: #301f2b;
$color-2: #8f6082;
$color-3: #7bb082;
$color-4: #99c76d;
$color-5: #e6ded3;

TAILWIND

colors: {
  'brand-1': '#301f2b',
  'brand-2': '#8f6082',
  'brand-3': '#7bb082',
  'brand-4': '#99c76d',
  'brand-5': '#e6ded3',
}

RGB Array

[48, 31, 43], [143, 96, 130], [123, 176, 130], [153, 199, 109], [230, 222, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #301F2B, #8F6082, #7BB082, #99C76D, #E6DED3 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #301f2b; --color-2: #8f6082; --color-3: #7bb082; --color-4: #99c76d; --color-5: #e6ded3. 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 nature-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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