← Back to Editor

#302D24 · #6B594D · #857A5A · #888F63 · #97A862

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

#302D24

Ochre · DarkSlateGray · Amber Gold

HEX
#302D24
RGB
rgb(48, 45, 36)
HSL
hsl(45, 14%, 16%)
HSB
hsb(45, 25%, 19%)
CMYK
cmyk(0%, 6%, 25%, 81%)
Oklch
oklch(29.7% 0.016 91.8)

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

#6B594D

Tangerine · DimGray · Amber Brown

HEX
#6B594D
RGB
rgb(107, 89, 77)
HSL
hsl(24, 16%, 36%)
HSB
hsb(24, 28%, 42%)
CMYK
cmyk(0%, 17%, 28%, 58%)
Oklch
oklch(47.8% 0.030 55.6)

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

#857A5A

Ochre · DimGray · Honey Gold

HEX
#857A5A
RGB
rgb(133, 122, 90)
HSL
hsl(45, 19%, 44%)
HSB
hsb(45, 32%, 52%)
CMYK
cmyk(0%, 8%, 32%, 48%)
Oklch
oklch(58.1% 0.048 91.3)

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

#888F63

Grass Green · Gray · Olive Green

HEX
#888F63
RGB
rgb(136, 143, 99)
HSL
hsl(70, 18%, 47%)
HSB
hsb(70, 31%, 56%)
CMYK
cmyk(5%, 0%, 31%, 44%)
Oklch
oklch(63.3% 0.063 115.6)

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

#97A862

Grass Green · DarkSeaGreen · Olive Green

HEX
#97A862
RGB
rgb(151, 168, 98)
HSL
hsl(75, 29%, 52%)
HSB
hsb(75, 42%, 66%)
CMYK
cmyk(10%, 0%, 42%, 34%)
Oklch
oklch(70.2% 0.096 120.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302D24
23262F

Analogous

2F2623
302D24
2C2F23

Triadic

302D24
232F2C
2C232F

Split-Comp.

302D24
232C2F
26232F

Tetradic

302D24
232F26
23262F
2F232C

Contrast Matrix WCAG 2.1 Contrast

302D24
6B594D
857A5A
888F63
97A862
—
2.1
Fail
3.2
AA Large
4.0
AA Large
5.3
AA
2.1
Fail
—
1.6
Fail
1.9
Fail
2.6
Fail
3.2
AA Large
1.6
Fail
—
1.2
Fail
1.6
Fail
4.0
AA Large
1.9
Fail
1.2
Fail
—
1.3
Fail
5.3
AA
2.6
Fail
1.6
Fail
1.3
Fail
—
White BG
13.8AAA
6.6AA
4.3AA Large
3.4AA Large
2.6Fail
Black BG
1.5Fail
3.2AA Large
4.9AA
6.2AA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F26
636350
808062
8B8B6E
9E9F73

Deuteranopia

2F2F27
646651
818264
8B8A70
9D9C77

Tritanopia

302828
6A5253
846869
887678
988083

Achromatopsia

2D2D2D
5D5D5D
7A7A7A
888888
9B9B9B

Shades & Tints Shades & Tints

#302D24

Dark
Light

#6B594D

Dark
Light

#857A5A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302d24;
  --color-2: #6b594d;
  --color-3: #857a5a;
  --color-4: #888f63;
  --color-5: #97a862;
}

SCSS

$color-1: #302d24;
$color-2: #6b594d;
$color-3: #857a5a;
$color-4: #888f63;
$color-5: #97a862;

TAILWIND

colors: {
  'brand-1': '#302d24',
  'brand-2': '#6b594d',
  'brand-3': '#857a5a',
  'brand-4': '#888f63',
  'brand-5': '#97a862',
}

RGB Array

[48, 45, 36], [107, 89, 77], [133, 122, 90], [136, 143, 99], [151, 168, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #302D24, #6B594D, #857A5A, #888F63, #97A862 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. 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: #302d24; --color-2: #6b594d; --color-3: #857a5a; --color-4: #888f63; --color-5: #97a862. 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 finance, legal, luxury 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