← Back to Editor

#B3E5D8 · #D5CC68 · #F3C186 · #FD9294 · #93303A

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

#B3E5D8

Jade · LightBlue · Glacier Blue

HEX
#B3E5D8
RGB
rgb(179, 229, 216)
HSL
hsl(164, 49%, 80%)
HSB
hsb(164, 22%, 90%)
CMYK
cmyk(22%, 0%, 6%, 10%)
Oklch
oklch(88.3% 0.055 177.3)

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

#D5CC68

Fresh Green · BurlyWood · Sunflower

HEX
#D5CC68
RGB
rgb(213, 204, 104)
HSL
hsl(55, 56%, 62%)
HSB
hsb(55, 51%, 84%)
CMYK
cmyk(0%, 4%, 51%, 16%)
Oklch
oklch(83.2% 0.123 104.1)

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

#F3C186

Goose Yellow · BurlyWood · Warm Sun

HEX
#F3C186
RGB
rgb(243, 193, 134)
HSL
hsl(32, 82%, 74%)
HSB
hsb(32, 45%, 95%)
CMYK
cmyk(0%, 21%, 45%, 5%)
Oklch
oklch(84.2% 0.095 70.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#FD9294

Peach Pink · LightSalmon · Coral Red

HEX
#FD9294
RGB
rgb(253, 146, 148)
HSL
hsl(359, 96%, 78%)
HSB
hsb(359, 42%, 99%)
CMYK
cmyk(0%, 42%, 42%, 1%)
Oklch
oklch(77.4% 0.129 19.3)

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

#93303A

Crimson · Brown · Wine Red

HEX
#93303A
RGB
rgb(147, 48, 58)
HSL
hsl(354, 51%, 38%)
HSB
hsb(354, 67%, 58%)
CMYK
cmyk(0%, 67%, 61%, 42%)
Oklch
oklch(45.8% 0.133 18.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3E5D8
E5B3C0

Analogous

B3E5BF
B3E5D8
B3D9E5

Triadic

B3E5D8
D8B3E5
E5D8B3

Split-Comp.

B3E5D8
E5B3D9
E5BFB3

Tetradic

B3E5D8
BFB3E5
E5B3C0
D9E5B3

Contrast Matrix WCAG 2.1 Contrast

B3E5D8
D5CC68
F3C186
FD9294
93303A
—
1.2
Fail
1.2
Fail
1.6
Fail
5.5
AA
1.2
Fail
—
1.0
Fail
1.3
Fail
4.6
AA
1.2
Fail
1.0
Fail
—
1.3
Fail
4.7
AA
1.6
Fail
1.3
Fail
1.3
Fail
—
3.6
AA Large
5.5
AA
4.6
AA
4.7
AA
3.6
AA Large
—
White BG
1.4Fail
1.7Fail
1.6Fail
2.2Fail
7.7AAA
Black BG
15.1AAA
12.7AAA
12.8AAA
9.7AAA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C9DB
D1D180
DDDD94
CFCE94
686738

Deuteranopia

C6C2DC
D2D286
E0E498
D5DD93
6E7537

Tritanopia

B5DEDE
D59398
F1A0A2
F89393
8E3635

Achromatopsia

D5D5D5
C3C3C3
C9C9C9
B2B2B2
4F4F4F

Shades & Tints Shades & Tints

#B3E5D8

Dark
Light

#D5CC68

Dark
Light

#F3C186

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3e5d8;
  --color-2: #d5cc68;
  --color-3: #f3c186;
  --color-4: #fd9294;
  --color-5: #93303a;
}

SCSS

$color-1: #b3e5d8;
$color-2: #d5cc68;
$color-3: #f3c186;
$color-4: #fd9294;
$color-5: #93303a;

TAILWIND

colors: {
  'brand-1': '#b3e5d8',
  'brand-2': '#d5cc68',
  'brand-3': '#f3c186',
  'brand-4': '#fd9294',
  'brand-5': '#93303a',
}

RGB Array

[179, 229, 216], [213, 204, 104], [243, 193, 134], [253, 146, 148], [147, 48, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #B3E5D8, #D5CC68, #F3C186, #FD9294, #93303A 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: #b3e5d8; --color-2: #d5cc68; --color-3: #f3c186; --color-4: #fd9294; --color-5: #93303a. 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