#3C3C2F + #4C5B37 + #45803A + #38A958 + #38D1A4 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#3C3C2F

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#3C3C2F

RGB

rgb(60, 60, 47)

HSL

hsl(60, 12%, 21%)

HSB

hsb(60, 22%, 24%)

CMYK

cmyk(0%, 0%, 22%, 76%)

Oklch

oklch(35.2% 0.022 107.5)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#4C5B37

Grass Green · DarkOliveGreen · Forest Green

HEX

#4C5B37

RGB

rgb(76, 91, 55)

HSL

hsl(85, 25%, 29%)

HSB

hsb(85, 40%, 36%)

CMYK

cmyk(16%, 0%, 40%, 64%)

Oklch

oklch(44.8% 0.058 127.0)

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

#45803A

Celadon · DarkOliveGreen · Forest Green

HEX

#45803A

RGB

rgb(69, 128, 58)

HSL

hsl(111, 38%, 36%)

HSB

hsb(111, 55%, 50%)

CMYK

cmyk(46%, 0%, 55%, 50%)

Oklch

oklch(54.3% 0.120 140.6)

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

#38A958

Celadon · MediumSeaGreen · Olive Green

HEX

#38A958

RGB

rgb(56, 169, 88)

HSL

hsl(137, 50%, 44%)

HSB

hsb(137, 67%, 66%)

CMYK

cmyk(67%, 0%, 48%, 34%)

Oklch

oklch(65.2% 0.156 149.2)

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

#38D1A4

Mineral Blue · LightSeaGreen · Lake Green

HEX

#38D1A4

RGB

rgb(56, 209, 164)

HSL

hsl(162, 62%, 52%)

HSB

hsb(162, 73%, 82%)

CMYK

cmyk(73%, 0%, 22%, 18%)

Oklch

oklch(77.1% 0.141 168.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C3C2F

2F2F3C

Analogous

3C362F

3C3C2F

363C2F

Triadic

3C3C2F

2F3C3C

3C2F3C

Split-Comp.

3C3C2F

2F363C

362F3C

Tetradic

3C3C2F

2F3C36

2F2F3C

3C2F36

Contrast Matrix WCAG 2.1 Contrast

3C3C2F	4C5B37	45803A	38A958	38D1A4
—	1.5 Fail	2.3 Fail	3.7 AA Large	5.8 AA
1.5 Fail	—	1.5 Fail	2.4 Fail	3.8 AA Large
2.3 Fail	1.5 Fail	—	1.6 Fail	2.5 Fail
3.7 AA Large	2.4 Fail	1.6 Fail	—	1.5 Fail
5.8 AA	3.8 AA Large	2.5 Fail	1.5 Fail	—

White BG

11.2AAA

7.3AAA

4.8AA

3.0AA Large

1.9Fail

Black BG

1.9Fail

2.9Fail

4.4AA Large

7.0AA

10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C32

525340

5F5F4B

696A6C

7A7CAF

Deuteranopia

3C3C33

525142

5B574F

625A70

7166B2

Tritanopia

3C3535

4D4748

48585B

3E7B7E

40B7B9

Achromatopsia

3B3B3B

525252

666666

7E7E7E

9E9E9E

Shades & Tints Shades & Tints

#3C3C2F

Dark

Light

#4C5B37

Dark

Light

#45803A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c3c2f;
  --color-2: #4c5b37;
  --color-3: #45803a;
  --color-4: #38a958;
  --color-5: #38d1a4;
}

SCSS

$color-1: #3c3c2f;
$color-2: #4c5b37;
$color-3: #45803a;
$color-4: #38a958;
$color-5: #38d1a4;

TAILWIND

colors: {
  'brand-1': '#3c3c2f',
  'brand-2': '#4c5b37',
  'brand-3': '#45803a',
  'brand-4': '#38a958',
  'brand-5': '#38d1a4',
}

RGB Array

[60, 60, 47], [76, 91, 55], [69, 128, 58], [56, 169, 88], [56, 209, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #3C3C2F, #4C5B37, #45803A, #38A958, #38D1A4 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: #3c3c2f; --color-2: #4c5b37; --color-3: #45803a; --color-4: #38a958; --color-5: #38d1a4. 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