← Back to Editor

#164773 · #0B2B40 · #1E5959 · #3B8C6E · #89D99D

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

#164773

Lake Blue · DarkSlateGray · Prussian Blue

HEX
#164773
RGB
rgb(22, 71, 115)
HSL
hsl(208, 68%, 27%)
HSB
hsb(208, 81%, 45%)
CMYK
cmyk(81%, 38%, 0%, 55%)
Oklch
oklch(38.9% 0.091 249.5)

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

#0B2B40

Lake Blue · DarkSlateGray · Deep Sea Blue

HEX
#0B2B40
RGB
rgb(11, 43, 64)
HSL
hsl(204, 71%, 15%)
HSB
hsb(204, 83%, 25%)
CMYK
cmyk(83%, 33%, 0%, 75%)
Oklch
oklch(27.7% 0.054 241.5)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#1E5959

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1E5959
RGB
rgb(30, 89, 89)
HSL
hsl(180, 50%, 23%)
HSB
hsb(180, 66%, 35%)
CMYK
cmyk(66%, 0%, 0%, 65%)
Oklch
oklch(42.6% 0.060 195.1)

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

#3B8C6E

Mineral Blue · SeaGreen · Forest Green

HEX
#3B8C6E
RGB
rgb(59, 140, 110)
HSL
hsl(158, 41%, 39%)
HSB
hsb(158, 58%, 55%)
CMYK
cmyk(58%, 0%, 21%, 45%)
Oklch
oklch(58.1% 0.092 166.1)

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

#89D99D

Emerald · LightGreen · Apple Green

HEX
#89D99D
RGB
rgb(137, 217, 157)
HSL
hsl(135, 51%, 69%)
HSB
hsb(135, 37%, 85%)
CMYK
cmyk(37%, 0%, 28%, 15%)
Oklch
oklch(81.8% 0.116 151.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

164773
744216

Analogous

167471
164773
161974

Triadic

164773
741648
487416

Split-Comp.

164773
741619
747116

Tetradic

164773
711674
744216
197416

Contrast Matrix WCAG 2.1 Contrast

164773
0B2B40
1E5959
3B8C6E
89D99D
—
1.5
Fail
1.2
Fail
2.4
Fail
5.7
AA
1.5
Fail
—
1.8
Fail
3.6
AA Large
8.7
AAA
1.2
Fail
1.8
Fail
—
2.0
Fail
4.7
AA
2.4
Fail
3.6
AA Large
2.0
Fail
—
2.4
Fail
5.7
AA
8.7
AAA
4.7
AA
2.4
Fail
—
White BG
9.6AAA
14.6AAA
8.0AAA
4.1AA Large
1.7Fail
Black BG
2.2Fail
1.4Fail
2.6Fail
5.2AA
12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2C68
19193B
383859
5E5F75
ACACAC

Deuteranopia

282566
17153A
343059
595377
A7A1AF

Tritanopia

18605E
0D3736
215959
3F7B7C
8DB7BA

Achromatopsia

3D3D3D
242424
474747
707070
BABABA

Shades & Tints Shades & Tints

#164773

Dark
Light

#0B2B40

Dark
Light

#1E5959

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #164773;
  --color-2: #0b2b40;
  --color-3: #1e5959;
  --color-4: #3b8c6e;
  --color-5: #89d99d;
}

SCSS

$color-1: #164773;
$color-2: #0b2b40;
$color-3: #1e5959;
$color-4: #3b8c6e;
$color-5: #89d99d;

TAILWIND

colors: {
  'brand-1': '#164773',
  'brand-2': '#0b2b40',
  'brand-3': '#1e5959',
  'brand-4': '#3b8c6e',
  'brand-5': '#89d99d',
}

RGB Array

[22, 71, 115], [11, 43, 64], [30, 89, 89], [59, 140, 110], [137, 217, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #164773, #0B2B40, #1E5959, #3B8C6E, #89D99D 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: #164773; --color-2: #0b2b40; --color-3: #1e5959; --color-4: #3b8c6e; --color-5: #89d99d. 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