← Back to Editor

#3DBDB8 · #77E6E2 · #BEE2EB · #F5EBDC · #E1F7F4

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#3DBDB8

Mineral Blue · MediumTurquoise · Mint Ice

HEX
#3DBDB8
RGB
rgb(61, 189, 184)
HSL
hsl(178, 51%, 49%)
HSB
hsb(178, 68%, 74%)
CMYK
cmyk(68%, 0%, 3%, 26%)
Oklch
oklch(72.9% 0.109 191.2)

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

#77E6E2

Jade · SkyBlue · Lake Green

HEX
#77E6E2
RGB
rgb(119, 230, 226)
HSL
hsl(178, 69%, 68%)
HSB
hsb(178, 48%, 90%)
CMYK
cmyk(48%, 0%, 2%, 10%)
Oklch
oklch(85.8% 0.102 192.3)

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

#BEE2EB

Sky Blue · LightBlue · Glacier Blue

HEX
#BEE2EB
RGB
rgb(190, 226, 235)
HSL
hsl(192, 53%, 83%)
HSB
hsb(192, 19%, 92%)
CMYK
cmyk(19%, 4%, 0%, 8%)
Oklch
oklch(89.0% 0.040 214.5)

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

#F5EBDC

Goose Yellow · Beige · Peach Orange

HEX
#F5EBDC
RGB
rgb(245, 235, 220)
HSL
hsl(36, 56%, 91%)
HSB
hsb(36, 10%, 96%)
CMYK
cmyk(0%, 4%, 10%, 4%)
Oklch
oklch(94.4% 0.023 78.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E1F7F4

Jade · Lavender · Glacier Blue

HEX
#E1F7F4
RGB
rgb(225, 247, 244)
HSL
hsl(172, 58%, 93%)
HSB
hsb(172, 9%, 97%)
CMYK
cmyk(9%, 0%, 1%, 3%)
Oklch
oklch(95.9% 0.023 186.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3DBDB8
BD3D41

Analogous

3DBD79
3DBDB8
3D81BD

Triadic

3DBDB8
B83DBD
BDB83D

Split-Comp.

3DBDB8
BD3D81
BD793D

Tetradic

3DBDB8
793DBD
BD3D41
81BD3D

Contrast Matrix WCAG 2.1 Contrast

3DBDB8
77E6E2
BEE2EB
F5EBDC
E1F7F4
—
1.5
Fail
1.7
Fail
1.9
Fail
2.1
Fail
1.5
Fail
—
1.1
Fail
1.3
Fail
1.3
Fail
1.7
Fail
1.1
Fail
—
1.2
Fail
1.2
Fail
1.9
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
2.1
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
White BG
2.3Fail
1.5Fail
1.4Fail
1.2Fail
1.1Fail
Black BG
9.2AAA
14.2AAA
15.3AAA
17.8AAA
18.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7476B9
A7A8E3
CECEE9
F1F1E0
EBEBF5

Deuteranopia

6D63B9
A198E3
CCC9E8
F1F2E1
E9E8F5

Tritanopia

43BABA
7DE4E4
C0E7E7
F5E2E3
E2F5F5

Achromatopsia

969696
C4C4C4
D8D8D8
ECECEC
F0F0F0

Shades & Tints Shades & Tints

#3DBDB8

Dark
Light

#77E6E2

Dark
Light

#BEE2EB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3dbdb8;
  --color-2: #77e6e2;
  --color-3: #bee2eb;
  --color-4: #f5ebdc;
  --color-5: #e1f7f4;
}

SCSS

$color-1: #3dbdb8;
$color-2: #77e6e2;
$color-3: #bee2eb;
$color-4: #f5ebdc;
$color-5: #e1f7f4;

TAILWIND

colors: {
  'brand-1': '#3dbdb8',
  'brand-2': '#77e6e2',
  'brand-3': '#bee2eb',
  'brand-4': '#f5ebdc',
  'brand-5': '#e1f7f4',
}

RGB Array

[61, 189, 184], [119, 230, 226], [190, 226, 235], [245, 235, 220], [225, 247, 244]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3DBDB8, #77E6E2, #BEE2EB, #F5EBDC, #E1F7F4 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: #3dbdb8; --color-2: #77e6e2; --color-3: #bee2eb; --color-4: #f5ebdc; --color-5: #e1f7f4. 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 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