← Back to Editor

#86746C · #AC7870 · #EA7A9F · #EC8B78 · #F67E42

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

#86746C

Tangerine · Gray · Amber Brown

HEX
#86746C
RGB
rgb(134, 116, 108)
HSL
hsl(18, 11%, 47%)
HSB
hsb(18, 19%, 53%)
CMYK
cmyk(0%, 13%, 19%, 47%)
Oklch
oklch(57.3% 0.026 45.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#AC7870

Crimson · Gray · Passion Red

HEX
#AC7870
RGB
rgb(172, 120, 112)
HSL
hsl(8, 27%, 56%)
HSB
hsb(8, 35%, 67%)
CMYK
cmyk(0%, 30%, 35%, 33%)
Oklch
oklch(62.3% 0.067 28.9)

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

#EA7A9F

Rouge · LightCoral · Rose Pink

HEX
#EA7A9F
RGB
rgb(234, 122, 159)
HSL
hsl(340, 73%, 70%)
HSB
hsb(340, 48%, 92%)
CMYK
cmyk(0%, 48%, 32%, 8%)
Oklch
oklch(71.6% 0.143 0.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#EC8B78

Peach Pink · DarkSalmon · Coral Red

HEX
#EC8B78
RGB
rgb(236, 139, 120)
HSL
hsl(10, 75%, 70%)
HSB
hsb(10, 49%, 93%)
CMYK
cmyk(0%, 41%, 49%, 7%)
Oklch
oklch(73.5% 0.122 32.0)

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

#F67E42

Apricot · Coral · Warm Sun

HEX
#F67E42
RGB
rgb(246, 126, 66)
HSL
hsl(20, 91%, 61%)
HSB
hsb(20, 73%, 96%)
CMYK
cmyk(0%, 49%, 73%, 4%)
Oklch
oklch(72.0% 0.164 45.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86746C
6B7D85

Analogous

856B70
86746C
85806B

Triadic

86746C
6B8573
736B85

Split-Comp.

86746C
6B8580
6B7085

Tetradic

86746C
70856B
6B7D85
806B85

Contrast Matrix WCAG 2.1 Contrast

86746C
AC7870
EA7A9F
EC8B78
F67E42
—
1.2
Fail
1.6
Fail
1.8
Fail
1.7
Fail
1.2
Fail
—
1.4
Fail
1.5
Fail
1.4
Fail
1.6
Fail
1.4
Fail
—
1.1
Fail
1.0
Fail
1.8
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.7
Fail
1.4
Fail
1.0
Fail
1.1
Fail
—
White BG
4.4AA Large
3.7AA Large
2.7Fail
2.5Fail
2.6Fail
Black BG
4.7AA
5.7AA
7.8AAA
8.5AAA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7E6E
959572
BAB896
C2C17D
C2C151

Deuteranopia

7F816E
999C72
C0C894
C8CF7E
C9D254

Tritanopia

856F70
A97374
E48F8D
E78081
F05C5F

Achromatopsia

787878
878787
A0A0A0
A6A6A6
9B9B9B

Shades & Tints Shades & Tints

#86746C

Dark
Light

#AC7870

Dark
Light

#EA7A9F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86746c;
  --color-2: #ac7870;
  --color-3: #ea7a9f;
  --color-4: #ec8b78;
  --color-5: #f67e42;
}

SCSS

$color-1: #86746c;
$color-2: #ac7870;
$color-3: #ea7a9f;
$color-4: #ec8b78;
$color-5: #f67e42;

TAILWIND

colors: {
  'brand-1': '#86746c',
  'brand-2': '#ac7870',
  'brand-3': '#ea7a9f',
  'brand-4': '#ec8b78',
  'brand-5': '#f67e42',
}

RGB Array

[134, 116, 108], [172, 120, 112], [234, 122, 159], [236, 139, 120], [246, 126, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #86746C, #AC7870, #EA7A9F, #EC8B78, #F67E42 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: #86746c; --color-2: #ac7870; --color-3: #ea7a9f; --color-4: #ec8b78; --color-5: #f67e42. 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