← Back to Editor

#3EC9CC · #00353C · #7859C0 · #C0E4CA · #FFF0F4

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#3EC9CC

Lake Blue · MediumTurquoise · Lake Green

HEX
#3EC9CC
RGB
rgb(62, 201, 204)
HSL
hsl(181, 58%, 52%)
HSB
hsb(181, 70%, 80%)
CMYK
cmyk(70%, 1%, 0%, 20%)
Oklch
oklch(76.5% 0.115 197.1)

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

#00353C

Lake Blue · DarkSlateGray · Peacock Green

HEX
#00353C
RGB
rgb(0, 53, 60)
HSL
hsl(187, 100%, 12%)
HSB
hsb(187, 100%, 24%)
CMYK
cmyk(100%, 12%, 0%, 76%)
Oklch
oklch(30.1% 0.052 209.0)

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

#7859C0

Deep Indigo · SlateBlue · Navy Blue

HEX
#7859C0
RGB
rgb(120, 89, 192)
HSL
hsl(258, 45%, 55%)
HSB
hsb(258, 54%, 75%)
CMYK
cmyk(38%, 54%, 0%, 25%)
Oklch
oklch(54.6% 0.155 294.6)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#C0E4CA

Celadon · LightGray · Mint Green

HEX
#C0E4CA
RGB
rgb(192, 228, 202)
HSL
hsl(137, 40%, 82%)
HSB
hsb(137, 16%, 89%)
CMYK
cmyk(16%, 0%, 11%, 11%)
Oklch
oklch(88.6% 0.052 153.9)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#FFF0F4

Rouge · SeaShell · Cherry Blossom

HEX
#FFF0F4
RGB
rgb(255, 240, 244)
HSL
hsl(344, 100%, 97%)
HSB
hsb(344, 6%, 100%)
CMYK
cmyk(0%, 6%, 4%, 0%)
Oklch
oklch(96.8% 0.017 359.3)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3EC9CC
CC403E

Analogous

3ECC87
3EC9CC
3E82CC

Triadic

3EC9CC
CC3EC9
C9CC3E

Split-Comp.

3EC9CC
CC3E82
CC873E

Tetradic

3EC9CC
873ECC
CC403E
82CC3E

Contrast Matrix WCAG 2.1 Contrast

3EC9CC
00353C
7859C0
C0E4CA
FFF0F4
—
6.6
AA
2.6
Fail
1.5
Fail
1.8
Fail
6.6
AA
—
2.5
Fail
9.6
AAA
12.1
AAA
2.6
Fail
2.5
Fail
—
3.8
AA Large
4.8
AA
1.5
Fail
9.6
AAA
3.8
AA Large
—
1.3
Fail
1.8
Fail
12.1
AAA
4.8
AA
1.3
Fail
—
White BG
2.0Fail
13.3AAA
5.3AA
1.4Fail
1.1Fail
Black BG
10.4AAA
1.6Fail
4.0AA Large
15.2AAA
19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7BCB
17173A
6B6AA7
D0D0D0
F9F8F3

Deuteranopia

7268CB
14103A
6C6FA1
CECBD2
F9FBF3

Tritanopia

45CBCB
033939
76938F
C2D5D6
FEF2F2

Achromatopsia

A0A0A0
262626
6E6E6E
D6D6D6
F5F5F5

Shades & Tints Shades & Tints

#3EC9CC

Dark
Light

#00353C

Dark
Light

#7859C0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3ec9cc;
  --color-2: #00353c;
  --color-3: #7859c0;
  --color-4: #c0e4ca;
  --color-5: #fff0f4;
}

SCSS

$color-1: #3ec9cc;
$color-2: #00353c;
$color-3: #7859c0;
$color-4: #c0e4ca;
$color-5: #fff0f4;

TAILWIND

colors: {
  'brand-1': '#3ec9cc',
  'brand-2': '#00353c',
  'brand-3': '#7859c0',
  'brand-4': '#c0e4ca',
  'brand-5': '#fff0f4',
}

RGB Array

[62, 201, 204], [0, 53, 60], [120, 89, 192], [192, 228, 202], [255, 240, 244]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3EC9CC, #00353C, #7859C0, #C0E4CA, #FFF0F4 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: #3ec9cc; --color-2: #00353c; --color-3: #7859c0; --color-4: #c0e4ca; --color-5: #fff0f4. 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