← Back to Editor

#4D2A10 · #A76153 · #667626 · #078E3D

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile App

Color Details Color Details

#4D2A10

Tangerine · Maroon · Cinnamon

HEX
#4D2A10
RGB
rgb(77, 42, 16)
HSL
hsl(26, 66%, 18%)
HSB
hsb(26, 79%, 30%)
CMYK
cmyk(0%, 45%, 79%, 70%)
Oklch
oklch(32.5% 0.064 54.5)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#A76153

Crimson · Sienna · Passion Red

HEX
#A76153
RGB
rgb(167, 97, 83)
HSL
hsl(10, 34%, 49%)
HSB
hsb(10, 50%, 65%)
CMYK
cmyk(0%, 42%, 50%, 35%)
Oklch
oklch(56.8% 0.094 32.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#667626

Grass Green · DarkOliveGreen · Forest Green

HEX
#667626
RGB
rgb(102, 118, 38)
HSL
hsl(72, 51%, 31%)
HSB
hsb(72, 68%, 46%)
CMYK
cmyk(14%, 0%, 68%, 54%)
Oklch
oklch(53.6% 0.106 119.8)

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

#078E3D

Pine Green · ForestGreen · Forest Green

HEX
#078E3D
RGB
rgb(7, 142, 61)
HSL
hsl(144, 91%, 29%)
HSB
hsb(144, 95%, 56%)
CMYK
cmyk(95%, 0%, 57%, 44%)
Oklch
oklch(56.5% 0.157 149.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D2A10
10324C

Analogous

4C1014
4D2A10
4C4810

Triadic

4D2A10
104C2A
2A104C

Split-Comp.

4D2A10
104C48
10144C

Tetradic

4D2A10
144C10
10324C
48104C

Contrast Matrix WCAG 2.1 Contrast

4D2A10
A76153
667626
078E3D
—
2.7
Fail
2.5
Fail
3.0
Fail
2.7
Fail
—
1.1
Fail
1.1
Fail
2.5
Fail
1.1
Fail
—
1.2
Fail
3.0
Fail
1.1
Fail
1.2
Fail
—
White BG
12.7AAA
4.7AA
5.0AA
4.2AA Large
Black BG
1.7Fail
4.5AA Large
4.2AA Large
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E16
898856
6D6D39
414351

Deuteranopia

404318
8D9257
6C6B3E
3A3055

Tritanopia

4B1B1C
A4595A
67494C
0E6063

Achromatopsia

323232
747474
686868
5C5C5C

Shades & Tints Shades & Tints

#4D2A10

Dark
Light

#A76153

Dark
Light

#667626

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d2a10;
  --color-2: #a76153;
  --color-3: #667626;
  --color-4: #078e3d;
}

SCSS

$color-1: #4d2a10;
$color-2: #a76153;
$color-3: #667626;
$color-4: #078e3d;

TAILWIND

colors: {
  'brand-1': '#4d2a10',
  'brand-2': '#a76153',
  'brand-3': '#667626',
  'brand-4': '#078e3d',
}

RGB Array

[77, 42, 16], [167, 97, 83], [102, 118, 38], [7, 142, 61]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This nature-style palette of #4D2A10, #A76153, #667626, #078E3D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4d2a10; --color-2: #a76153; --color-3: #667626; --color-4: #078e3d. 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 4-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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