← Back to Editor

#3C5557 · #686E5E · #B0A487 · #4A3A47 · #66505D

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

#3C5557

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3C5557
RGB
rgb(60, 85, 87)
HSL
hsl(184, 18%, 29%)
HSB
hsb(184, 31%, 34%)
CMYK
cmyk(31%, 2%, 0%, 66%)
Oklch
oklch(43.0% 0.030 202.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#686E5E

Grass Green · DimGray · Charcoal

HEX
#686E5E
RGB
rgb(104, 110, 94)
HSL
hsl(83, 8%, 40%)
HSB
hsb(83, 15%, 43%)
CMYK
cmyk(5%, 0%, 15%, 57%)
Oklch
oklch(52.8% 0.025 124.0)

Traditional「Grass Green」· Paint「Charcoal」· Creative Midnight Shadow

#B0A487

Ginger · DarkGray · Sunflower

HEX
#B0A487
RGB
rgb(176, 164, 135)
HSL
hsl(42, 21%, 61%)
HSB
hsb(42, 23%, 69%)
CMYK
cmyk(0%, 7%, 23%, 31%)
Oklch
oklch(72.1% 0.043 88.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#4A3A47

Rose Purple · DarkSlateGray · Eggplant

HEX
#4A3A47
RGB
rgb(74, 58, 71)
HSL
hsl(311, 12%, 26%)
HSB
hsb(311, 22%, 29%)
CMYK
cmyk(0%, 22%, 4%, 71%)
Oklch
oklch(37.1% 0.031 332.7)

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

#66505D

Rose Purple · DimGray · Camellia

HEX
#66505D
RGB
rgb(102, 80, 93)
HSL
hsl(325, 12%, 36%)
HSB
hsb(325, 22%, 40%)
CMYK
cmyk(0%, 22%, 9%, 60%)
Oklch
oklch(45.8% 0.035 342.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C5557
573E3D

Analogous

3D574C
3C5557
3D4857

Triadic

3C5557
573D55
55573D

Split-Comp.

3C5557
573D48
574C3D

Tetradic

3C5557
4C3D57
573E3D
48573D

Contrast Matrix WCAG 2.1 Contrast

3C5557
686E5E
B0A487
4A3A47
66505D
—
1.5
Fail
3.2
AA Large
1.3
Fail
1.1
Fail
1.5
Fail
—
2.1
Fail
2.0
Fail
1.4
Fail
3.2
AA Large
2.1
Fail
—
4.3
AA Large
3.0
Fail
1.3
Fail
2.0
Fail
4.3
AA Large
—
1.4
Fail
1.1
Fail
1.4
Fail
3.0
Fail
1.4
Fail
—
White BG
8.0AAA
5.3AA
2.5Fail
10.6AAA
7.3AAA
Black BG
2.6Fail
4.0AA Large
8.5AAA
2.0Fail
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

474757
6B6B62
ABAB8E
434344
5C5C5A

Deuteranopia

454456
6A6A63
ACAC90
444543
5E5F59

Tritanopia

3D5656
686566
AF9495
494141
655757

Achromatopsia

4E4E4E
6A6A6A
A4A4A4
404040
585858

Shades & Tints Shades & Tints

#3C5557

Dark
Light

#686E5E

Dark
Light

#B0A487

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c5557;
  --color-2: #686e5e;
  --color-3: #b0a487;
  --color-4: #4a3a47;
  --color-5: #66505d;
}

SCSS

$color-1: #3c5557;
$color-2: #686e5e;
$color-3: #b0a487;
$color-4: #4a3a47;
$color-5: #66505d;

TAILWIND

colors: {
  'brand-1': '#3c5557',
  'brand-2': '#686e5e',
  'brand-3': '#b0a487',
  'brand-4': '#4a3a47',
  'brand-5': '#66505d',
}

RGB Array

[60, 85, 87], [104, 110, 94], [176, 164, 135], [74, 58, 71], [102, 80, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #3C5557, #686E5E, #B0A487, #4A3A47, #66505D is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. 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: #3c5557; --color-2: #686e5e; --color-3: #b0a487; --color-4: #4a3a47; --color-5: #66505d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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