← Back to Editor

#536C8D · #5C4F79 · #613860 · #4F8B89 · #62A07B

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

#536C8D

Indigo · SlateGray · Navy Blue

HEX
#536C8D
RGB
rgb(83, 108, 141)
HSL
hsl(214, 26%, 44%)
HSB
hsb(214, 41%, 55%)
CMYK
cmyk(41%, 23%, 0%, 45%)
Oklch
oklch(52.5% 0.060 255.6)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#5C4F79

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#5C4F79
RGB
rgb(92, 79, 121)
HSL
hsl(259, 21%, 39%)
HSB
hsb(259, 35%, 47%)
CMYK
cmyk(24%, 35%, 0%, 53%)
Oklch
oklch(45.8% 0.069 297.9)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#613860

Rose Purple · DarkSlateBlue · Eggplant

HEX
#613860
RGB
rgb(97, 56, 96)
HSL
hsl(301, 27%, 30%)
HSB
hsb(301, 42%, 38%)
CMYK
cmyk(0%, 42%, 1%, 62%)
Oklch
oklch(40.6% 0.083 327.8)

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

#4F8B89

Mineral Blue · CadetBlue · Mint Ice

HEX
#4F8B89
RGB
rgb(79, 139, 137)
HSL
hsl(178, 28%, 43%)
HSB
hsb(178, 43%, 55%)
CMYK
cmyk(43%, 0%, 1%, 45%)
Oklch
oklch(59.6% 0.063 192.8)

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

#62A07B

Celadon · CadetBlue · Olive Green

HEX
#62A07B
RGB
rgb(98, 160, 123)
HSL
hsl(144, 25%, 51%)
HSB
hsb(144, 39%, 63%)
CMYK
cmyk(39%, 0%, 23%, 37%)
Oklch
oklch(65.3% 0.085 156.9)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

536C8D
8D7453

Analogous

53898D
536C8D
57538D

Triadic

536C8D
8D536C
6C8D53

Split-Comp.

536C8D
8D5753
898D53

Tetradic

536C8D
8D5389
8D7453
538D57

Contrast Matrix WCAG 2.1 Contrast

536C8D
5C4F79
613860
4F8B89
62A07B
—
1.4
Fail
1.7
Fail
1.4
Fail
1.8
Fail
1.4
Fail
—
1.3
Fail
1.9
Fail
2.4
Fail
1.7
Fail
1.3
Fail
—
2.4
Fail
3.0
AA Large
1.4
Fail
1.9
Fail
2.4
Fail
—
1.3
Fail
1.8
Fail
2.4
Fail
3.0
AA Large
1.3
Fail
—
White BG
5.4AA
7.4AAA
9.4AAA
3.9AA Large
3.1AA Large
Black BG
3.9AA Large
2.8Fail
2.2Fail
5.4AA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E85
56566F
4F4F56
696A89
7D7D84

Deuteranopia

5C5B83
57586C
525554
66618A
797586

Tritanopia

547F7D
5B6765
5F4F4D
528A8A
658B8D

Achromatopsia

686868
585858
494949
797979
898989

Shades & Tints Shades & Tints

#536C8D

Dark
Light

#5C4F79

Dark
Light

#613860

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #536c8d;
  --color-2: #5c4f79;
  --color-3: #613860;
  --color-4: #4f8b89;
  --color-5: #62a07b;
}

SCSS

$color-1: #536c8d;
$color-2: #5c4f79;
$color-3: #613860;
$color-4: #4f8b89;
$color-5: #62a07b;

TAILWIND

colors: {
  'brand-1': '#536c8d',
  'brand-2': '#5c4f79',
  'brand-3': '#613860',
  'brand-4': '#4f8b89',
  'brand-5': '#62a07b',
}

RGB Array

[83, 108, 141], [92, 79, 121], [97, 56, 96], [79, 139, 137], [98, 160, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #536C8D, #5C4F79, #613860, #4F8B89, #62A07B 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: #536c8d; --color-2: #5c4f79; --color-3: #613860; --color-4: #4f8b89; --color-5: #62a07b. 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