← Back to Editor

#5E5E36 · #B5B554 · #F5F570 · #FFA560 · #F75E5D

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

#5E5E36

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#5E5E36
RGB
rgb(94, 94, 54)
HSL
hsl(60, 27%, 29%)
HSB
hsb(60, 43%, 37%)
CMYK
cmyk(0%, 0%, 43%, 63%)
Oklch
oklch(47.2% 0.059 108.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B5B554

Autumn Sage · Tan · Sunflower

HEX
#B5B554
RGB
rgb(181, 181, 84)
HSL
hsl(60, 40%, 52%)
HSB
hsb(60, 54%, 71%)
CMYK
cmyk(0%, 0%, 54%, 29%)
Oklch
oklch(75.3% 0.120 109.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#F5F570

Fresh Green · Khaki · Sunflower

HEX
#F5F570
RGB
rgb(245, 245, 112)
HSL
hsl(60, 87%, 70%)
HSB
hsb(60, 54%, 96%)
CMYK
cmyk(0%, 0%, 54%, 4%)
Oklch
oklch(94.5% 0.155 109.0)

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

#FFA560

Apricot · SandyBrown · Warm Sun

HEX
#FFA560
RGB
rgb(255, 165, 96)
HSL
hsl(26, 100%, 69%)
HSB
hsb(26, 62%, 100%)
CMYK
cmyk(0%, 35%, 62%, 0%)
Oklch
oklch(79.8% 0.136 56.7)

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

#F75E5D

Peach Pink · Tomato · Coral Red

HEX
#F75E5D
RGB
rgb(247, 94, 93)
HSL
hsl(0, 91%, 67%)
HSB
hsb(0, 62%, 97%)
CMYK
cmyk(0%, 62%, 62%, 3%)
Oklch
oklch(68.1% 0.188 23.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E5E36
36365E

Analogous

5E4A36
5E5E36
4A5E36

Triadic

5E5E36
365E5E
5E365E

Split-Comp.

5E5E36
364A5E
4A365E

Tetradic

5E5E36
365E4A
36365E
5E364A

Contrast Matrix WCAG 2.1 Contrast

5E5E36
B5B554
F5F570
FFA560
F75E5D
—
3.1
AA Large
5.8
AA
3.5
AA Large
2.1
Fail
3.1
AA Large
—
1.9
Fail
1.1
Fail
1.4
Fail
5.8
AA
1.9
Fail
—
1.7
Fail
2.7
Fail
3.5
AA Large
1.1
Fail
1.7
Fail
—
1.6
Fail
2.1
Fail
1.4
Fail
2.7
Fail
1.6
Fail
—
White BG
6.7AA
2.2Fail
1.2Fail
1.9Fail
3.1AA Large
Black BG
3.1AA Large
9.7AAA
18.2AAA
10.8AAA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E40
B5B56B
F5F590
D8D771
B5B35D

Deuteranopia

5E5E42
B5B571
F5F598
DDE475
BEC95D

Tritanopia

5E4749
B57E82
F5AAAF
FB7E81
EF5D5D

Achromatopsia

595959
AAAAAA
E6E6E6
B8B8B8
8C8C8C

Shades & Tints Shades & Tints

#5E5E36

Dark
Light

#B5B554

Dark
Light

#F5F570

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e5e36;
  --color-2: #b5b554;
  --color-3: #f5f570;
  --color-4: #ffa560;
  --color-5: #f75e5d;
}

SCSS

$color-1: #5e5e36;
$color-2: #b5b554;
$color-3: #f5f570;
$color-4: #ffa560;
$color-5: #f75e5d;

TAILWIND

colors: {
  'brand-1': '#5e5e36',
  'brand-2': '#b5b554',
  'brand-3': '#f5f570',
  'brand-4': '#ffa560',
  'brand-5': '#f75e5d',
}

RGB Array

[94, 94, 54], [181, 181, 84], [245, 245, 112], [255, 165, 96], [247, 94, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #5E5E36, #B5B554, #F5F570, #FFA560, #F75E5D 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: #5e5e36; --color-2: #b5b554; --color-3: #f5f570; --color-4: #ffa560; --color-5: #f75e5d. 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