← Back to Editor

#784F5F · #F07860 · #F0C078 · #C0A860 · #8F7968

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

#784F5F

Dark Violet · DimGray · Camellia

HEX
#784F5F
RGB
rgb(120, 79, 95)
HSL
hsl(337, 21%, 39%)
HSB
hsb(337, 34%, 47%)
CMYK
cmyk(0%, 34%, 21%, 53%)
Oklch
oklch(47.8% 0.059 354.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#F07860

Peach Pink · Salmon · Coral Red

HEX
#F07860
RGB
rgb(240, 120, 96)
HSL
hsl(10, 83%, 66%)
HSB
hsb(10, 60%, 94%)
CMYK
cmyk(0%, 50%, 60%, 6%)
Oklch
oklch(70.6% 0.153 32.7)

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

#F0C078

Goose Yellow · BurlyWood · Warm Sun

HEX
#F0C078
RGB
rgb(240, 192, 120)
HSL
hsl(36, 80%, 71%)
HSB
hsb(36, 50%, 94%)
CMYK
cmyk(0%, 20%, 50%, 6%)
Oklch
oklch(83.5% 0.105 76.6)

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

#C0A860

Ginger · Tan · Sunflower

HEX
#C0A860
RGB
rgb(192, 168, 96)
HSL
hsl(45, 43%, 56%)
HSB
hsb(45, 50%, 75%)
CMYK
cmyk(0%, 13%, 50%, 25%)
Oklch
oklch(73.7% 0.096 91.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#8F7968

Tangerine · Gray · Amber Brown

HEX
#8F7968
RGB
rgb(143, 121, 104)
HSL
hsl(26, 16%, 48%)
HSB
hsb(26, 27%, 56%)
CMYK
cmyk(0%, 15%, 27%, 44%)
Oklch
oklch(59.2% 0.037 59.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

784F5F
4F7868

Analogous

784F73
784F5F
78534F

Triadic

784F5F
5F784F
4F5F78

Split-Comp.

784F5F
4F7853
4F7378

Tetradic

784F5F
73784F
4F7868
534F78

Contrast Matrix WCAG 2.1 Contrast

784F5F
F07860
F0C078
C0A860
8F7968
—
2.5
Fail
4.1
AA Large
2.9
Fail
1.7
Fail
2.5
Fail
—
1.7
Fail
1.2
Fail
1.5
Fail
4.1
AA Large
1.7
Fail
—
1.4
Fail
2.5
Fail
2.9
Fail
1.2
Fail
1.4
Fail
—
1.8
Fail
1.7
Fail
1.5
Fail
2.5
Fail
1.8
Fail
—
White BG
6.8AA
2.8Fail
1.7Fail
2.3Fail
4.1AA Large
Black BG
3.1AA Large
7.6AAA
12.5AAA
9.0AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

66665B
BCBB66
DBDB89
B6B571
85856C

Deuteranopia

696C5A
C3CC67
DEE28E
B7B976
87886D

Tritanopia

765857
EA6A6B
EE979A
BF7F82
8E6F70

Achromatopsia

5D5D5D
999999
C6C6C6
A7A7A7
7E7E7E

Shades & Tints Shades & Tints

#784F5F

Dark
Light

#F07860

Dark
Light

#F0C078

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #784f5f;
  --color-2: #f07860;
  --color-3: #f0c078;
  --color-4: #c0a860;
  --color-5: #8f7968;
}

SCSS

$color-1: #784f5f;
$color-2: #f07860;
$color-3: #f0c078;
$color-4: #c0a860;
$color-5: #8f7968;

TAILWIND

colors: {
  'brand-1': '#784f5f',
  'brand-2': '#f07860',
  'brand-3': '#f0c078',
  'brand-4': '#c0a860',
  'brand-5': '#8f7968',
}

RGB Array

[120, 79, 95], [240, 120, 96], [240, 192, 120], [192, 168, 96], [143, 121, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #784F5F, #F07860, #F0C078, #C0A860, #8F7968 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: #784f5f; --color-2: #f07860; --color-3: #f0c078; --color-4: #c0a860; --color-5: #8f7968. 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