← Back to Editor

#7AA27F · #914E46 · #F34B48 · #FE6E4C · #F0D399

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 App

Color Details Color Details

#7AA27F

Celadon · Gray · Olive Green

HEX
#7AA27F
RGB
rgb(122, 162, 127)
HSL
hsl(128, 18%, 56%)
HSB
hsb(128, 25%, 64%)
CMYK
cmyk(25%, 0%, 22%, 36%)
Oklch
oklch(67.3% 0.067 148.1)

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

#914E46

Crimson · Sienna · Passion Red

HEX
#914E46
RGB
rgb(145, 78, 70)
HSL
hsl(6, 35%, 42%)
HSB
hsb(6, 52%, 57%)
CMYK
cmyk(0%, 46%, 52%, 43%)
Oklch
oklch(50.2% 0.092 27.9)

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

#F34B48

Peach Pink · Tomato · Coral Red

HEX
#F34B48
RGB
rgb(243, 75, 72)
HSL
hsl(1, 88%, 62%)
HSB
hsb(1, 70%, 95%)
CMYK
cmyk(0%, 69%, 70%, 5%)
Oklch
oklch(65.1% 0.205 25.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FE6E4C

Peach Pink · Tomato · Coral Red

HEX
#FE6E4C
RGB
rgb(254, 110, 76)
HSL
hsl(11, 99%, 65%)
HSB
hsb(11, 70%, 100%)
CMYK
cmyk(0%, 57%, 70%, 0%)
Oklch
oklch(70.9% 0.183 34.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F0D399

Goose Yellow · Khaki · Lemon Cream

HEX
#F0D399
RGB
rgb(240, 211, 153)
HSL
hsl(40, 74%, 77%)
HSB
hsb(40, 36%, 94%)
CMYK
cmyk(0%, 12%, 36%, 6%)
Oklch
oklch(87.8% 0.081 84.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7AA27F
A37B9E

Analogous

89A37B
7AA27F
7BA394

Triadic

7AA27F
807BA3
A3807B

Split-Comp.

7AA27F
947BA3
A37B89

Tetradic

7AA27F
7B89A3
A37B9E
A3947B

Contrast Matrix WCAG 2.1 Contrast

7AA27F
914E46
F34B48
FE6E4C
F0D399
—
2.2
Fail
1.2
Fail
1.0
Fail
2.0
Fail
2.2
Fail
—
1.7
Fail
2.2
Fail
4.3
AA Large
1.2
Fail
1.7
Fail
—
1.3
Fail
2.5
Fail
1.0
Fail
2.2
Fail
1.3
Fail
—
1.9
Fail
2.0
Fail
4.3
AA Large
2.5
Fail
1.9
Fail
—
White BG
2.9Fail
6.2AA
3.6AA Large
2.8Fail
1.5Fail
Black BG
7.3AAA
3.4AA Large
5.9AA
7.5AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8C87
747348
AAA949
C0BE54
E3E3A7

Deuteranopia

89868A
787D48
B4C149
C8D356
E5E7AA

Tritanopia

7C8E90
8E494A
EB4949
F75B5C
EFB2B5

Achromatopsia

929292
616161
7D7D7D
959595
D5D5D5

Shades & Tints Shades & Tints

#7AA27F

Dark
Light

#914E46

Dark
Light

#F34B48

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7aa27f;
  --color-2: #914e46;
  --color-3: #f34b48;
  --color-4: #fe6e4c;
  --color-5: #f0d399;
}

SCSS

$color-1: #7aa27f;
$color-2: #914e46;
$color-3: #f34b48;
$color-4: #fe6e4c;
$color-5: #f0d399;

TAILWIND

colors: {
  'brand-1': '#7aa27f',
  'brand-2': '#914e46',
  'brand-3': '#f34b48',
  'brand-4': '#fe6e4c',
  'brand-5': '#f0d399',
}

RGB Array

[122, 162, 127], [145, 78, 70], [243, 75, 72], [254, 110, 76], [240, 211, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #7AA27F, #914E46, #F34B48, #FE6E4C, #F0D399 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: #7aa27f; --color-2: #914e46; --color-3: #f34b48; --color-4: #fe6e4c; --color-5: #f0d399. 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