← Back to Editor

#EB5153 · #5D7366 · #87916F · #BBB57B · #D5C884

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#EB5153

Peach Pink · Tomato · Coral Red

HEX
#EB5153
RGB
rgb(235, 81, 83)
HSL
hsl(359, 79%, 62%)
HSB
hsb(359, 66%, 92%)
CMYK
cmyk(0%, 66%, 65%, 8%)
Oklch
oklch(64.6% 0.190 23.5)

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

#5D7366

Celadon · DimGray · Olive Green

HEX
#5D7366
RGB
rgb(93, 115, 102)
HSL
hsl(145, 11%, 41%)
HSB
hsb(145, 19%, 45%)
CMYK
cmyk(19%, 0%, 11%, 55%)
Oklch
oklch(53.4% 0.033 159.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#87916F

Grass Green · Gray · Olive Green

HEX
#87916F
RGB
rgb(135, 145, 111)
HSL
hsl(78, 13%, 50%)
HSB
hsb(78, 23%, 57%)
CMYK
cmyk(7%, 0%, 23%, 43%)
Oklch
oklch(63.9% 0.050 121.1)

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

#BBB57B

Fresh Green · Tan · Sunflower

HEX
#BBB57B
RGB
rgb(187, 181, 123)
HSL
hsl(54, 32%, 61%)
HSB
hsb(54, 34%, 73%)
CMYK
cmyk(0%, 3%, 34%, 27%)
Oklch
oklch(76.4% 0.077 103.0)

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

#D5C884

Fresh Green · BurlyWood · Sunflower

HEX
#D5C884
RGB
rgb(213, 200, 132)
HSL
hsl(50, 49%, 68%)
HSB
hsb(50, 38%, 84%)
CMYK
cmyk(0%, 6%, 38%, 16%)
Oklch
oklch(82.8% 0.089 98.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EB5153
52EBE8

Analogous

EB52A1
EB5153
EB9C52

Triadic

EB5153
54EB52
5254EB

Split-Comp.

EB5153
52EB9C
52A1EB

Tetradic

EB5153
A1EB52
52EBE8
9C52EB

Contrast Matrix WCAG 2.1 Contrast

EB5153
5D7366
87916F
BBB57B
D5C884
—
1.4
Fail
1.1
Fail
1.7
Fail
2.1
Fail
1.4
Fail
—
1.5
Fail
2.4
Fail
3.0
AA Large
1.1
Fail
1.5
Fail
—
1.6
Fail
2.0
Fail
1.7
Fail
2.4
Fail
1.6
Fail
—
1.2
Fail
2.1
Fail
3.0
AA Large
2.0
Fail
1.2
Fail
—
White BG
3.6AA Large
5.1AA
3.3AA Large
2.1Fail
1.7Fail
Black BG
5.8AA
4.1AA Large
6.3AA
10.0AAA
12.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A753
676769
8B8B77
B8B889
CFCF94

Deuteranopia

B1BD52
65646A
8B8A79
B9B98C
D0D198

Tritanopia

E35252
5E6C6C
887E7F
BB9497
D4A1A4

Achromatopsia

7F7F7F
6B6B6B
8A8A8A
B0B0B0
C4C4C4

Shades & Tints Shades & Tints

#EB5153

Dark
Light

#5D7366

Dark
Light

#87916F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eb5153;
  --color-2: #5d7366;
  --color-3: #87916f;
  --color-4: #bbb57b;
  --color-5: #d5c884;
}

SCSS

$color-1: #eb5153;
$color-2: #5d7366;
$color-3: #87916f;
$color-4: #bbb57b;
$color-5: #d5c884;

TAILWIND

colors: {
  'brand-1': '#eb5153',
  'brand-2': '#5d7366',
  'brand-3': '#87916f',
  'brand-4': '#bbb57b',
  'brand-5': '#d5c884',
}

RGB Array

[235, 81, 83], [93, 115, 102], [135, 145, 111], [187, 181, 123], [213, 200, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #EB5153, #5D7366, #87916F, #BBB57B, #D5C884 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #eb5153; --color-2: #5d7366; --color-3: #87916f; --color-4: #bbb57b; --color-5: #d5c884. 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. 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 tech, SaaS, healthcare, eco industries. 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