← Back to Editor

#556270 · #213D56 · #17586A · #C7F464 · #77BB11

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#556270

Indigo · DimGray · Prussian Blue

HEX
#556270
RGB
rgb(85, 98, 112)
HSL
hsl(211, 14%, 39%)
HSB
hsb(211, 24%, 44%)
CMYK
cmyk(24%, 13%, 0%, 56%)
Oklch
oklch(49.0% 0.028 250.3)

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

#213D56

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#213D56
RGB
rgb(33, 61, 86)
HSL
hsl(208, 45%, 23%)
HSB
hsb(208, 62%, 34%)
CMYK
cmyk(62%, 29%, 0%, 66%)
Oklch
oklch(35.0% 0.056 247.1)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#17586A

Lake Blue · DarkSlateGray · Peacock Green

HEX
#17586A
RGB
rgb(23, 88, 106)
HSL
hsl(193, 64%, 25%)
HSB
hsb(193, 78%, 42%)
CMYK
cmyk(78%, 17%, 0%, 58%)
Oklch
oklch(42.9% 0.069 220.6)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#C7F464

Willow Green · Khaki · Apple Green

HEX
#C7F464
RGB
rgb(199, 244, 100)
HSL
hsl(79, 87%, 67%)
HSB
hsb(79, 59%, 96%)
CMYK
cmyk(18%, 0%, 59%, 4%)
Oklch
oklch(90.8% 0.177 124.5)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#77BB11

Grass Green · Olive · Forest Green

HEX
#77BB11
RGB
rgb(119, 187, 17)
HSL
hsl(84, 83%, 40%)
HSB
hsb(84, 91%, 73%)
CMYK
cmyk(36%, 0%, 91%, 27%)
Oklch
oklch(71.9% 0.193 131.2)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

556270
716456

Analogous

567171
556270
565671

Triadic

556270
715663
637156

Split-Comp.

556270
715656
717156

Tetradic

556270
715671
716456
567156

Contrast Matrix WCAG 2.1 Contrast

556270
213D56
17586A
C7F464
77BB11
—
1.8
Fail
1.3
Fail
4.9
AA
2.6
Fail
1.8
Fail
—
1.4
Fail
8.9
AAA
4.8
AA
1.3
Fail
1.4
Fail
—
6.3
AA
3.4
AA Large
4.9
AA
8.9
AAA
6.3
AA
—
1.9
Fail
2.6
Fail
4.8
AA
3.4
AA Large
1.9
Fail
—
White BG
6.2AA
11.3AAA
8.0AAA
1.3Fail
2.4Fail
Black BG
3.4AA Large
1.9Fail
2.6Fail
16.6AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B6D
2D2D50
333466
DADB87
94953A

Deuteranopia

5A596C
2C294F
2F2B65
D8D58F
918B44

Tritanopia

566A69
224B4A
1A6261
C9A2A8
7A5B62

Achromatopsia

606060
373737
474747
D6D6D6
939393

Shades & Tints Shades & Tints

#556270

Dark
Light

#213D56

Dark
Light

#17586A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #556270;
  --color-2: #213d56;
  --color-3: #17586a;
  --color-4: #c7f464;
  --color-5: #77bb11;
}

SCSS

$color-1: #556270;
$color-2: #213d56;
$color-3: #17586a;
$color-4: #c7f464;
$color-5: #77bb11;

TAILWIND

colors: {
  'brand-1': '#556270',
  'brand-2': '#213d56',
  'brand-3': '#17586a',
  'brand-4': '#c7f464',
  'brand-5': '#77bb11',
}

RGB Array

[85, 98, 112], [33, 61, 86], [23, 88, 106], [199, 244, 100], [119, 187, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #556270, #213D56, #17586A, #C7F464, #77BB11 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #556270; --color-2: #213d56; --color-3: #17586a; --color-4: #c7f464; --color-5: #77bb11. 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. 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. 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