← Back to Editor

#E7F8F1 · #57CDCA · #14768C · #43B362 · #C6EF7D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#E7F8F1

Jade · Lavender · Mint Green

HEX
#E7F8F1
RGB
rgb(231, 248, 241)
HSL
hsl(155, 55%, 94%)
HSB
hsb(155, 7%, 97%)
CMYK
cmyk(7%, 0%, 3%, 3%)
Oklch
oklch(96.5% 0.020 169.3)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#57CDCA

Mineral Blue · MediumTurquoise · Lake Green

HEX
#57CDCA
RGB
rgb(87, 205, 202)
HSL
hsl(178, 54%, 57%)
HSB
hsb(178, 58%, 80%)
CMYK
cmyk(58%, 0%, 1%, 20%)
Oklch
oklch(78.1% 0.106 192.9)

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

#14768C

Lake Blue · Teal · Mint Ice

HEX
#14768C
RGB
rgb(20, 118, 140)
HSL
hsl(191, 75%, 31%)
HSB
hsb(191, 86%, 55%)
CMYK
cmyk(86%, 16%, 0%, 45%)
Oklch
oklch(52.4% 0.089 217.9)

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

#43B362

Celadon · MediumSeaGreen · Olive Green

HEX
#43B362
RGB
rgb(67, 179, 98)
HSL
hsl(137, 46%, 48%)
HSB
hsb(137, 63%, 70%)
CMYK
cmyk(63%, 0%, 45%, 30%)
Oklch
oklch(68.3% 0.155 149.5)

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

#C6EF7D

Willow Green · Khaki · Apple Green

HEX
#C6EF7D
RGB
rgb(198, 239, 125)
HSL
hsl(82, 78%, 71%)
HSB
hsb(82, 48%, 94%)
CMYK
cmyk(17%, 0%, 48%, 6%)
Oklch
oklch(89.9% 0.149 125.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7F8F1
F8E7EE

Analogous

E7F8E9
E7F8F1
E7F7F8

Triadic

E7F8F1
F1E7F8
F8F1E7

Split-Comp.

E7F8F1
F8E7F7
F8E9E7

Tetradic

E7F8F1
E9E7F8
F8E7EE
F7F8E7

Contrast Matrix WCAG 2.1 Contrast

E7F8F1
57CDCA
14768C
43B362
C6EF7D
—
1.7
Fail
4.8
AA
2.4
Fail
1.2
Fail
1.7
Fail
—
2.7
Fail
1.4
Fail
1.5
Fail
4.8
AA
2.7
Fail
—
2.0
Fail
4.0
AA Large
2.4
Fail
1.4
Fail
2.0
Fail
—
2.0
Fail
1.2
Fail
1.5
Fail
4.0
AA Large
2.0
Fail
—
White BG
1.1Fail
1.9Fail
5.3AA
2.7Fail
1.3Fail
Black BG
19.1AAA
11.0AAA
4.0AA Large
7.9AAA
16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEFF3
8A8BCB
3E3F87
737576
D8D899

Deuteranopia

EDECF3
837ACB
393185
6D657A
D5D29F

Tritanopia

E8F4F4
5DCBCB
198282
498588
C8AEB3

Achromatopsia

F2F2F2
A9A9A9
5B5B5B
888888
D6D6D6

Shades & Tints Shades & Tints

#E7F8F1

Dark
Light

#57CDCA

Dark
Light

#14768C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7f8f1;
  --color-2: #57cdca;
  --color-3: #14768c;
  --color-4: #43b362;
  --color-5: #c6ef7d;
}

SCSS

$color-1: #e7f8f1;
$color-2: #57cdca;
$color-3: #14768c;
$color-4: #43b362;
$color-5: #c6ef7d;

TAILWIND

colors: {
  'brand-1': '#e7f8f1',
  'brand-2': '#57cdca',
  'brand-3': '#14768c',
  'brand-4': '#43b362',
  'brand-5': '#c6ef7d',
}

RGB Array

[231, 248, 241], [87, 205, 202], [20, 118, 140], [67, 179, 98], [198, 239, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E7F8F1, #57CDCA, #14768C, #43B362, #C6EF7D 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: #e7f8f1; --color-2: #57cdca; --color-3: #14768c; --color-4: #43b362; --color-5: #c6ef7d. 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 general-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