← Back to Editor

#E7F1F3 · #B2EEFF · #79DD93 · #14718A · #045F25

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#E7F1F3

Sky Blue · Lavender · Glacier Blue

HEX
#E7F1F3
RGB
rgb(231, 241, 243)
HSL
hsl(190, 33%, 93%)
HSB
hsb(190, 5%, 95%)
CMYK
cmyk(5%, 1%, 0%, 5%)
Oklch
oklch(95.1% 0.011 211.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#B2EEFF

Sky Blue · LightBlue · Glacier Blue

HEX
#B2EEFF
RGB
rgb(178, 238, 255)
HSL
hsl(193, 100%, 85%)
HSB
hsb(193, 30%, 100%)
CMYK
cmyk(30%, 7%, 0%, 0%)
Oklch
oklch(91.4% 0.065 217.1)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#79DD93

Emerald · LightGreen · Apple Green

HEX
#79DD93
RGB
rgb(121, 221, 147)
HSL
hsl(136, 60%, 67%)
HSB
hsb(136, 45%, 87%)
CMYK
cmyk(45%, 0%, 33%, 13%)
Oklch
oklch(81.8% 0.141 150.7)

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

#14718A

Lake Blue · Teal · Mint Ice

HEX
#14718A
RGB
rgb(20, 113, 138)
HSL
hsl(193, 75%, 31%)
HSB
hsb(193, 86%, 54%)
CMYK
cmyk(86%, 18%, 0%, 46%)
Oklch
oklch(51.0% 0.089 221.6)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#045F25

Pine Green · DarkGreen · Dark Green

HEX
#045F25
RGB
rgb(4, 95, 37)
HSL
hsl(142, 92%, 19%)
HSB
hsb(142, 96%, 37%)
CMYK
cmyk(96%, 0%, 61%, 63%)
Oklch
oklch(42.4% 0.119 148.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7F1F3
F3E9E7

Analogous

E7F3EF
E7F1F3
E7EBF3

Triadic

E7F1F3
F3E7F1
F1F3E7

Split-Comp.

E7F1F3
F3E7EB
F3EFE7

Tetradic

E7F1F3
EFE7F3
F3E9E7
EBF3E7

Contrast Matrix WCAG 2.1 Contrast

E7F1F3
B2EEFF
79DD93
14718A
045F25
—
1.1
Fail
1.5
Fail
4.9
AA
6.8
AA
1.1
Fail
—
1.3
Fail
4.4
AA Large
6.2
AA
1.5
Fail
1.3
Fail
—
3.3
AA Large
4.7
AA
4.9
AA
4.4
AA Large
3.3
AA Large
—
1.4
Fail
6.8
AA
6.2
AA
4.7
AA
1.4
Fail
—
White BG
1.1Fail
1.3Fail
1.7Fail
5.6AA
7.9AAA
Black BG
18.3AAA
16.6AAA
12.6AAA
3.8AA Large
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBF3
CCCDFB
A4A5A5
3C3D84
2B2C33

Deuteranopia

EBEAF2
C9C4FA
9F97A9
373083
261F36

Tritanopia

E8F2F2
B5F8F7
7EB3B6
197F7E
093E41

Achromatopsia

EEEEEE
DEDEDE
B7B7B7
585858
3D3D3D

Shades & Tints Shades & Tints

#E7F1F3

Dark
Light

#B2EEFF

Dark
Light

#79DD93

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7f1f3;
  --color-2: #b2eeff;
  --color-3: #79dd93;
  --color-4: #14718a;
  --color-5: #045f25;
}

SCSS

$color-1: #e7f1f3;
$color-2: #b2eeff;
$color-3: #79dd93;
$color-4: #14718a;
$color-5: #045f25;

TAILWIND

colors: {
  'brand-1': '#e7f1f3',
  'brand-2': '#b2eeff',
  'brand-3': '#79dd93',
  'brand-4': '#14718a',
  'brand-5': '#045f25',
}

RGB Array

[231, 241, 243], [178, 238, 255], [121, 221, 147], [20, 113, 138], [4, 95, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #E7F1F3, #B2EEFF, #79DD93, #14718A, #045F25 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e7f1f3; --color-2: #b2eeff; --color-3: #79dd93; --color-4: #14718a; --color-5: #045f25. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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