← Back to Editor

#73B995 · #878973 · #A84351 · #E46D69 · #DEBA96

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

#73B995

Celadon · DarkSeaGreen · Olive Green

HEX
#73B995
RGB
rgb(115, 185, 149)
HSL
hsl(149, 33%, 59%)
HSB
hsb(149, 38%, 73%)
CMYK
cmyk(38%, 0%, 19%, 27%)
Oklch
oklch(72.9% 0.089 160.7)

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

#878973

Autumn Sage · Gray · Warm Gray

HEX
#878973
RGB
rgb(135, 137, 115)
HSL
hsl(65, 9%, 49%)
HSB
hsb(65, 16%, 54%)
CMYK
cmyk(1%, 0%, 16%, 46%)
Oklch
oklch(62.2% 0.032 111.5)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

#A84351

Crimson · Sienna · Passion Red

HEX
#A84351
RGB
rgb(168, 67, 81)
HSL
hsl(352, 43%, 46%)
HSB
hsb(352, 60%, 66%)
CMYK
cmyk(0%, 60%, 52%, 34%)
Oklch
oklch(52.2% 0.133 14.6)

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

#E46D69

Peach Pink · Salmon · Coral Red

HEX
#E46D69
RGB
rgb(228, 109, 105)
HSL
hsl(2, 69%, 65%)
HSB
hsb(2, 54%, 89%)
CMYK
cmyk(0%, 52%, 54%, 11%)
Oklch
oklch(67.5% 0.149 23.8)

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

#DEBA96

Goose Yellow · BurlyWood · Warm Sun

HEX
#DEBA96
RGB
rgb(222, 186, 150)
HSL
hsl(30, 52%, 73%)
HSB
hsb(30, 32%, 87%)
CMYK
cmyk(0%, 16%, 32%, 13%)
Oklch
oklch(81.1% 0.064 66.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

73B995
B97498

Analogous

75B974
73B995
74B9B8

Triadic

73B995
9574B9
B99574

Split-Comp.

73B995
B874B9
B97475

Tetradic

73B995
7475B9
B97498
B9B874

Contrast Matrix WCAG 2.1 Contrast

73B995
878973
A84351
E46D69
DEBA96
—
1.6
Fail
2.5
Fail
1.4
Fail
1.3
Fail
1.6
Fail
—
1.6
Fail
1.1
Fail
2.0
Fail
2.5
Fail
1.6
Fail
—
1.9
Fail
3.2
AA Large
1.4
Fail
1.1
Fail
1.9
Fail
—
1.7
Fail
1.3
Fail
2.0
Fail
3.2
AA Large
1.7
Fail
—
White BG
2.3Fail
3.6AA Large
5.9AA
3.1AA Large
1.8Fail
Black BG
9.1AAA
5.9AA
3.6AA Large
6.7AA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

91929E
888878
7C7B4E
B0AF6A
CECE9F

Deuteranopia

8D88A0
88887A
828A4D
B7C06A
D1D3A1

Tritanopia

77A5A6
877D7D
A34B4A
DE6B6B
DCA6A7

Achromatopsia

A0A0A0
868686
636363
909090
C1C1C1

Shades & Tints Shades & Tints

#73B995

Dark
Light

#878973

Dark
Light

#A84351

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #73b995;
  --color-2: #878973;
  --color-3: #a84351;
  --color-4: #e46d69;
  --color-5: #deba96;
}

SCSS

$color-1: #73b995;
$color-2: #878973;
$color-3: #a84351;
$color-4: #e46d69;
$color-5: #deba96;

TAILWIND

colors: {
  'brand-1': '#73b995',
  'brand-2': '#878973',
  'brand-3': '#a84351',
  'brand-4': '#e46d69',
  'brand-5': '#deba96',
}

RGB Array

[115, 185, 149], [135, 137, 115], [168, 67, 81], [228, 109, 105], [222, 186, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #73B995, #878973, #A84351, #E46D69, #DEBA96 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: #73b995; --color-2: #878973; --color-3: #a84351; --color-4: #e46d69; --color-5: #deba96. 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