← Back to Editor

#67C9CC · #E0F2F4 · #5DA35D · #143D2B · #37A0BD

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

#67C9CC

Slate Blue · MediumTurquoise · Lake Green

HEX
#67C9CC
RGB
rgb(103, 201, 204)
HSL
hsl(182, 50%, 60%)
HSB
hsb(182, 50%, 80%)
CMYK
cmyk(50%, 1%, 0%, 20%)
Oklch
oklch(77.8% 0.092 198.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#E0F2F4

Sky Blue · Lavender · Glacier Blue

HEX
#E0F2F4
RGB
rgb(224, 242, 244)
HSL
hsl(186, 48%, 92%)
HSB
hsb(186, 8%, 96%)
CMYK
cmyk(8%, 1%, 0%, 4%)
Oklch
oklch(94.8% 0.019 204.8)

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

#5DA35D

Celadon · MediumSeaGreen · Olive Green

HEX
#5DA35D
RGB
rgb(93, 163, 93)
HSL
hsl(120, 28%, 50%)
HSB
hsb(120, 43%, 64%)
CMYK
cmyk(43%, 0%, 43%, 36%)
Oklch
oklch(65.2% 0.124 144.0)

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

#143D2B

Mineral Blue · DarkSlateGray · Dark Green

HEX
#143D2B
RGB
rgb(20, 61, 43)
HSL
hsl(154, 51%, 16%)
HSB
hsb(154, 67%, 24%)
CMYK
cmyk(67%, 0%, 30%, 76%)
Oklch
oklch(32.5% 0.056 161.7)

Traditional「Mineral Blue」· Paint「Dark Green」· Creative Blush Sunrise

#37A0BD

Lake Blue · SteelBlue · Mint Ice

HEX
#37A0BD
RGB
rgb(55, 160, 189)
HSL
hsl(193, 55%, 48%)
HSB
hsb(193, 71%, 74%)
CMYK
cmyk(71%, 15%, 0%, 26%)
Oklch
oklch(65.8% 0.103 220.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

67C9CC
CC6966

Analogous

66CC9C
67C9CC
6696CC

Triadic

67C9CC
CC66C9
C9CC66

Split-Comp.

67C9CC
CC6696
CC9C66

Tetradic

67C9CC
9C66CC
CC6966
96CC66

Contrast Matrix WCAG 2.1 Contrast

67C9CC
E0F2F4
5DA35D
143D2B
37A0BD
—
1.7
Fail
1.6
Fail
6.2
AA
1.6
Fail
1.7
Fail
—
2.6
Fail
10.5
AAA
2.6
Fail
1.6
Fail
2.6
Fail
—
4.0
AA Large
1.0
Fail
6.2
AA
10.5
AAA
4.0
AA Large
—
4.0
AA Large
1.6
Fail
2.6
Fail
1.0
Fail
4.0
AA Large
—
White BG
1.9Fail
1.2Fail
3.1AA Large
12.1AAA
3.0AA Large
Black BG
10.8AAA
18.2AAA
6.9AA
1.7Fail
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9192CB
E8E8F4
7B7C6E
26262F
6465B6

Deuteranopia

8C84CB
E7E5F3
777272
232030
5E57B4

Tritanopia

6CCBCB
E1F3F3
617B7E
163334
3CB0AF

Achromatopsia

ACACAC
EDEDED
868686
2F2F2F
848484

Shades & Tints Shades & Tints

#67C9CC

Dark
Light

#E0F2F4

Dark
Light

#5DA35D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #67c9cc;
  --color-2: #e0f2f4;
  --color-3: #5da35d;
  --color-4: #143d2b;
  --color-5: #37a0bd;
}

SCSS

$color-1: #67c9cc;
$color-2: #e0f2f4;
$color-3: #5da35d;
$color-4: #143d2b;
$color-5: #37a0bd;

TAILWIND

colors: {
  'brand-1': '#67c9cc',
  'brand-2': '#e0f2f4',
  'brand-3': '#5da35d',
  'brand-4': '#143d2b',
  'brand-5': '#37a0bd',
}

RGB Array

[103, 201, 204], [224, 242, 244], [93, 163, 93], [20, 61, 43], [55, 160, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #67C9CC, #E0F2F4, #5DA35D, #143D2B, #37A0BD 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: #67c9cc; --color-2: #e0f2f4; --color-3: #5da35d; --color-4: #143d2b; --color-5: #37a0bd. 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