← Back to Editor

#66513A · #F4D6B4 · #FFF5AF · #FFFDEC · #E8F9D9

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

#66513A

Ochre · DarkOliveGreen · Amber Brown

HEX
#66513A
RGB
rgb(102, 81, 58)
HSL
hsl(31, 28%, 31%)
HSB
hsb(31, 43%, 40%)
CMYK
cmyk(0%, 21%, 43%, 60%)
Oklch
oklch(45.0% 0.045 68.8)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#F4D6B4

Goose Yellow · Wheat · Peach Orange

HEX
#F4D6B4
RGB
rgb(244, 214, 180)
HSL
hsl(32, 74%, 83%)
HSB
hsb(32, 26%, 96%)
CMYK
cmyk(0%, 12%, 26%, 4%)
Oklch
oklch(89.3% 0.056 70.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFF5AF

Fresh Green · Wheat · Lemon Cream

HEX
#FFF5AF
RGB
rgb(255, 245, 175)
HSL
hsl(53, 100%, 84%)
HSB
hsb(53, 31%, 100%)
CMYK
cmyk(0%, 4%, 31%, 0%)
Oklch
oklch(96.2% 0.089 101.0)

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

#FFFDEC

Fresh Green · SeaShell · Lemon Cream

HEX
#FFFDEC
RGB
rgb(255, 253, 236)
HSL
hsl(54, 100%, 96%)
HSB
hsb(54, 7%, 100%)
CMYK
cmyk(0%, 1%, 7%, 0%)
Oklch
oklch(99.1% 0.022 101.3)

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

#E8F9D9

Emerald · Beige · Mint Green

HEX
#E8F9D9
RGB
rgb(232, 249, 217)
HSL
hsl(92, 73%, 91%)
HSB
hsb(92, 13%, 98%)
CMYK
cmyk(7%, 0%, 13%, 2%)
Oklch
oklch(96.1% 0.046 130.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

66513A
394E65

Analogous

653A39
66513A
646539

Triadic

66513A
396550
503965

Split-Comp.

66513A
396465
3A3965

Tetradic

66513A
39653A
394E65
653964

Contrast Matrix WCAG 2.1 Contrast

66513A
F4D6B4
FFF5AF
FFFDEC
E8F9D9
—
5.4
AA
6.8
AA
7.3
AAA
6.8
AA
5.4
AA
—
1.3
Fail
1.4
Fail
1.3
Fail
6.8
AA
1.3
Fail
—
1.1
Fail
1.0
Fail
7.3
AAA
1.4
Fail
1.1
Fail
—
1.1
Fail
6.8
AA
1.3
Fail
1.0
Fail
1.1
Fail
—
White BG
7.5AAA
1.4Fail
1.1Fail
1.0Fail
1.1Fail
Black BG
2.8Fail
15.1AAA
18.9AAA
20.5AAA
19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5D5D40
E7E7BC
FBFBC0
FEFEF0
EFF0E1

Deuteranopia

5E6041
E9EBBE
FBFCC4
FEFEF1
EEEDE3

Tritanopia

654445
F2C3C4
FFCDD0
FFF3F4
E9E7E8

Achromatopsia

555555
DBDBDB
F0F0F0
FCFCFC
F0F0F0

Shades & Tints Shades & Tints

#66513A

Dark
Light

#F4D6B4

Dark
Light

#FFF5AF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #66513a;
  --color-2: #f4d6b4;
  --color-3: #fff5af;
  --color-4: #fffdec;
  --color-5: #e8f9d9;
}

SCSS

$color-1: #66513a;
$color-2: #f4d6b4;
$color-3: #fff5af;
$color-4: #fffdec;
$color-5: #e8f9d9;

TAILWIND

colors: {
  'brand-1': '#66513a',
  'brand-2': '#f4d6b4',
  'brand-3': '#fff5af',
  'brand-4': '#fffdec',
  'brand-5': '#e8f9d9',
}

RGB Array

[102, 81, 58], [244, 214, 180], [255, 245, 175], [255, 253, 236], [232, 249, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #66513A, #F4D6B4, #FFF5AF, #FFFDEC, #E8F9D9 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #66513a; --color-2: #f4d6b4; --color-3: #fff5af; --color-4: #fffdec; --color-5: #e8f9d9. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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