← Back to Editor

#0A3933 · #2C5847 · #3F765F · #B0A66B · #A2854B

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#0A3933

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0A3933
RGB
rgb(10, 57, 51)
HSL
hsl(172, 70%, 13%)
HSB
hsb(172, 82%, 22%)
CMYK
cmyk(82%, 0%, 11%, 78%)
Oklch
oklch(31.2% 0.050 182.6)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#2C5847

Mineral Blue · DarkSlateGray · Forest Green

HEX
#2C5847
RGB
rgb(44, 88, 71)
HSL
hsl(157, 33%, 26%)
HSB
hsb(157, 50%, 35%)
CMYK
cmyk(50%, 0%, 19%, 65%)
Oklch
oklch(42.3% 0.057 166.5)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#3F765F

Mineral Blue · SeaGreen · Forest Green

HEX
#3F765F
RGB
rgb(63, 118, 95)
HSL
hsl(155, 30%, 35%)
HSB
hsb(155, 47%, 46%)
CMYK
cmyk(47%, 0%, 19%, 54%)
Oklch
oklch(52.1% 0.070 164.9)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#B0A66B

Autumn Sage · Tan · Sunflower

HEX
#B0A66B
RGB
rgb(176, 166, 107)
HSL
hsl(51, 30%, 55%)
HSB
hsb(51, 39%, 69%)
CMYK
cmyk(0%, 6%, 39%, 31%)
Oklch
oklch(72.0% 0.079 99.8)

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

#A2854B

Ochre · Sienna · Honey Gold

HEX
#A2854B
RGB
rgb(162, 133, 75)
HSL
hsl(40, 37%, 46%)
HSB
hsb(40, 54%, 64%)
CMYK
cmyk(0%, 18%, 54%, 36%)
Oklch
oklch(63.1% 0.084 83.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0A3933
380A10

Analogous

0A381B
0A3933
0A2738

Triadic

0A3933
320A38
38320A

Split-Comp.

0A3933
380A27
381B0A

Tetradic

0A3933
1B0A38
380A10
27380A

Contrast Matrix WCAG 2.1 Contrast

0A3933
2C5847
3F765F
B0A66B
A2854B
—
1.6
Fail
2.4
Fail
5.2
AA
3.6
AA Large
1.6
Fail
—
1.5
Fail
3.3
AA Large
2.3
Fail
2.4
Fail
1.5
Fail
—
2.1
Fail
1.5
Fail
5.2
AA
3.3
AA Large
2.1
Fail
—
1.4
Fail
3.6
AA Large
2.3
Fail
1.5
Fail
1.4
Fail
—
White BG
12.8AAA
8.1AAA
5.3AA
2.5Fail
3.5AA Large
Black BG
1.6Fail
2.6Fail
4.0AA Large
8.5AAA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1E1F34
3F3F4B
575765
ACAC79
959559

Deuteranopia

1C1835
3D394C
545066
ACAD7D
97995C

Tritanopia

0C3636
2E4E4F
42696A
B08587
A16467

Achromatopsia

2A2A2A
494949
636363
A2A2A2
878787

Shades & Tints Shades & Tints

#0A3933

Dark
Light

#2C5847

Dark
Light

#3F765F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0a3933;
  --color-2: #2c5847;
  --color-3: #3f765f;
  --color-4: #b0a66b;
  --color-5: #a2854b;
}

SCSS

$color-1: #0a3933;
$color-2: #2c5847;
$color-3: #3f765f;
$color-4: #b0a66b;
$color-5: #a2854b;

TAILWIND

colors: {
  'brand-1': '#0a3933',
  'brand-2': '#2c5847',
  'brand-3': '#3f765f',
  'brand-4': '#b0a66b',
  'brand-5': '#a2854b',
}

RGB Array

[10, 57, 51], [44, 88, 71], [63, 118, 95], [176, 166, 107], [162, 133, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #0A3933, #2C5847, #3F765F, #B0A66B, #A2854B 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: #0a3933; --color-2: #2c5847; --color-3: #3f765f; --color-4: #b0a66b; --color-5: #a2854b. 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