← Back to Editor

#E74749 · #FAB481 · #F7F4D1 · #A1DA33 · #50BA02

nature

A 5-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 AppData Visualization

Color Details Color Details

#E74749

Vermilion · Tomato · Passion Red

HEX
#E74749
RGB
rgb(231, 71, 73)
HSL
hsl(359, 77%, 59%)
HSB
hsb(359, 69%, 91%)
CMYK
cmyk(0%, 69%, 68%, 9%)
Oklch
oklch(62.7% 0.197 24.2)

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

#FAB481

Apricot · LightSalmon · Warm Sun

HEX
#FAB481
RGB
rgb(250, 180, 129)
HSL
hsl(25, 92%, 74%)
HSB
hsb(25, 48%, 98%)
CMYK
cmyk(0%, 28%, 48%, 2%)
Oklch
oklch(82.4% 0.105 56.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F7F4D1

Fresh Green · Beige · Lemon Cream

HEX
#F7F4D1
RGB
rgb(247, 244, 209)
HSL
hsl(55, 70%, 89%)
HSB
hsb(55, 15%, 97%)
CMYK
cmyk(0%, 1%, 15%, 3%)
Oklch
oklch(96.1% 0.046 103.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#A1DA33

Grass Green · GreenYellow · Olive Green

HEX
#A1DA33
RGB
rgb(161, 218, 51)
HSL
hsl(80, 69%, 53%)
HSB
hsb(80, 77%, 85%)
CMYK
cmyk(26%, 0%, 77%, 15%)
Oklch
oklch(82.0% 0.195 127.3)

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

#50BA02

Pine Green · LimeGreen · Forest Green

HEX
#50BA02
RGB
rgb(80, 186, 2)
HSL
hsl(95, 98%, 37%)
HSB
hsb(95, 99%, 73%)
CMYK
cmyk(57%, 0%, 99%, 27%)
Oklch
oklch(69.8% 0.213 137.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E74749
46E7E4

Analogous

E74699
E74749
E79446

Triadic

E74749
49E746
4649E7

Split-Comp.

E74749
46E794
4699E7

Tetradic

E74749
99E746
46E7E4
9446E7

Contrast Matrix WCAG 2.1 Contrast

E74749
FAB481
F7F4D1
A1DA33
50BA02
—
2.2
Fail
3.5
AA Large
2.3
Fail
1.6
Fail
2.2
Fail
—
1.6
Fail
1.1
Fail
1.4
Fail
3.5
AA Large
1.6
Fail
—
1.5
Fail
2.2
Fail
2.3
Fail
1.1
Fail
1.5
Fail
—
1.5
Fail
1.6
Fail
1.4
Fail
2.2
Fail
1.5
Fail
—
White BG
3.9AA Large
1.8Fail
1.1Fail
1.7Fail
2.5Fail
Black BG
5.4AA
11.9AAA
18.8AAA
12.6AAA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A049
DCDB8D
F6F6D9
BABA5B
7E7F2F

Deuteranopia

ABB748
E0E590
F6F6DC
B6B265
787039

Tritanopia

DF4848
F79799
F7E0E2
A47B82
555259

Achromatopsia

777777
C3C3C3
F1F1F1
B6B6B6
858585

Shades & Tints Shades & Tints

#E74749

Dark
Light

#FAB481

Dark
Light

#F7F4D1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e74749;
  --color-2: #fab481;
  --color-3: #f7f4d1;
  --color-4: #a1da33;
  --color-5: #50ba02;
}

SCSS

$color-1: #e74749;
$color-2: #fab481;
$color-3: #f7f4d1;
$color-4: #a1da33;
$color-5: #50ba02;

TAILWIND

colors: {
  'brand-1': '#e74749',
  'brand-2': '#fab481',
  'brand-3': '#f7f4d1',
  'brand-4': '#a1da33',
  'brand-5': '#50ba02',
}

RGB Array

[231, 71, 73], [250, 180, 129], [247, 244, 209], [161, 218, 51], [80, 186, 2]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #E74749, #FAB481, #F7F4D1, #A1DA33, #50BA02 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #e74749; --color-2: #fab481; --color-3: #f7f4d1; --color-4: #a1da33; --color-5: #50ba02. 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. 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 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