← Back to Editor

#F81E75 · #F25091 · #E0B32B · #1BA687 · #FDECAD

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

#F81E75

Dark Violet · DeepPink · Rose Pink

HEX
#F81E75
RGB
rgb(248, 30, 117)
HSL
hsl(336, 94%, 55%)
HSB
hsb(336, 88%, 97%)
CMYK
cmyk(0%, 88%, 53%, 3%)
Oklch
oklch(63.7% 0.244 5.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#F25091

Rouge · LightCoral · Rose Pink

HEX
#F25091
RGB
rgb(242, 80, 145)
HSL
hsl(336, 86%, 63%)
HSB
hsb(336, 67%, 95%)
CMYK
cmyk(0%, 67%, 40%, 5%)
Oklch
oklch(67.0% 0.204 359.6)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#E0B32B

Ginger · GoldenRod · Sunflower

HEX
#E0B32B
RGB
rgb(224, 179, 43)
HSL
hsl(45, 74%, 52%)
HSB
hsb(45, 81%, 88%)
CMYK
cmyk(0%, 20%, 81%, 12%)
Oklch
oklch(78.6% 0.150 88.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#1BA687

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#1BA687
RGB
rgb(27, 166, 135)
HSL
hsl(167, 72%, 38%)
HSB
hsb(167, 84%, 65%)
CMYK
cmyk(84%, 0%, 19%, 35%)
Oklch
oklch(64.9% 0.120 172.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#FDECAD

Goose Yellow · Wheat · Lemon Cream

HEX
#FDECAD
RGB
rgb(253, 236, 173)
HSL
hsl(47, 95%, 84%)
HSB
hsb(47, 32%, 99%)
CMYK
cmyk(0%, 7%, 32%, 1%)
Oklch
oklch(94.2% 0.082 94.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F81E75
20F8A2

Analogous

F820E3
F81E75
F83620

Triadic

F81E75
77F820
2077F8

Split-Comp.

F81E75
20F836
20E3F8

Tetradic

F81E75
E3F820
20F8A2
3620F8

Contrast Matrix WCAG 2.1 Contrast

F81E75
F25091
E0B32B
1BA687
FDECAD
—
1.2
Fail
2.0
Fail
1.3
Fail
3.3
AA Large
1.2
Fail
—
1.7
Fail
1.1
Fail
2.8
Fail
2.0
Fail
1.7
Fail
—
1.6
Fail
1.7
Fail
1.3
Fail
1.1
Fail
1.6
Fail
—
2.6
Fail
3.3
AA Large
2.8
Fail
1.7
Fail
2.6
Fail
—
White BG
3.9AA Large
3.3AA Large
2.0Fail
3.1AA Large
1.2Fail
Black BG
5.4AA
6.3AA
10.7AAA
6.9AA
17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9860
ACAA81
CDCC4C
57588F
F6F5BC

Deuteranopia

A6B75B
B5C17E
CFD254
4F4590
F7F8C0

Tritanopia

ED4F4C
EA7572
DE666C
229496
FCC8CB

Achromatopsia

696969
888888
B1B1B1
797979
EAEAEA

Shades & Tints Shades & Tints

#F81E75

Dark
Light

#F25091

Dark
Light

#E0B32B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f81e75;
  --color-2: #f25091;
  --color-3: #e0b32b;
  --color-4: #1ba687;
  --color-5: #fdecad;
}

SCSS

$color-1: #f81e75;
$color-2: #f25091;
$color-3: #e0b32b;
$color-4: #1ba687;
$color-5: #fdecad;

TAILWIND

colors: {
  'brand-1': '#f81e75',
  'brand-2': '#f25091',
  'brand-3': '#e0b32b',
  'brand-4': '#1ba687',
  'brand-5': '#fdecad',
}

RGB Array

[248, 30, 117], [242, 80, 145], [224, 179, 43], [27, 166, 135], [253, 236, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F81E75, #F25091, #E0B32B, #1BA687, #FDECAD 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: #f81e75; --color-2: #f25091; --color-3: #e0b32b; --color-4: #1ba687; --color-5: #fdecad. 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