← Back to Editor

#836F78 · #E2E4CF · #B7B8A6 · #848796 · #C1B19A

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#836F78

Dark Violet · Gray · Warm Gray

HEX
#836F78
RGB
rgb(131, 111, 120)
HSL
hsl(333, 8%, 47%)
HSB
hsb(333, 15%, 51%)
CMYK
cmyk(0%, 15%, 8%, 49%)
Oklch
oklch(56.3% 0.028 349.1)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

#E2E4CF

Fresh Green · LightGray · Lemon Cream

HEX
#E2E4CF
RGB
rgb(226, 228, 207)
HSL
hsl(66, 28%, 85%)
HSB
hsb(66, 9%, 89%)
CMYK
cmyk(1%, 0%, 9%, 11%)
Oklch
oklch(91.2% 0.028 111.4)

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

#B7B8A6

Fresh Green · DarkGray · Sunflower

HEX
#B7B8A6
RGB
rgb(183, 184, 166)
HSL
hsl(63, 11%, 69%)
HSB
hsb(63, 10%, 72%)
CMYK
cmyk(1%, 0%, 10%, 28%)
Oklch
oklch(77.7% 0.025 109.6)

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

#848796

Azure · LightSlateGray · Warm Gray

HEX
#848796
RGB
rgb(132, 135, 150)
HSL
hsl(230, 8%, 55%)
HSB
hsb(230, 12%, 59%)
CMYK
cmyk(12%, 10%, 0%, 41%)
Oklch
oklch(62.6% 0.023 276.7)

Traditional「Azure」· Paint「Warm Gray」· Creative Urban Concrete

#C1B19A

Ginger · Tan · Warm Sun

HEX
#C1B19A
RGB
rgb(193, 177, 154)
HSL
hsl(35, 24%, 68%)
HSB
hsb(35, 20%, 76%)
CMYK
cmyk(0%, 8%, 20%, 24%)
Oklch
oklch(76.8% 0.037 77.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

836F78
6E8179

Analogous

816E80
836F78
816F6E

Triadic

836F78
77816E
6E7781

Split-Comp.

836F78
6E816F
6E8081

Tetradic

836F78
80816E
6E8179
6F6E81

Contrast Matrix WCAG 2.1 Contrast

836F78
E2E4CF
B7B8A6
848796
C1B19A
—
3.6
AA Large
2.3
Fail
1.3
Fail
2.2
Fail
3.6
AA Large
—
1.6
Fail
2.8
Fail
1.6
Fail
2.3
Fail
1.6
Fail
—
1.8
Fail
1.0
Fail
1.3
Fail
2.8
Fail
1.8
Fail
—
1.7
Fail
2.2
Fail
1.6
Fail
1.0
Fail
1.7
Fail
—
White BG
4.7AA
1.3Fail
2.0Fail
3.6AA Large
2.1Fail
Black BG
4.5AA
16.2AAA
10.4AAA
5.9AA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7A76
E3E3D4
B7B7AA
858592
BABAA0

Deuteranopia

7C7D75
E3E3D5
B7B7AB
858592
BBBCA1

Tritanopia

827474
E2D8D9
B7AEAF
84908F
C0A4A5

Achromatopsia

767676
E1E1E1
B6B6B6
888888
B3B3B3

Shades & Tints Shades & Tints

#836F78

Dark
Light

#E2E4CF

Dark
Light

#B7B8A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #836f78;
  --color-2: #e2e4cf;
  --color-3: #b7b8a6;
  --color-4: #848796;
  --color-5: #c1b19a;
}

SCSS

$color-1: #836f78;
$color-2: #e2e4cf;
$color-3: #b7b8a6;
$color-4: #848796;
$color-5: #c1b19a;

TAILWIND

colors: {
  'brand-1': '#836f78',
  'brand-2': '#e2e4cf',
  'brand-3': '#b7b8a6',
  'brand-4': '#848796',
  'brand-5': '#c1b19a',
}

RGB Array

[131, 111, 120], [226, 228, 207], [183, 184, 166], [132, 135, 150], [193, 177, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #836F78, #E2E4CF, #B7B8A6, #848796, #C1B19A is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #836f78; --color-2: #e2e4cf; --color-3: #b7b8a6; --color-4: #848796; --color-5: #c1b19a. 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. Restrained colors convey professionalism and trust. 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