← Back to Editor

#A6AFD0 · #5C6086 · #3C373E · #842E4B · #A59298

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 WebsiteBlogData Visualization

Color Details Color Details

#A6AFD0

Azure · LightSteelBlue · Cobalt Blue

HEX
#A6AFD0
RGB
rgb(166, 175, 208)
HSL
hsl(227, 31%, 73%)
HSB
hsb(227, 20%, 82%)
CMYK
cmyk(20%, 16%, 0%, 18%)
Oklch
oklch(75.8% 0.048 273.2)

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

#5C6086

Indigo · DimGray · Navy Blue

HEX
#5C6086
RGB
rgb(92, 96, 134)
HSL
hsl(234, 19%, 44%)
HSB
hsb(234, 31%, 53%)
CMYK
cmyk(31%, 28%, 0%, 47%)
Oklch
oklch(50.1% 0.061 279.3)

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

#3C373E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3C373E
RGB
rgb(60, 55, 62)
HSL
hsl(283, 6%, 23%)
HSB
hsb(283, 11%, 24%)
CMYK
cmyk(3%, 11%, 0%, 76%)
Oklch
oklch(34.5% 0.014 316.4)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#842E4B

Dark Violet · Brown · Camellia

HEX
#842E4B
RGB
rgb(132, 46, 75)
HSL
hsl(340, 48%, 35%)
HSB
hsb(340, 65%, 52%)
CMYK
cmyk(0%, 65%, 43%, 48%)
Oklch
oklch(43.5% 0.121 2.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#A59298

Rouge · DarkGray · Rose Pink

HEX
#A59298
RGB
rgb(165, 146, 152)
HSL
hsl(341, 10%, 61%)
HSB
hsb(341, 12%, 65%)
CMYK
cmyk(0%, 12%, 8%, 35%)
Oklch
oklch(67.9% 0.024 356.7)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A6AFD0
CFC6A5

Analogous

A5C3CF
A6AFD0
B1A5CF

Triadic

A6AFD0
CFA5AE
AECFA5

Split-Comp.

A6AFD0
CFB1A5
C3CFA5

Tetradic

A6AFD0
CFA5C3
CFC6A5
A5CFB1

Contrast Matrix WCAG 2.1 Contrast

A6AFD0
5C6086
3C373E
842E4B
A59298
—
2.8
Fail
5.3
AA
3.9
AA Large
1.3
Fail
2.8
Fail
—
1.9
Fail
1.4
Fail
2.1
Fail
5.3
AA
1.9
Fail
—
1.4
Fail
4.0
AA Large
3.9
AA Large
1.4
Fail
1.4
Fail
—
2.9
Fail
1.3
Fail
2.1
Fail
4.0
AA Large
2.9
Fail
—
White BG
2.2Fail
6.0AA
11.6AAA
8.5AAA
2.9Fail
Black BG
9.7AAA
3.5AA Large
1.8Fail
2.5Fail
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAAAC8
5E5E7D
3A3A3C
5F5E44
9D9D97

Deuteranopia

A9A9C6
5E5D7B
3A3B3C
646A42
9E9F96

Tritanopia

A6C2C0
5C7674
3C3B3B
803E3D
A49595

Achromatopsia

B0B0B0
636363
393939
4B4B4B
989898

Shades & Tints Shades & Tints

#A6AFD0

Dark
Light

#5C6086

Dark
Light

#3C373E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a6afd0;
  --color-2: #5c6086;
  --color-3: #3c373e;
  --color-4: #842e4b;
  --color-5: #a59298;
}

SCSS

$color-1: #a6afd0;
$color-2: #5c6086;
$color-3: #3c373e;
$color-4: #842e4b;
$color-5: #a59298;

TAILWIND

colors: {
  'brand-1': '#a6afd0',
  'brand-2': '#5c6086',
  'brand-3': '#3c373e',
  'brand-4': '#842e4b',
  'brand-5': '#a59298',
}

RGB Array

[166, 175, 208], [92, 96, 134], [60, 55, 62], [132, 46, 75], [165, 146, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #A6AFD0, #5C6086, #3C373E, #842E4B, #A59298 is ideal for: brand design, premium product pages, magazine layouts, 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: #a6afd0; --color-2: #5c6086; --color-3: #3c373e; --color-4: #842e4b; --color-5: #a59298. 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. 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. 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