← Back to Editor

#76A5FF · #4372DC · #345ABF · #567442 · #504740

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

#76A5FF

Azure · CornflowerBlue · Cobalt Blue

HEX
#76A5FF
RGB
rgb(118, 165, 255)
HSL
hsl(219, 100%, 73%)
HSB
hsb(219, 54%, 100%)
CMYK
cmyk(54%, 35%, 0%, 0%)
Oklch
oklch(72.7% 0.141 262.5)

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

#4372DC

Azure · SteelBlue · Navy Blue

HEX
#4372DC
RGB
rgb(67, 114, 220)
HSL
hsl(222, 69%, 56%)
HSB
hsb(222, 70%, 86%)
CMYK
cmyk(70%, 48%, 0%, 14%)
Oklch
oklch(57.5% 0.170 263.9)

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

#345ABF

Indigo · SteelBlue · Navy Blue

HEX
#345ABF
RGB
rgb(52, 90, 191)
HSL
hsl(224, 57%, 48%)
HSB
hsb(224, 73%, 75%)
CMYK
cmyk(73%, 53%, 0%, 25%)
Oklch
oklch(49.8% 0.165 265.3)

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

#567442

Celadon · DarkOliveGreen · Forest Green

HEX
#567442
RGB
rgb(86, 116, 66)
HSL
hsl(96, 27%, 36%)
HSB
hsb(96, 43%, 45%)
CMYK
cmyk(26%, 0%, 43%, 55%)
Oklch
oklch(52.2% 0.082 133.8)

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

#504740

Tangerine · DarkSlateGray · Amber Brown

HEX
#504740
RGB
rgb(80, 71, 64)
HSL
hsl(26, 11%, 28%)
HSB
hsb(26, 20%, 31%)
CMYK
cmyk(0%, 11%, 20%, 69%)
Oklch
oklch(40.5% 0.017 60.2)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

76A5FF
FFCF75

Analogous

75EAFF
76A5FF
8A75FF

Triadic

76A5FF
FF75A5
A5FF75

Split-Comp.

76A5FF
FF8A75
EAFF75

Tetradic

76A5FF
FF75EA
FFCF75
75FF8A

Contrast Matrix WCAG 2.1 Contrast

76A5FF
4372DC
345ABF
567442
504740
—
1.8
Fail
2.6
Fail
2.2
Fail
3.7
AA Large
1.8
Fail
—
1.4
Fail
1.2
Fail
2.0
Fail
2.6
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
2.2
Fail
1.2
Fail
1.2
Fail
—
1.7
Fail
3.7
AA Large
2.0
Fail
1.5
Fail
1.7
Fail
—
White BG
2.4Fail
4.5AA Large
6.2AA
5.3AA
9.1AAA
Black BG
8.6AAA
4.7AA
3.4AA Large
4.0AA Large
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8BE9
5758C2
4445A7
63634E
4C4C42

Deuteranopia

8884E4
5551BC
423FA1
615F51
4D4D42

Tritanopia

78D8D4
45AEAA
36938F
58585A
504343

Achromatopsia

A1A1A1
707070
5A5A5A
656565
494949

Shades & Tints Shades & Tints

#76A5FF

Dark
Light

#4372DC

Dark
Light

#345ABF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #76a5ff;
  --color-2: #4372dc;
  --color-3: #345abf;
  --color-4: #567442;
  --color-5: #504740;
}

SCSS

$color-1: #76a5ff;
$color-2: #4372dc;
$color-3: #345abf;
$color-4: #567442;
$color-5: #504740;

TAILWIND

colors: {
  'brand-1': '#76a5ff',
  'brand-2': '#4372dc',
  'brand-3': '#345abf',
  'brand-4': '#567442',
  'brand-5': '#504740',
}

RGB Array

[118, 165, 255], [67, 114, 220], [52, 90, 191], [86, 116, 66], [80, 71, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #76A5FF, #4372DC, #345ABF, #567442, #504740 is ideal for: 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: #76a5ff; --color-2: #4372dc; --color-3: #345abf; --color-4: #567442; --color-5: #504740. 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. 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