← Back to Editor

#3EBABA · #5FC78A · #8FD773 · #CBEC6A · #EAEBAF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3EBABA

Slate Blue · MediumTurquoise · Mint Ice

HEX
#3EBABA
RGB
rgb(62, 186, 186)
HSL
hsl(180, 50%, 49%)
HSB
hsb(180, 67%, 73%)
CMYK
cmyk(67%, 0%, 0%, 27%)
Oklch
oklch(72.2% 0.107 195.1)

TraditionalSlate Blue」· PaintMint Ice」· Creative Blush Sunrise

#5FC78A

Celadon · MediumAquaMarine · Olive Green

HEX
#5FC78A
RGB
rgb(95, 199, 138)
HSL
hsl(145, 48%, 58%)
HSB
hsb(145, 52%, 78%)
CMYK
cmyk(52%, 0%, 31%, 22%)
Oklch
oklch(75.2% 0.132 155.6)

TraditionalCeladon」· PaintOlive Green」· Creative Blush Sunrise

#8FD773

Emerald · LightGreen · Apple Green

HEX
#8FD773
RGB
rgb(143, 215, 115)
HSL
hsl(103, 56%, 65%)
HSB
hsb(103, 47%, 84%)
CMYK
cmyk(33%, 0%, 47%, 16%)
Oklch
oklch(80.9% 0.151 137.5)

TraditionalEmerald」· PaintApple Green」· Creative Mint Breeze

#CBEC6A

Willow Green · Khaki · Apple Green

HEX
#CBEC6A
RGB
rgb(203, 236, 106)
HSL
hsl(75, 77%, 67%)
HSB
hsb(75, 55%, 93%)
CMYK
cmyk(14%, 0%, 55%, 7%)
Oklch
oklch(89.3% 0.161 121.6)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

#EAEBAF

Fresh Green · Wheat · Lemon Cream

HEX
#EAEBAF
RGB
rgb(234, 235, 175)
HSL
hsl(61, 60%, 80%)
HSB
hsb(61, 26%, 92%)
CMYK
cmyk(0%, 0%, 26%, 8%)
Oklch
oklch(92.5% 0.077 108.6)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3EBABA
BB3E3E

Analogous

3EBB7D
3EBABA
3E7DBB

Triadic

3EBABA
BB3EBB
BBBB3E

Split-Comp.

3EBABA
BB3E7D
BB7D3E

Tetradic

3EBABA
7D3EBB
BB3E3E
7DBB3E

Contrast Matrix WCAG 2.1 Contrast

3EBABA
5FC78A
8FD773
CBEC6A
EAEBAF
1.1
Fail
1.4
Fail
1.8
Fail
1.9
Fail
1.1
Fail
1.2
Fail
1.6
Fail
1.7
Fail
1.4
Fail
1.2
Fail
1.3
Fail
1.4
Fail
1.8
Fail
1.6
Fail
1.3
Fail
1.1
Fail
1.9
Fail
1.7
Fail
1.4
Fail
1.1
Fail
White BG
2.3Fail
2.1Fail
1.7Fail
1.3Fail
1.2Fail
Black BG
8.9AAA
10.0AAA
12.1AAA
15.7AAA
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7475BA
8C8D99
AEAF8B
D9DA89
EAEABE

Deuteranopia

6D63BA
867E9C
AAA591
D7D591
EAEAC1

Tritanopia

44BABA
64A4A7
939EA3
CDA2A8
EAC9CC

Achromatopsia

959595
A1A1A1
B6B6B6
D3D3D3
E4E4E4

Shades & Tints Shades & Tints

#3EBABA

Dark
Light

#5FC78A

Dark
Light

#8FD773

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3ebaba;
  --color-2: #5fc78a;
  --color-3: #8fd773;
  --color-4: #cbec6a;
  --color-5: #eaebaf;
}

SCSS

$color-1: #3ebaba;
$color-2: #5fc78a;
$color-3: #8fd773;
$color-4: #cbec6a;
$color-5: #eaebaf;

TAILWIND

colors: {
  'brand-1': '#3ebaba',
  'brand-2': '#5fc78a',
  'brand-3': '#8fd773',
  'brand-4': '#cbec6a',
  'brand-5': '#eaebaf',
}

RGB Array

[62, 186, 186], [95, 199, 138], [143, 215, 115], [203, 236, 106], [234, 235, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3EBABA, #5FC78A, #8FD773, #CBEC6A, #EAEBAF is ideal for: corporate websites, product showcases, portfolios. 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: #3ebaba; --color-2: #5fc78a; --color-3: #8fd773; --color-4: #cbec6a; --color-5: #eaebaf. 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. 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 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