← Back to Editor

#F8E562 · #816058 · #D2C473 · #F6DDAA · #C6DA57

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

#F8E562

Fresh Green · Khaki · Sunflower

HEX
#F8E562
RGB
rgb(248, 229, 98)
HSL
hsl(52, 91%, 68%)
HSB
hsb(52, 60%, 97%)
CMYK
cmyk(0%, 8%, 60%, 3%)
Oklch
oklch(91.3% 0.151 101.1)

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

#816058

Crimson · DimGray · Passion Red

HEX
#816058
RGB
rgb(129, 96, 88)
HSL
hsl(12, 19%, 43%)
HSB
hsb(12, 32%, 51%)
CMYK
cmyk(0%, 26%, 32%, 49%)
Oklch
oklch(52.1% 0.045 34.0)

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

#D2C473

Fresh Green · BurlyWood · Sunflower

HEX
#D2C473
RGB
rgb(210, 196, 115)
HSL
hsl(51, 51%, 64%)
HSB
hsb(51, 45%, 82%)
CMYK
cmyk(0%, 7%, 45%, 18%)
Oklch
oklch(81.4% 0.103 99.7)

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

#F6DDAA

Goose Yellow · Wheat · Lemon Cream

HEX
#F6DDAA
RGB
rgb(246, 221, 170)
HSL
hsl(40, 81%, 82%)
HSB
hsb(40, 31%, 96%)
CMYK
cmyk(0%, 10%, 31%, 4%)
Oklch
oklch(90.6% 0.071 84.8)

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

#C6DA57

Autumn Sage · GreenYellow · Sunflower

HEX
#C6DA57
RGB
rgb(198, 218, 87)
HSL
hsl(69, 64%, 60%)
HSB
hsb(69, 60%, 85%)
CMYK
cmyk(9%, 0%, 60%, 15%)
Oklch
oklch(84.8% 0.156 117.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8E562
6377F8

Analogous

F89A63
F8E562
C1F863

Triadic

F8E562
63F8E4
E463F8

Split-Comp.

F8E562
63C1F8
9A63F8

Tetradic

F8E562
63F89A
6377F8
F863C1

Contrast Matrix WCAG 2.1 Contrast

F8E562
816058
D2C473
F6DDAA
C6DA57
—
4.4
AA Large
1.4
Fail
1.0
Fail
1.2
Fail
4.4
AA Large
—
3.2
AA Large
4.2
AA Large
3.6
AA Large
1.4
Fail
3.2
AA Large
—
1.3
Fail
1.1
Fail
1.0
Fail
4.2
AA Large
1.3
Fail
—
1.2
Fail
1.2
Fail
3.6
AA Large
1.1
Fail
1.2
Fail
—
White BG
1.3Fail
5.6AA
1.8Fail
1.3Fail
1.5Fail
Black BG
16.4AAA
3.7AA Large
11.9AAA
15.8AAA
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F082
73725A
CCCC87
EBEBB6
CFCF77

Deuteranopia

F1F289
75775A
CDCE8B
EDEFB9
CECC7E

Tritanopia

F79BA0
7F5B5C
D19699
F5C0C2
C79095

Achromatopsia

DCDCDC
696969
BFBFBF
DFDFDF
C5C5C5

Shades & Tints Shades & Tints

#F8E562

Dark
Light

#816058

Dark
Light

#D2C473

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8e562;
  --color-2: #816058;
  --color-3: #d2c473;
  --color-4: #f6ddaa;
  --color-5: #c6da57;
}

SCSS

$color-1: #f8e562;
$color-2: #816058;
$color-3: #d2c473;
$color-4: #f6ddaa;
$color-5: #c6da57;

TAILWIND

colors: {
  'brand-1': '#f8e562',
  'brand-2': '#816058',
  'brand-3': '#d2c473',
  'brand-4': '#f6ddaa',
  'brand-5': '#c6da57',
}

RGB Array

[248, 229, 98], [129, 96, 88], [210, 196, 115], [246, 221, 170], [198, 218, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F8E562, #816058, #D2C473, #F6DDAA, #C6DA57 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: #f8e562; --color-2: #816058; --color-3: #d2c473; --color-4: #f6ddaa; --color-5: #c6da57. 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