← Back to Editor

#FCFFE5 · #B8BBA8 · #99133E · #432B31 · #222900

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

#FCFFE5

Fresh Green · LightYellow · Lemon Cream

HEX
#FCFFE5
RGB
rgb(252, 255, 229)
HSL
hsl(67, 100%, 95%)
HSB
hsb(67, 10%, 100%)
CMYK
cmyk(1%, 0%, 10%, 0%)
Oklch
oklch(99.1% 0.034 112.4)

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

#B8BBA8

Fresh Green · DarkGray · Sunflower

HEX
#B8BBA8
RGB
rgb(184, 187, 168)
HSL
hsl(69, 12%, 70%)
HSB
hsb(69, 10%, 73%)
CMYK
cmyk(2%, 0%, 10%, 27%)
Oklch
oklch(78.4% 0.026 114.3)

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

#99133E

Dark Violet · Brown · Camellia

HEX
#99133E
RGB
rgb(153, 19, 62)
HSL
hsl(341, 78%, 34%)
HSB
hsb(341, 88%, 60%)
CMYK
cmyk(0%, 88%, 59%, 40%)
Oklch
oklch(44.5% 0.166 10.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#432B31

Crimson · DarkSlateGray · Wine Red

HEX
#432B31
RGB
rgb(67, 43, 49)
HSL
hsl(345, 22%, 22%)
HSB
hsb(345, 36%, 26%)
CMYK
cmyk(0%, 36%, 27%, 74%)
Oklch
oklch(32.0% 0.037 3.0)

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

#222900

Grass Green · Black · Dark Green

HEX
#222900
RGB
rgb(34, 41, 0)
HSL
hsl(70, 100%, 8%)
HSB
hsb(70, 100%, 16%)
CMYK
cmyk(17%, 0%, 100%, 84%)
Oklch
oklch(26.5% 0.062 119.1)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCFFE5
E8E5FF

Analogous

FFF5E5
FCFFE5
EFFFE5

Triadic

FCFFE5
E5FCFF
FFE5FC

Split-Comp.

FCFFE5
E5EFFF
F5E5FF

Tetradic

FCFFE5
E5FFF5
E8E5FF
FFE5EF

Contrast Matrix WCAG 2.1 Contrast

FCFFE5
B8BBA8
99133E
432B31
222900
—
1.9
Fail
8.2
AAA
12.6
AAA
14.9
AAA
1.9
Fail
—
4.3
AA Large
6.6
AA
7.7
AAA
8.2
AAA
4.3
AA Large
—
1.5
Fail
1.8
Fail
12.6
AAA
6.6
AA
1.5
Fail
—
1.2
Fail
14.9
AAA
7.7
AAA
1.8
Fail
1.2
Fail
—
White BG
1.0Fail
2.0Fail
8.3AAA
12.9AAA
15.2AAA
Black BG
20.6AAA
10.7AAA
2.5Fail
1.6Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FDFDEB
B9B9AD
5F5E34
393830
25250A

Deuteranopia

FDFDED
B9B9AE
677131
3A3C2F
25240C

Tritanopia

FCF0F1
B8B0B1
922B2A
422E2E
221213

Achromatopsia

FBFBFB
B8B8B8
404040
333333
222222

Shades & Tints Shades & Tints

#FCFFE5

Dark
Light

#B8BBA8

Dark
Light

#99133E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcffe5;
  --color-2: #b8bba8;
  --color-3: #99133e;
  --color-4: #432b31;
  --color-5: #222900;
}

SCSS

$color-1: #fcffe5;
$color-2: #b8bba8;
$color-3: #99133e;
$color-4: #432b31;
$color-5: #222900;

TAILWIND

colors: {
  'brand-1': '#fcffe5',
  'brand-2': '#b8bba8',
  'brand-3': '#99133e',
  'brand-4': '#432b31',
  'brand-5': '#222900',
}

RGB Array

[252, 255, 229], [184, 187, 168], [153, 19, 62], [67, 43, 49], [34, 41, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FCFFE5, #B8BBA8, #99133E, #432B31, #222900 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: #fcffe5; --color-2: #b8bba8; --color-3: #99133e; --color-4: #432b31; --color-5: #222900. 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