← Back to Editor

#575348 · #6A786B · #73998C · #B8B089 · #A28F43

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

#575348

Ochre · DarkOliveGreen · Charcoal

HEX
#575348
RGB
rgb(87, 83, 72)
HSL
hsl(44, 9%, 31%)
HSB
hsb(44, 17%, 34%)
CMYK
cmyk(0%, 5%, 17%, 66%)
Oklch
oklch(44.3% 0.018 90.4)

Traditional「Ochre」· Paint「Charcoal」· Creative Midnight Shadow

#6A786B

Ink Gray · DimGray · Warm Gray

HEX
#6A786B
RGB
rgb(106, 120, 107)
HSL
hsl(124, 6%, 44%)
HSB
hsb(124, 12%, 47%)
CMYK
cmyk(12%, 0%, 11%, 53%)
Oklch
oklch(55.7% 0.026 147.2)

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

#73998C

Mineral Blue · LightSlateGray · Olive Green

HEX
#73998C
RGB
rgb(115, 153, 140)
HSL
hsl(159, 16%, 53%)
HSB
hsb(159, 25%, 60%)
CMYK
cmyk(25%, 0%, 8%, 40%)
Oklch
oklch(65.1% 0.046 171.8)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#B8B089

Fresh Green · Tan · Sunflower

HEX
#B8B089
RGB
rgb(184, 176, 137)
HSL
hsl(50, 25%, 63%)
HSB
hsb(50, 26%, 72%)
CMYK
cmyk(0%, 4%, 26%, 28%)
Oklch
oklch(75.4% 0.054 97.8)

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

#A28F43

Ochre · DarkGoldenRod · Honey Gold

HEX
#A28F43
RGB
rgb(162, 143, 67)
HSL
hsl(48, 41%, 45%)
HSB
hsb(48, 59%, 64%)
CMYK
cmyk(0%, 12%, 59%, 36%)
Oklch
oklch(65.1% 0.099 95.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

575348
484C56

Analogous

564B48
575348
535648

Triadic

575348
485652
524856

Split-Comp.

575348
485356
4B4856

Tetradic

575348
48564B
484C56
564853

Contrast Matrix WCAG 2.1 Contrast

575348
6A786B
73998C
B8B089
A28F43
—
1.6
Fail
2.4
Fail
3.5
AA Large
2.4
Fail
1.6
Fail
—
1.5
Fail
2.1
Fail
1.5
Fail
2.4
Fail
1.5
Fail
—
1.4
Fail
1.0
Fail
3.5
AA Large
2.1
Fail
1.4
Fail
—
1.5
Fail
2.4
Fail
1.5
Fail
1.0
Fail
1.5
Fail
—
White BG
7.7AAA
4.7AA
3.2AA Large
2.2Fail
3.2AA Large
Black BG
2.7Fail
4.5AA
6.7AA
9.6AAA
6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

55554B
70706E
83848F
B5B492
9A9A55

Deuteranopia

56564B
6F6E6F
817E90
B5B695
9B9C5A

Tritanopia

574D4D
6B7171
759292
B89A9C
A16467

Achromatopsia

535353
727272
8C8C8C
AEAEAE
8C8C8C

Shades & Tints Shades & Tints

#575348

Dark
Light

#6A786B

Dark
Light

#73998C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #575348;
  --color-2: #6a786b;
  --color-3: #73998c;
  --color-4: #b8b089;
  --color-5: #a28f43;
}

SCSS

$color-1: #575348;
$color-2: #6a786b;
$color-3: #73998c;
$color-4: #b8b089;
$color-5: #a28f43;

TAILWIND

colors: {
  'brand-1': '#575348',
  'brand-2': '#6a786b',
  'brand-3': '#73998c',
  'brand-4': '#b8b089',
  'brand-5': '#a28f43',
}

RGB Array

[87, 83, 72], [106, 120, 107], [115, 153, 140], [184, 176, 137], [162, 143, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #575348, #6A786B, #73998C, #B8B089, #A28F43 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: #575348; --color-2: #6a786b; --color-3: #73998c; --color-4: #b8b089; --color-5: #a28f43. 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