← Back to Editor

#EBE289 · #F5D850 · #F49F38 · #D77840 · #166557

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#EBE289

Fresh Green · Khaki · Sunflower

HEX
#EBE289
RGB
rgb(235, 226, 137)
HSL
hsl(54, 71%, 73%)
HSB
hsb(54, 42%, 92%)
CMYK
cmyk(0%, 4%, 42%, 8%)
Oklch
oklch(90.1% 0.111 103.3)

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

#F5D850

Ginger · SandyBrown · Sunflower

HEX
#F5D850
RGB
rgb(245, 216, 80)
HSL
hsl(49, 89%, 64%)
HSB
hsb(49, 67%, 96%)
CMYK
cmyk(0%, 12%, 67%, 4%)
Oklch
oklch(88.3% 0.154 97.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F49F38

Ginger · GoldenRod · Warm Sun

HEX
#F49F38
RGB
rgb(244, 159, 56)
HSL
hsl(33, 90%, 59%)
HSB
hsb(33, 77%, 96%)
CMYK
cmyk(0%, 35%, 77%, 4%)
Oklch
oklch(77.1% 0.151 66.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#D77840

Tangerine · Chocolate · Warm Sun

HEX
#D77840
RGB
rgb(215, 120, 64)
HSL
hsl(22, 65%, 55%)
HSB
hsb(22, 70%, 84%)
CMYK
cmyk(0%, 44%, 70%, 16%)
Oklch
oklch(66.8% 0.138 49.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#166557

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#166557
RGB
rgb(22, 101, 87)
HSL
hsl(169, 64%, 24%)
HSB
hsb(169, 78%, 40%)
CMYK
cmyk(78%, 0%, 14%, 60%)
Oklch
oklch(45.7% 0.077 177.8)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EBE289
8993EB

Analogous

EBB089
EBE289
C4EB89

Triadic

EBE289
89EBE1
E189EB

Split-Comp.

EBE289
89C4EB
B089EB

Tetradic

EBE289
89EBB0
8993EB
EB89C4

Contrast Matrix WCAG 2.1 Contrast

EBE289
F5D850
F49F38
D77840
166557
—
1.1
Fail
1.6
Fail
2.4
Fail
5.2
AA
1.1
Fail
—
1.5
Fail
2.2
Fail
4.9
AA
1.6
Fail
1.5
Fail
—
1.5
Fail
3.3
AA Large
2.4
Fail
2.2
Fail
1.5
Fail
—
2.2
Fail
5.2
AA
4.9
AA
3.3
AA Large
2.2
Fail
—
White BG
1.3Fail
1.4Fail
2.1Fail
3.2AA Large
6.9AA
Black BG
15.8AAA
14.8AAA
9.9AAA
6.7AA
3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E79F
E8E871
CFCE51
AEAD4E
38395A

Deuteranopia

E8E8A4
EAEC79
D4DA57
B3BB51
342E5B

Tritanopia

EBB0B3
F48B91
F06569
D2585B
1A5D5E

Achromatopsia

DBDBDB
D1D1D1
ADADAD
8E8E8E
4C4C4C

Shades & Tints Shades & Tints

#EBE289

Dark
Light

#F5D850

Dark
Light

#F49F38

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ebe289;
  --color-2: #f5d850;
  --color-3: #f49f38;
  --color-4: #d77840;
  --color-5: #166557;
}

SCSS

$color-1: #ebe289;
$color-2: #f5d850;
$color-3: #f49f38;
$color-4: #d77840;
$color-5: #166557;

TAILWIND

colors: {
  'brand-1': '#ebe289',
  'brand-2': '#f5d850',
  'brand-3': '#f49f38',
  'brand-4': '#d77840',
  'brand-5': '#166557',
}

RGB Array

[235, 226, 137], [245, 216, 80], [244, 159, 56], [215, 120, 64], [22, 101, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #EBE289, #F5D850, #F49F38, #D77840, #166557 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: #ebe289; --color-2: #f5d850; --color-3: #f49f38; --color-4: #d77840; --color-5: #166557. 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