← Back to Editor

#F0DF97 · #F0A886 · #F097A7 · #D0A9B0 · #CCE0EB

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 App

Color Details Color Details

#F0DF97

Goose Yellow · Khaki · Lemon Cream

HEX
#F0DF97
RGB
rgb(240, 223, 151)
HSL
hsl(49, 75%, 77%)
HSB
hsb(49, 37%, 94%)
CMYK
cmyk(0%, 7%, 37%, 6%)
Oklch
oklch(90.1% 0.093 96.5)

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

#F0A886

Apricot · LightSalmon · Warm Sun

HEX
#F0A886
RGB
rgb(240, 168, 134)
HSL
hsl(19, 78%, 73%)
HSB
hsb(19, 44%, 94%)
CMYK
cmyk(0%, 30%, 44%, 6%)
Oklch
oklch(79.3% 0.097 46.1)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F097A7

Peach Pink · LightPink · Coral Red

HEX
#F097A7
RGB
rgb(240, 151, 167)
HSL
hsl(349, 75%, 77%)
HSB
hsb(349, 37%, 94%)
CMYK
cmyk(0%, 37%, 30%, 6%)
Oklch
oklch(77.1% 0.108 8.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#D0A9B0

Peach Pink · Silver · Coral Red

HEX
#D0A9B0
RGB
rgb(208, 169, 176)
HSL
hsl(349, 29%, 74%)
HSB
hsb(349, 19%, 82%)
CMYK
cmyk(0%, 19%, 15%, 18%)
Oklch
oklch(77.2% 0.047 6.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#CCE0EB

Sky Blue · LightGray · Sky Blue

HEX
#CCE0EB
RGB
rgb(204, 224, 235)
HSL
hsl(201, 44%, 86%)
HSB
hsb(201, 13%, 92%)
CMYK
cmyk(13%, 5%, 0%, 8%)
Oklch
oklch(89.5% 0.026 231.6)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0DF97
98A8F0

Analogous

F0B498
F0DF97
D4F098

Triadic

F0DF97
98F0E0
E098F0

Split-Comp.

F0DF97
98D4F0
B498F0

Tetradic

F0DF97
98F0B4
98A8F0
F098D4

Contrast Matrix WCAG 2.1 Contrast

F0DF97
F0A886
F097A7
D0A9B0
CCE0EB
—
1.5
Fail
1.6
Fail
1.6
Fail
1.0
Fail
1.5
Fail
—
1.1
Fail
1.1
Fail
1.4
Fail
1.6
Fail
1.1
Fail
—
1.0
Fail
1.6
Fail
1.6
Fail
1.1
Fail
1.0
Fail
—
1.5
Fail
1.0
Fail
1.4
Fail
1.6
Fail
1.5
Fail
—
White BG
1.3Fail
2.0Fail
2.2Fail
2.1Fail
1.4Fail
Black BG
15.7AAA
10.7AAA
9.7AAA
10.0AAA
15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E8A8
D1D08E
C9C9A3
BFBFAE
D5D5E8

Deuteranopia

EAEBAD
D5DA90
CFD5A2
C1C4AE
D4D2E8

Tritanopia

EFB6B9
EC9596
ECA09F
CEADAD
CDE6E6

Achromatopsia

DCDCDC
BABABA
B3B3B3
B5B5B5
DBDBDB

Shades & Tints Shades & Tints

#F0DF97

Dark
Light

#F0A886

Dark
Light

#F097A7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0df97;
  --color-2: #f0a886;
  --color-3: #f097a7;
  --color-4: #d0a9b0;
  --color-5: #cce0eb;
}

SCSS

$color-1: #f0df97;
$color-2: #f0a886;
$color-3: #f097a7;
$color-4: #d0a9b0;
$color-5: #cce0eb;

TAILWIND

colors: {
  'brand-1': '#f0df97',
  'brand-2': '#f0a886',
  'brand-3': '#f097a7',
  'brand-4': '#d0a9b0',
  'brand-5': '#cce0eb',
}

RGB Array

[240, 223, 151], [240, 168, 134], [240, 151, 167], [208, 169, 176], [204, 224, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F0DF97, #F0A886, #F097A7, #D0A9B0, #CCE0EB is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. 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: #f0df97; --color-2: #f0a886; --color-3: #f097a7; --color-4: #d0a9b0; --color-5: #cce0eb. 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 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