← Back to Editor

#314221 · #7DA446 · #F1FF95 · #FF7F47 · #AE4503

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

#314221

Celadon · DarkSlateGray · Dark Green

HEX
#314221
RGB
rgb(49, 66, 33)
HSL
hsl(91, 33%, 19%)
HSB
hsb(91, 50%, 26%)
CMYK
cmyk(26%, 0%, 50%, 74%)
Oklch
oklch(35.5% 0.058 131.1)

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

#7DA446

Grass Green · Gray · Olive Green

HEX
#7DA446
RGB
rgb(125, 164, 70)
HSL
hsl(85, 40%, 46%)
HSB
hsb(85, 57%, 64%)
CMYK
cmyk(24%, 0%, 57%, 36%)
Oklch
oklch(66.9% 0.131 128.3)

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

#F1FF95

Fresh Green · Khaki · Lemon Cream

HEX
#F1FF95
RGB
rgb(241, 255, 149)
HSL
hsl(68, 100%, 79%)
HSB
hsb(68, 42%, 100%)
CMYK
cmyk(5%, 0%, 42%, 0%)
Oklch
oklch(96.7% 0.131 115.1)

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

#FF7F47

Apricot · Coral · Warm Sun

HEX
#FF7F47
RGB
rgb(255, 127, 71)
HSL
hsl(18, 100%, 64%)
HSB
hsb(18, 72%, 100%)
CMYK
cmyk(0%, 50%, 72%, 0%)
Oklch
oklch(73.4% 0.171 42.9)

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

#AE4503

Tangerine · Sienna · Amber Brown

HEX
#AE4503
RGB
rgb(174, 69, 3)
HSL
hsl(23, 97%, 35%)
HSB
hsb(23, 98%, 68%)
CMYK
cmyk(0%, 60%, 98%, 32%)
Oklch
oklch(52.5% 0.151 44.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

314221
312040

Analogous

404020
314221
204021

Triadic

314221
203040
402030

Split-Comp.

314221
212040
402040

Tetradic

314221
204040
312040
402120

Contrast Matrix WCAG 2.1 Contrast

314221
7DA446
F1FF95
FF7F47
AE4503
—
3.8
AA Large
10.1
AAA
4.3
AA Large
1.9
Fail
3.8
AA Large
—
2.7
Fail
1.2
Fail
2.0
Fail
10.1
AAA
2.7
Fail
—
2.3
Fail
5.3
AA
4.3
AA Large
1.2
Fail
2.3
Fail
—
2.3
Fail
1.9
Fail
2.0
Fail
5.3
AA
2.3
Fail
—
White BG
10.9AAA
2.9Fail
1.1Fail
2.5Fail
5.7AA
Black BG
1.9Fail
7.3AAA
19.5AAA
8.4AAA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

383929
8E8E5D
F7F7AF
C8C655
818013

Deuteranopia

37362B
8C8962
F6F5B5
CFD958
878F17

Tritanopia

322F31
7F6F73
F2C3C7
F95F62
A92022

Achromatopsia

393939
8E8E8E
EFEFEF
9F9F9F
5D5D5D

Shades & Tints Shades & Tints

#314221

Dark
Light

#7DA446

Dark
Light

#F1FF95

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #314221;
  --color-2: #7da446;
  --color-3: #f1ff95;
  --color-4: #ff7f47;
  --color-5: #ae4503;
}

SCSS

$color-1: #314221;
$color-2: #7da446;
$color-3: #f1ff95;
$color-4: #ff7f47;
$color-5: #ae4503;

TAILWIND

colors: {
  'brand-1': '#314221',
  'brand-2': '#7da446',
  'brand-3': '#f1ff95',
  'brand-4': '#ff7f47',
  'brand-5': '#ae4503',
}

RGB Array

[49, 66, 33], [125, 164, 70], [241, 255, 149], [255, 127, 71], [174, 69, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #314221, #7DA446, #F1FF95, #FF7F47, #AE4503 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: #314221; --color-2: #7da446; --color-3: #f1ff95; --color-4: #ff7f47; --color-5: #ae4503. 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