← Back to Editor

#BBD3A6 · #FCE38A · #EB544A · #C32B29 · #551126

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

#BBD3A6

Celadon · Silver · Apple Green

HEX
#BBD3A6
RGB
rgb(187, 211, 166)
HSL
hsl(92, 34%, 74%)
HSB
hsb(92, 21%, 83%)
CMYK
cmyk(11%, 0%, 21%, 17%)
Oklch
oklch(83.7% 0.066 130.6)

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

#FCE38A

Goose Yellow · Khaki · Lemon Cream

HEX
#FCE38A
RGB
rgb(252, 227, 138)
HSL
hsl(47, 95%, 76%)
HSB
hsb(47, 45%, 99%)
CMYK
cmyk(0%, 10%, 45%, 1%)
Oklch
oklch(91.7% 0.112 94.2)

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

#EB544A

Peach Pink · Tomato · Coral Red

HEX
#EB544A
RGB
rgb(235, 84, 74)
HSL
hsl(4, 80%, 61%)
HSB
hsb(4, 69%, 92%)
CMYK
cmyk(0%, 64%, 69%, 8%)
Oklch
oklch(64.8% 0.188 27.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#C32B29

Vermilion · FireBrick · Passion Red

HEX
#C32B29
RGB
rgb(195, 43, 41)
HSL
hsl(1, 65%, 46%)
HSB
hsb(1, 79%, 76%)
CMYK
cmyk(0%, 78%, 79%, 24%)
Oklch
oklch(53.6% 0.189 26.9)

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

#551126

Dark Violet · Maroon · Raspberry

HEX
#551126
RGB
rgb(85, 17, 38)
HSL
hsl(341, 67%, 20%)
HSB
hsb(341, 80%, 33%)
CMYK
cmyk(0%, 80%, 55%, 67%)
Oklch
oklch(30.4% 0.100 7.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBD3A6
BEA6D3

Analogous

D2D3A6
BBD3A6
A6D3A8

Triadic

BBD3A6
A6BBD3
D3A6BB

Split-Comp.

BBD3A6
A8A6D3
D3A6D2

Tetradic

BBD3A6
A6D2D3
BEA6D3
D3A8A6

Contrast Matrix WCAG 2.1 Contrast

BBD3A6
FCE38A
EB544A
C32B29
551126
—
1.3
Fail
2.2
Fail
3.5
AA Large
8.7
AAA
1.3
Fail
—
2.8
Fail
4.5
AA Large
11.0
AAA
2.2
Fail
2.8
Fail
—
1.6
Fail
3.9
AA Large
3.5
AA Large
4.5
AA Large
1.6
Fail
—
2.5
Fail
8.7
AAA
11.0
AAA
3.9
AA Large
2.5
Fail
—
White BG
1.6Fail
1.3Fail
3.6AA Large
5.7AA
14.1AAA
Black BG
13.0AAA
16.5AAA
5.9AA
3.7AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C6B1
F1F1A0
AAA84C
818029
383721

Deuteranopia

C4C2B4
F3F4A5
B2BE4D
8A952A
3C4120

Tritanopia

BCB9BB
FBB1B4
E34E4F
BB2A2A
521D1C

Achromatopsia

C7C7C7
E0E0E0
808080
585858
282828

Shades & Tints Shades & Tints

#BBD3A6

Dark
Light

#FCE38A

Dark
Light

#EB544A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbd3a6;
  --color-2: #fce38a;
  --color-3: #eb544a;
  --color-4: #c32b29;
  --color-5: #551126;
}

SCSS

$color-1: #bbd3a6;
$color-2: #fce38a;
$color-3: #eb544a;
$color-4: #c32b29;
$color-5: #551126;

TAILWIND

colors: {
  'brand-1': '#bbd3a6',
  'brand-2': '#fce38a',
  'brand-3': '#eb544a',
  'brand-4': '#c32b29',
  'brand-5': '#551126',
}

RGB Array

[187, 211, 166], [252, 227, 138], [235, 84, 74], [195, 43, 41], [85, 17, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #BBD3A6, #FCE38A, #EB544A, #C32B29, #551126 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: #bbd3a6; --color-2: #fce38a; --color-3: #eb544a; --color-4: #c32b29; --color-5: #551126. 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