← Back to Editor

#F7F5CD · #F0ECAC · #DBD786 · #AAC981 · #B6DB86

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#F7F5CD

Fresh Green · Beige · Lemon Cream

HEX
#F7F5CD
RGB
rgb(247, 245, 205)
HSL
hsl(57, 72%, 89%)
HSB
hsb(57, 17%, 97%)
CMYK
cmyk(0%, 1%, 17%, 3%)
Oklch
oklch(96.2% 0.052 105.0)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#F0ECAC

Fresh Green · Wheat · Lemon Cream

HEX
#F0ECAC
RGB
rgb(240, 236, 172)
HSL
hsl(56, 69%, 81%)
HSB
hsb(56, 28%, 94%)
CMYK
cmyk(0%, 2%, 28%, 6%)
Oklch
oklch(93.1% 0.082 104.9)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#DBD786

Fresh Green · Khaki · Sunflower

HEX
#DBD786
RGB
rgb(219, 215, 134)
HSL
hsl(57, 54%, 69%)
HSB
hsb(57, 39%, 86%)
CMYK
cmyk(0%, 2%, 39%, 14%)
Oklch
oklch(86.4% 0.103 105.9)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#AAC981

Willow Green · DarkSeaGreen · Apple Green

HEX
#AAC981
RGB
rgb(170, 201, 129)
HSL
hsl(86, 40%, 65%)
HSB
hsb(86, 36%, 79%)
CMYK
cmyk(15%, 0%, 36%, 21%)
Oklch
oklch(79.6% 0.102 127.5)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

#B6DB86

Willow Green · LightGreen · Apple Green

HEX
#B6DB86
RGB
rgb(182, 219, 134)
HSL
hsl(86, 54%, 69%)
HSB
hsb(86, 39%, 86%)
CMYK
cmyk(17%, 0%, 39%, 14%)
Oklch
oklch(84.5% 0.118 127.9)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7F5CD
CFD1F7

Analogous

F7E1CF
F7F5CD
E5F7CF

Triadic

F7F5CD
CFF7F5
F5CFF7

Split-Comp.

F7F5CD
CFE5F7
E1CFF7

Tetradic

F7F5CD
CFF7E1
CFD1F7
F7CFE5

Contrast Matrix WCAG 2.1 Contrast

F7F5CD
F0ECAC
DBD786
AAC981
B6DB86
1.1
Fail
1.3
Fail
1.7
Fail
1.4
Fail
1.1
Fail
1.2
Fail
1.5
Fail
1.3
Fail
1.3
Fail
1.2
Fail
1.2
Fail
1.0
Fail
1.7
Fail
1.5
Fail
1.2
Fail
1.2
Fail
1.4
Fail
1.3
Fail
1.0
Fail
1.2
Fail
White BG
1.1Fail
1.2Fail
1.5Fail
1.8Fail
1.6Fail
Black BG
18.9AAA
17.3AAA
14.1AAA
11.4AAA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6D7
EEEEBB
D9D99A
B7B892
C6C69B

Deuteranopia

F6F6D9
EFEFBF
DADA9E
B6B397
C4C1A0

Tritanopia

F7DEE0
F0C8CA
DBA9AC
ACA0A3
B8ABAE

Achromatopsia

F1F1F1
E6E6E6
CFCFCF
B8B8B8
C6C6C6

Shades & Tints Shades & Tints

#F7F5CD

Dark
Light

#F0ECAC

Dark
Light

#DBD786

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7f5cd;
  --color-2: #f0ecac;
  --color-3: #dbd786;
  --color-4: #aac981;
  --color-5: #b6db86;
}

SCSS

$color-1: #f7f5cd;
$color-2: #f0ecac;
$color-3: #dbd786;
$color-4: #aac981;
$color-5: #b6db86;

TAILWIND

colors: {
  'brand-1': '#f7f5cd',
  'brand-2': '#f0ecac',
  'brand-3': '#dbd786',
  'brand-4': '#aac981',
  'brand-5': '#b6db86',
}

RGB Array

[247, 245, 205], [240, 236, 172], [219, 215, 134], [170, 201, 129], [182, 219, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F7F5CD, #F0ECAC, #DBD786, #AAC981, #B6DB86 is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f7f5cd; --color-2: #f0ecac; --color-3: #dbd786; --color-4: #aac981; --color-5: #b6db86. 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. 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 tech, SaaS, healthcare, eco industries. 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