← Back to Editor

#F9301C · #E91A2C · #6B3A35 · #4B8634 · #37A77F

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile App

Color Details Color Details

#F9301C

Vermilion · OrangeRed · Passion Red

HEX
#F9301C
RGB
rgb(249, 48, 28)
HSL
hsl(5, 95%, 54%)
HSB
hsb(5, 89%, 98%)
CMYK
cmyk(0%, 81%, 89%, 2%)
Oklch
oklch(63.5% 0.236 30.2)

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

#E91A2C

Vermilion · Crimson · Passion Red

HEX
#E91A2C
RGB
rgb(233, 26, 44)
HSL
hsl(355, 82%, 51%)
HSB
hsb(355, 89%, 91%)
CMYK
cmyk(0%, 89%, 81%, 9%)
Oklch
oklch(59.6% 0.231 25.2)

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

#6B3A35

Crimson · DarkOliveGreen · Wine Red

HEX
#6B3A35
RGB
rgb(107, 58, 53)
HSL
hsl(6, 34%, 31%)
HSB
hsb(6, 50%, 42%)
CMYK
cmyk(0%, 46%, 50%, 58%)
Oklch
oklch(40.8% 0.070 26.7)

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

#4B8634

Celadon · DarkOliveGreen · Forest Green

HEX
#4B8634
RGB
rgb(75, 134, 52)
HSL
hsl(103, 44%, 36%)
HSB
hsb(103, 61%, 53%)
CMYK
cmyk(44%, 0%, 61%, 47%)
Oklch
oklch(56.1% 0.131 137.9)

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

#37A77F

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#37A77F
RGB
rgb(55, 167, 127)
HSL
hsl(159, 50%, 44%)
HSB
hsb(159, 67%, 65%)
CMYK
cmyk(67%, 0%, 24%, 35%)
Oklch
oklch(65.5% 0.118 165.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9301C
1AE7F9

Analogous

F91A77
F9301C
F99C1A

Triadic

F9301C
1AF92D
2D1AF9

Split-Comp.

F9301C
1AF99C
1A77F9

Tetradic

F9301C
77F91A
1AE7F9
9C1AF9

Contrast Matrix WCAG 2.1 Contrast

F9301C
E91A2C
6B3A35
4B8634
37A77F
—
1.2
Fail
2.4
Fail
1.1
Fail
1.3
Fail
1.2
Fail
—
2.0
Fail
1.0
Fail
1.5
Fail
2.4
Fail
2.0
Fail
—
2.1
Fail
3.1
AA Large
1.1
Fail
1.0
Fail
2.1
Fail
—
1.5
Fail
1.3
Fail
1.5
Fail
3.1
AA Large
1.5
Fail
—
White BG
3.8AA Large
4.5AA
9.2AAA
4.4AA Large
3.0AA Large
Black BG
5.5AA
4.6AA
2.3Fail
4.8AA
7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A021
8F8E28
565536
656548
676989

Deuteranopia

AEBD22
9BAB27
595C36
615D4D
61598B

Tritanopia

EF2526
DF2423
693737
4E585B
3D9092

Achromatopsia

6A6A6A
5A5A5A
484848
6B6B6B
818181

Shades & Tints Shades & Tints

#F9301C

Dark
Light

#E91A2C

Dark
Light

#6B3A35

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9301c;
  --color-2: #e91a2c;
  --color-3: #6b3a35;
  --color-4: #4b8634;
  --color-5: #37a77f;
}

SCSS

$color-1: #f9301c;
$color-2: #e91a2c;
$color-3: #6b3a35;
$color-4: #4b8634;
$color-5: #37a77f;

TAILWIND

colors: {
  'brand-1': '#f9301c',
  'brand-2': '#e91a2c',
  'brand-3': '#6b3a35',
  'brand-4': '#4b8634',
  'brand-5': '#37a77f',
}

RGB Array

[249, 48, 28], [233, 26, 44], [107, 58, 53], [75, 134, 52], [55, 167, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F9301C, #E91A2C, #6B3A35, #4B8634, #37A77F is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f9301c; --color-2: #e91a2c; --color-3: #6b3a35; --color-4: #4b8634; --color-5: #37a77f. 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. 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 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