← Back to Editor

#F7FFAD · #C8D676 · #CC6269 · #B31E41 · #400826

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

#F7FFAD

Fresh Green · Wheat · Lemon Cream

HEX
#F7FFAD
RGB
rgb(247, 255, 173)
HSL
hsl(66, 100%, 84%)
HSB
hsb(66, 32%, 100%)
CMYK
cmyk(3%, 0%, 32%, 0%)
Oklch
oklch(97.5% 0.103 112.9)

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

#C8D676

Fresh Green · BurlyWood · Sunflower

HEX
#C8D676
RGB
rgb(200, 214, 118)
HSL
hsl(69, 54%, 65%)
HSB
hsb(69, 45%, 84%)
CMYK
cmyk(7%, 0%, 45%, 16%)
Oklch
oklch(84.5% 0.122 115.9)

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

#CC6269

Crimson · LightCoral · Passion Red

HEX
#CC6269
RGB
rgb(204, 98, 105)
HSL
hsl(356, 51%, 59%)
HSB
hsb(356, 52%, 80%)
CMYK
cmyk(0%, 52%, 49%, 20%)
Oklch
oklch(62.6% 0.135 17.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#B31E41

Vermilion · Brown · Passion Red

HEX
#B31E41
RGB
rgb(179, 30, 65)
HSL
hsl(346, 71%, 41%)
HSB
hsb(346, 83%, 70%)
CMYK
cmyk(0%, 83%, 64%, 30%)
Oklch
oklch(50.1% 0.182 14.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#400826

Rose Purple · Black · Raspberry

HEX
#400826
RGB
rgb(64, 8, 38)
HSL
hsl(328, 78%, 14%)
HSB
hsb(328, 88%, 25%)
CMYK
cmyk(0%, 88%, 41%, 75%)
Oklch
oklch(25.3% 0.090 353.0)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7FFAD
B6ADFF

Analogous

FFDEAD
F7FFAD
CEFFAD

Triadic

F7FFAD
ADF7FF
FFADF7

Split-Comp.

F7FFAD
ADCEFF
DEADFF

Tetradic

F7FFAD
ADFFDE
B6ADFF
FFADCE

Contrast Matrix WCAG 2.1 Contrast

F7FFAD
C8D676
CC6269
B31E41
400826
—
1.5
Fail
3.6
AA Large
6.2
AA
15.5
AAA
1.5
Fail
—
2.4
Fail
4.2
AA Large
10.4
AAA
3.6
AA Large
2.4
Fail
—
1.7
Fail
4.3
AA Large
6.2
AA
4.2
AA Large
1.7
Fail
—
2.5
Fail
15.5
AAA
10.4
AAA
4.3
AA Large
2.5
Fail
—
White BG
1.1Fail
1.6Fail
3.8AA Large
6.6AA
16.4AAA
Black BG
19.9AAA
13.3AAA
5.5AA
3.2AA Large
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFBC1
CECE8D
9E9D67
727139
28271F

Deuteranopia

FAF9C6
CDCC93
A4AC67
7B8637
2B2F1D

Tritanopia

F7D1D4
C9A0A4
C76666
AC3230
3D1918

Achromatopsia

F3F3F3
C7C7C7
828282
4F4F4F
1C1C1C

Shades & Tints Shades & Tints

#F7FFAD

Dark
Light

#C8D676

Dark
Light

#CC6269

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7ffad;
  --color-2: #c8d676;
  --color-3: #cc6269;
  --color-4: #b31e41;
  --color-5: #400826;
}

SCSS

$color-1: #f7ffad;
$color-2: #c8d676;
$color-3: #cc6269;
$color-4: #b31e41;
$color-5: #400826;

TAILWIND

colors: {
  'brand-1': '#f7ffad',
  'brand-2': '#c8d676',
  'brand-3': '#cc6269',
  'brand-4': '#b31e41',
  'brand-5': '#400826',
}

RGB Array

[247, 255, 173], [200, 214, 118], [204, 98, 105], [179, 30, 65], [64, 8, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F7FFAD, #C8D676, #CC6269, #B31E41, #400826 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: #f7ffad; --color-2: #c8d676; --color-3: #cc6269; --color-4: #b31e41; --color-5: #400826. 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