← Back to Editor

#6E6C71 · #060805 · #1E2F4D · #334462 · #B5CCDC

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

#6E6C71

Ink Gray · DimGray · Warm Gray

HEX
#6E6C71
RGB
rgb(110, 108, 113)
HSL
hsl(264, 2%, 43%)
HSB
hsb(264, 4%, 44%)
CMYK
cmyk(3%, 4%, 0%, 56%)
Oklch
oklch(53.5% 0.008 304.1)

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

#060805

Celadon · Black · Dark Green

HEX
#060805
RGB
rgb(6, 8, 5)
HSL
hsl(100, 23%, 3%)
HSB
hsb(100, 38%, 3%)
CMYK
cmyk(25%, 0%, 37%, 97%)
Oklch
oklch(13.0% 0.009 134.1)

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

#1E2F4D

Indigo · DarkSlateGray · Prussian Blue

HEX
#1E2F4D
RGB
rgb(30, 47, 77)
HSL
hsl(218, 44%, 21%)
HSB
hsb(218, 61%, 30%)
CMYK
cmyk(61%, 39%, 0%, 70%)
Oklch
oklch(30.6% 0.059 261.1)

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

#334462

Indigo · DarkSlateGray · Prussian Blue

HEX
#334462
RGB
rgb(51, 68, 98)
HSL
hsl(218, 32%, 29%)
HSB
hsb(218, 48%, 38%)
CMYK
cmyk(48%, 31%, 0%, 62%)
Oklch
oklch(38.6% 0.056 261.4)

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

#B5CCDC

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#B5CCDC
RGB
rgb(181, 204, 220)
HSL
hsl(205, 36%, 79%)
HSB
hsb(205, 18%, 86%)
CMYK
cmyk(18%, 7%, 0%, 14%)
Oklch
oklch(83.3% 0.034 238.2)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6E6C71
6E706B

Analogous

6B6C70
6E6C71
6F6B70

Triadic

6E6C71
706D6B
6B706D

Split-Comp.

6E6C71
706F6B
6C706B

Tetradic

6E6C71
706B6C
6E706B
6B706F

Contrast Matrix WCAG 2.1 Contrast

6E6C71
060805
1E2F4D
334462
B5CCDC
—
3.9
AA Large
2.6
Fail
1.9
Fail
3.1
AA Large
3.9
AA Large
—
1.5
Fail
2.1
Fail
12.1
AAA
2.6
Fail
1.5
Fail
—
1.4
Fail
8.1
AAA
1.9
Fail
2.1
Fail
1.4
Fail
—
5.9
AA
3.1
AA Large
12.1
AAA
8.1
AAA
5.9
AA
—
White BG
5.2AA
20.1AAA
13.4AAA
9.8AAA
1.7Fail
Black BG
4.0AA Large
1.0Fail
1.6Fail
2.1Fail
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D70
070706
252646
3A3B5B
BFBFD8

Deuteranopia

6D6D70
070706
242344
393859
BEBCD7

Tritanopia

6E6F6F
060606
1F403F
345554
B6D5D4

Achromatopsia

6D6D6D
070707
2D2D2D
424242
C7C7C7

Shades & Tints Shades & Tints

#6E6C71

Dark
Light

#060805

Dark
Light

#1E2F4D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6e6c71;
  --color-2: #060805;
  --color-3: #1e2f4d;
  --color-4: #334462;
  --color-5: #b5ccdc;
}

SCSS

$color-1: #6e6c71;
$color-2: #060805;
$color-3: #1e2f4d;
$color-4: #334462;
$color-5: #b5ccdc;

TAILWIND

colors: {
  'brand-1': '#6e6c71',
  'brand-2': '#060805',
  'brand-3': '#1e2f4d',
  'brand-4': '#334462',
  'brand-5': '#b5ccdc',
}

RGB Array

[110, 108, 113], [6, 8, 5], [30, 47, 77], [51, 68, 98], [181, 204, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #6E6C71, #060805, #1E2F4D, #334462, #B5CCDC is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #6e6c71; --color-2: #060805; --color-3: #1e2f4d; --color-4: #334462; --color-5: #b5ccdc. 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 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