← Back to Editor

#F3F1EC · #EB5591 · #F5F0CF · #2DADAC · #452C0A

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

#F3F1EC

Goose Yellow · Linen · Lemon Cream

HEX
#F3F1EC
RGB
rgb(243, 241, 236)
HSL
hsl(43, 23%, 94%)
HSB
hsb(43, 3%, 95%)
CMYK
cmyk(0%, 1%, 3%, 5%)
Oklch
oklch(95.8% 0.007 88.6)

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

#EB5591

Rouge · LightCoral · Rose Pink

HEX
#EB5591
RGB
rgb(235, 85, 145)
HSL
hsl(336, 79%, 63%)
HSB
hsb(336, 64%, 92%)
CMYK
cmyk(0%, 64%, 38%, 8%)
Oklch
oklch(66.5% 0.192 359.0)

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

#F5F0CF

Fresh Green · Beige · Lemon Cream

HEX
#F5F0CF
RGB
rgb(245, 240, 207)
HSL
hsl(52, 66%, 89%)
HSB
hsb(52, 16%, 96%)
CMYK
cmyk(0%, 2%, 16%, 4%)
Oklch
oklch(95.1% 0.043 100.1)

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

#2DADAC

Lake Blue · LightSeaGreen · Mint Ice

HEX
#2DADAC
RGB
rgb(45, 173, 172)
HSL
hsl(180, 59%, 43%)
HSB
hsb(180, 74%, 68%)
CMYK
cmyk(74%, 0%, 1%, 32%)
Oklch
oklch(68.2% 0.106 194.2)

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

#452C0A

Ochre · Maroon · Cinnamon

HEX
#452C0A
RGB
rgb(69, 44, 10)
HSL
hsl(35, 75%, 15%)
HSB
hsb(35, 86%, 27%)
CMYK
cmyk(0%, 36%, 86%, 73%)
Oklch
oklch(31.7% 0.060 70.3)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3F1EC
ECEEF3

Analogous

F3EEEC
F3F1EC
F2F3EC

Triadic

F3F1EC
ECF3F1
F1ECF3

Split-Comp.

F3F1EC
ECF2F3
EEECF3

Tetradic

F3F1EC
ECF3EE
ECEEF3
F3ECF2

Contrast Matrix WCAG 2.1 Contrast

F3F1EC
EB5591
F5F0CF
2DADAC
452C0A
—
3.0
Fail
1.0
Fail
2.4
Fail
11.5
AAA
3.0
Fail
—
2.9
Fail
1.2
Fail
3.9
AA Large
1.0
Fail
2.9
Fail
—
2.4
Fail
11.3
AAA
2.4
Fail
1.2
Fail
2.4
Fail
—
4.8
AA
11.5
AAA
3.9
AA Large
11.3
AAA
4.8
AA
—
White BG
1.1Fail
3.4AA Large
1.2Fail
2.7Fail
13.0AAA
Black BG
18.6AAA
6.2AA
18.2AAA
7.7AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2ED
AAA982
F3F3D7
6466AC
3A3A12

Deuteranopia

F2F2EE
B3BE7F
F3F4D9
5D53AC
3C3E14

Tritanopia

F3EEEE
E47775
F5DDDF
33ACAC
44191A

Achromatopsia

F1F1F1
898989
EEEEEE
878787
303030

Shades & Tints Shades & Tints

#F3F1EC

Dark
Light

#EB5591

Dark
Light

#F5F0CF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3f1ec;
  --color-2: #eb5591;
  --color-3: #f5f0cf;
  --color-4: #2dadac;
  --color-5: #452c0a;
}

SCSS

$color-1: #f3f1ec;
$color-2: #eb5591;
$color-3: #f5f0cf;
$color-4: #2dadac;
$color-5: #452c0a;

TAILWIND

colors: {
  'brand-1': '#f3f1ec',
  'brand-2': '#eb5591',
  'brand-3': '#f5f0cf',
  'brand-4': '#2dadac',
  'brand-5': '#452c0a',
}

RGB Array

[243, 241, 236], [235, 85, 145], [245, 240, 207], [45, 173, 172], [69, 44, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F3F1EC, #EB5591, #F5F0CF, #2DADAC, #452C0A 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: #f3f1ec; --color-2: #eb5591; --color-3: #f5f0cf; --color-4: #2dadac; --color-5: #452c0a. 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