← Back to Editor

#F5F518 · #EDE195 · #CCE8CA · #ADF7E7 · #F8F3ED

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

#F5F518

Autumn Sage · Yellow · Sunflower

HEX
#F5F518
RGB
rgb(245, 245, 24)
HSL
hsl(60, 92%, 53%)
HSB
hsb(60, 90%, 96%)
CMYK
cmyk(0%, 0%, 90%, 4%)
Oklch
oklch(93.9% 0.202 109.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#EDE195

Fresh Green · Khaki · Lemon Cream

HEX
#EDE195
RGB
rgb(237, 225, 149)
HSL
hsl(52, 71%, 76%)
HSB
hsb(52, 37%, 93%)
CMYK
cmyk(0%, 5%, 37%, 7%)
Oklch
oklch(90.2% 0.097 100.4)

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

#CCE8CA

Celadon · LightGray · Mint Green

HEX
#CCE8CA
RGB
rgb(204, 232, 202)
HSL
hsl(116, 39%, 85%)
HSB
hsb(116, 13%, 91%)
CMYK
cmyk(12%, 0%, 13%, 9%)
Oklch
oklch(90.2% 0.050 143.3)

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

#ADF7E7

Jade · LightBlue · Glacier Blue

HEX
#ADF7E7
RGB
rgb(173, 247, 231)
HSL
hsl(167, 82%, 82%)
HSB
hsb(167, 30%, 97%)
CMYK
cmyk(30%, 0%, 6%, 3%)
Oklch
oklch(92.3% 0.076 179.5)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#F8F3ED

Goose Yellow · SeaShell · Peach Orange

HEX
#F8F3ED
RGB
rgb(248, 243, 237)
HSL
hsl(33, 44%, 95%)
HSB
hsb(33, 4%, 97%)
CMYK
cmyk(0%, 2%, 4%, 3%)
Oklch
oklch(96.6% 0.010 72.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F518
1919F5

Analogous

F58719
F5F518
87F519

Triadic

F5F518
19F5F5
F519F5

Split-Comp.

F5F518
1987F5
8719F5

Tetradic

F5F518
19F587
1919F5
F51987

Contrast Matrix WCAG 2.1 Contrast

F5F518
EDE195
CCE8CA
ADF7E7
F8F3ED
—
1.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.2
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
White BG
1.2Fail
1.3Fail
1.3Fail
1.2Fail
1.1Fail
Black BG
18.0AAA
15.8AAA
16.0AAA
17.2AAA
19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F54D
E8E8A7
D8D8D1
CDCEEB
F6F6EE

Deuteranopia

F5F55A
E9E9AC
D7D4D3
C9C3EC
F6F7EF

Tritanopia

F57881
ECB6B9
CDD7D8
B1EEEF
F8F0F0

Achromatopsia

DCDCDC
DCDCDC
DCDCDC
DFDFDF
F4F4F4

Shades & Tints Shades & Tints

#F5F518

Dark
Light

#EDE195

Dark
Light

#CCE8CA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f518;
  --color-2: #ede195;
  --color-3: #cce8ca;
  --color-4: #adf7e7;
  --color-5: #f8f3ed;
}

SCSS

$color-1: #f5f518;
$color-2: #ede195;
$color-3: #cce8ca;
$color-4: #adf7e7;
$color-5: #f8f3ed;

TAILWIND

colors: {
  'brand-1': '#f5f518',
  'brand-2': '#ede195',
  'brand-3': '#cce8ca',
  'brand-4': '#adf7e7',
  'brand-5': '#f8f3ed',
}

RGB Array

[245, 245, 24], [237, 225, 149], [204, 232, 202], [173, 247, 231], [248, 243, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F5F518, #EDE195, #CCE8CA, #ADF7E7, #F8F3ED 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: #f5f518; --color-2: #ede195; --color-3: #cce8ca; --color-4: #adf7e7; --color-5: #f8f3ed. 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