← Back to Editor

#5F90B5 · #6FA8D4 · #9AD46F · #FFFFFF · #EBBF5E

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

#5F90B5

Slate Blue · CadetBlue · Navy Blue

HEX
#5F90B5
RGB
rgb(95, 144, 181)
HSL
hsl(206, 37%, 54%)
HSB
hsb(206, 48%, 71%)
CMYK
cmyk(48%, 20%, 0%, 29%)
Oklch
oklch(63.3% 0.077 242.1)

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

#6FA8D4

Sky Blue · CornflowerBlue · Cobalt Blue

HEX
#6FA8D4
RGB
rgb(111, 168, 212)
HSL
hsl(206, 54%, 63%)
HSB
hsb(206, 48%, 83%)
CMYK
cmyk(48%, 21%, 0%, 17%)
Oklch
oklch(70.9% 0.088 242.7)

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

#9AD46F

Emerald · DarkSeaGreen · Apple Green

HEX
#9AD46F
RGB
rgb(154, 212, 111)
HSL
hsl(94, 54%, 63%)
HSB
hsb(94, 48%, 83%)
CMYK
cmyk(27%, 0%, 48%, 17%)
Oklch
oklch(80.7% 0.145 133.3)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#EBBF5E

Ginger · SandyBrown · Sunflower

HEX
#EBBF5E
RGB
rgb(235, 191, 94)
HSL
hsl(41, 78%, 65%)
HSB
hsb(41, 60%, 92%)
CMYK
cmyk(0%, 19%, 60%, 8%)
Oklch
oklch(82.5% 0.125 84.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F90B5
B5845E

Analogous

5EB5AF
5F90B5
5E64B5

Triadic

5F90B5
B55E8F
8FB55E

Split-Comp.

5F90B5
B55E64
B5AF5E

Tetradic

5F90B5
AF5EB5
B5845E
64B55E

Contrast Matrix WCAG 2.1 Contrast

5F90B5
6FA8D4
9AD46F
FFFFFF
EBBF5E
—
1.3
Fail
2.0
Fail
3.4
AA Large
2.0
Fail
1.3
Fail
—
1.5
Fail
2.6
Fail
1.5
Fail
2.0
Fail
1.5
Fail
—
1.7
Fail
1.0
Fail
3.4
AA Large
2.6
Fail
1.7
Fail
—
1.7
Fail
2.0
Fail
1.5
Fail
1.0
Fail
1.7
Fail
—
White BG
3.4AA Large
2.6Fail
1.7Fail
1.0Fail
1.7Fail
Black BG
6.1AA
8.2AAA
12.0AAA
21.0AAA
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7475AC
8888C9
B3B487
FFFFFF
D8D875

Deuteranopia

716EAA
8480C7
B0AB8D
FFFFFF
DBDE7B

Tritanopia

61A5A3
72C1BF
9D9B9F
FFFFFF
E9888C

Achromatopsia

868686
9C9C9C
B7B7B7
FFFFFF
C1C1C1

Shades & Tints Shades & Tints

#5F90B5

Dark
Light

#6FA8D4

Dark
Light

#9AD46F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f90b5;
  --color-2: #6fa8d4;
  --color-3: #9ad46f;
  --color-4: #ffffff;
  --color-5: #ebbf5e;
}

SCSS

$color-1: #5f90b5;
$color-2: #6fa8d4;
$color-3: #9ad46f;
$color-4: #ffffff;
$color-5: #ebbf5e;

TAILWIND

colors: {
  'brand-1': '#5f90b5',
  'brand-2': '#6fa8d4',
  'brand-3': '#9ad46f',
  'brand-4': '#ffffff',
  'brand-5': '#ebbf5e',
}

RGB Array

[95, 144, 181], [111, 168, 212], [154, 212, 111], [255, 255, 255], [235, 191, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #5F90B5, #6FA8D4, #9AD46F, #FFFFFF, #EBBF5E is ideal for: health products, baby brands, fresh-style blogs, 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: #5f90b5; --color-2: #6fa8d4; --color-3: #9ad46f; --color-4: #ffffff; --color-5: #ebbf5e. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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