← Back to Editor

#8B7C73 · #625755 · #3A2C34 · #D61379 · #DAD0B9

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 WebsiteBlogData Visualization

Color Details Color Details

#8B7C73

Tangerine · Gray · Warm Gray

HEX
#8B7C73
RGB
rgb(139, 124, 115)
HSL
hsl(23, 9%, 50%)
HSB
hsb(23, 17%, 55%)
CMYK
cmyk(0%, 11%, 17%, 45%)
Oklch
oklch(59.7% 0.023 53.0)

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

#625755

Ink Gray · DimGray · Charcoal

HEX
#625755
RGB
rgb(98, 87, 85)
HSL
hsl(9, 7%, 36%)
HSB
hsb(9, 13%, 38%)
CMYK
cmyk(0%, 11%, 13%, 62%)
Oklch
oklch(46.7% 0.015 30.0)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#3A2C34

Rose Purple · DarkSlateGray · Raspberry

HEX
#3A2C34
RGB
rgb(58, 44, 52)
HSL
hsl(326, 14%, 20%)
HSB
hsb(326, 24%, 23%)
CMYK
cmyk(0%, 24%, 10%, 77%)
Oklch
oklch(31.2% 0.024 343.4)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#D61379

Rose Purple · MediumVioletRed · Camellia

HEX
#D61379
RGB
rgb(214, 19, 121)
HSL
hsl(329, 84%, 46%)
HSB
hsb(329, 91%, 84%)
CMYK
cmyk(0%, 91%, 43%, 16%)
Oklch
oklch(57.5% 0.227 357.6)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#DAD0B9

Goose Yellow · LightGray · Lemon Cream

HEX
#DAD0B9
RGB
rgb(218, 208, 185)
HSL
hsl(42, 31%, 79%)
HSB
hsb(42, 15%, 85%)
CMYK
cmyk(0%, 5%, 15%, 15%)
Oklch
oklch(86.0% 0.033 87.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8B7C73
74828B

Analogous

8B7477
8B7C73
8B8874

Triadic

8B7C73
748B7D
7D748B

Split-Comp.

8B7C73
748B88
74778B

Tetradic

8B7C73
778B74
74828B
88748B

Contrast Matrix WCAG 2.1 Contrast

8B7C73
625755
3A2C34
D61379
DAD0B9
—
1.7
Fail
3.3
AA Large
1.2
Fail
2.6
Fail
1.7
Fail
—
1.9
Fail
1.4
Fail
4.5
AA
3.3
AA Large
1.9
Fail
—
2.7
Fail
8.6
AAA
1.2
Fail
1.4
Fail
2.7
Fail
—
3.2
AA Large
2.6
Fail
4.5
AA
8.6
AAA
3.2
AA Large
—
White BG
4.0AA Large
7.0AA
13.2AAA
5.0AA
1.5Fail
Black BG
5.2AA
3.0AA Large
1.6Fail
4.2AA Large
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

858475
5D5D55
343432
828060
D6D6BF

Deuteranopia

858776
5E5F56
353632
8D9B5A
D6D7C0

Tritanopia

8A7777
615656
393130
CC4D49
DAC3C4

Achromatopsia

7F7F7F
5A5A5A
313131
595959
D0D0D0

Shades & Tints Shades & Tints

#8B7C73

Dark
Light

#625755

Dark
Light

#3A2C34

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8b7c73;
  --color-2: #625755;
  --color-3: #3a2c34;
  --color-4: #d61379;
  --color-5: #dad0b9;
}

SCSS

$color-1: #8b7c73;
$color-2: #625755;
$color-3: #3a2c34;
$color-4: #d61379;
$color-5: #dad0b9;

TAILWIND

colors: {
  'brand-1': '#8b7c73',
  'brand-2': '#625755',
  'brand-3': '#3a2c34',
  'brand-4': '#d61379',
  'brand-5': '#dad0b9',
}

RGB Array

[139, 124, 115], [98, 87, 85], [58, 44, 52], [214, 19, 121], [218, 208, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #8B7C73, #625755, #3A2C34, #D61379, #DAD0B9 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #8b7c73; --color-2: #625755; --color-3: #3a2c34; --color-4: #d61379; --color-5: #dad0b9. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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