← Back to Editor

#706767 · #E87474 · #E6A37A · #D3CC83 · #C0DBAB

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

#706767

Ink Gray · DimGray · Warm Gray

HEX
#706767
RGB
rgb(112, 103, 103)
HSL
hsl(0, 4%, 42%)
HSB
hsb(0, 8%, 44%)
CMYK
cmyk(0%, 8%, 8%, 56%)
Oklch
oklch(52.2% 0.011 17.5)

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

#E87474

Peach Pink · LightCoral · Coral Red

HEX
#E87474
RGB
rgb(232, 116, 116)
HSL
hsl(0, 72%, 68%)
HSB
hsb(0, 50%, 91%)
CMYK
cmyk(0%, 50%, 50%, 9%)
Oklch
oklch(69.3% 0.144 21.5)

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

#E6A37A

Apricot · DarkSalmon · Warm Sun

HEX
#E6A37A
RGB
rgb(230, 163, 122)
HSL
hsl(23, 68%, 69%)
HSB
hsb(23, 47%, 90%)
CMYK
cmyk(0%, 29%, 47%, 10%)
Oklch
oklch(77.1% 0.097 52.3)

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

#D3CC83

Fresh Green · BurlyWood · Sunflower

HEX
#D3CC83
RGB
rgb(211, 204, 131)
HSL
hsl(55, 48%, 67%)
HSB
hsb(55, 38%, 83%)
CMYK
cmyk(0%, 3%, 38%, 17%)
Oklch
oklch(83.4% 0.094 103.5)

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

#C0DBAB

Celadon · Silver · Apple Green

HEX
#C0DBAB
RGB
rgb(192, 219, 171)
HSL
hsl(94, 40%, 76%)
HSB
hsb(94, 22%, 86%)
CMYK
cmyk(12%, 0%, 22%, 14%)
Oklch
oklch(85.9% 0.071 131.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

706767
676F6F

Analogous

6F676B
706767
6F6B67

Triadic

706767
676F67
67676F

Split-Comp.

706767
676F6B
676B6F

Tetradic

706767
6B6F67
676F6F
6B676F

Contrast Matrix WCAG 2.1 Contrast

706767
E87474
E6A37A
D3CC83
C0DBAB
—
1.9
Fail
2.6
Fail
3.3
AA Large
3.7
AA Large
1.9
Fail
—
1.4
Fail
1.8
Fail
1.9
Fail
2.6
Fail
1.4
Fail
—
1.3
Fail
1.4
Fail
3.3
AA Large
1.8
Fail
1.3
Fail
—
1.1
Fail
3.7
AA Large
1.9
Fail
1.4
Fail
1.1
Fail
—
White BG
5.5AA
2.9Fail
2.1Fail
1.6Fail
1.5Fail
Black BG
3.8AA Large
7.2AAA
9.9AAA
12.7AAA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6C67
B6B574
C9C884
D0D095
CCCCB7

Deuteranopia

6D6D67
BDC574
CDD286
D0D199
CAC8B9

Tritanopia

706767
E27474
E38C8D
D3A3A6
C1C0C2

Achromatopsia

6A6A6A
979797
B2B2B2
C6C6C6
CDCDCD

Shades & Tints Shades & Tints

#706767

Dark
Light

#E87474

Dark
Light

#E6A37A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #706767;
  --color-2: #e87474;
  --color-3: #e6a37a;
  --color-4: #d3cc83;
  --color-5: #c0dbab;
}

SCSS

$color-1: #706767;
$color-2: #e87474;
$color-3: #e6a37a;
$color-4: #d3cc83;
$color-5: #c0dbab;

TAILWIND

colors: {
  'brand-1': '#706767',
  'brand-2': '#e87474',
  'brand-3': '#e6a37a',
  'brand-4': '#d3cc83',
  'brand-5': '#c0dbab',
}

RGB Array

[112, 103, 103], [232, 116, 116], [230, 163, 122], [211, 204, 131], [192, 219, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #706767, #E87474, #E6A37A, #D3CC83, #C0DBAB 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: #706767; --color-2: #e87474; --color-3: #e6a37a; --color-4: #d3cc83; --color-5: #c0dbab. 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