← Back to Editor

#0ECAC1 · #2BB1BD · #386CA3 · #52165D · #371231

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 App

Color Details Color Details

#0ECAC1

Mineral Blue · DarkTurquoise · Mint Ice

HEX
#0ECAC1
RGB
rgb(14, 202, 193)
HSL
hsl(177, 87%, 42%)
HSB
hsb(177, 93%, 79%)
CMYK
cmyk(93%, 0%, 4%, 21%)
Oklch
oklch(75.7% 0.130 189.1)

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

#2BB1BD

Lake Blue · LightSeaGreen · Mint Ice

HEX
#2BB1BD
RGB
rgb(43, 177, 189)
HSL
hsl(185, 63%, 45%)
HSB
hsb(185, 77%, 74%)
CMYK
cmyk(77%, 6%, 0%, 26%)
Oklch
oklch(69.7% 0.110 204.2)

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

#386CA3

Indigo · SteelBlue · Navy Blue

HEX
#386CA3
RGB
rgb(56, 108, 163)
HSL
hsl(211, 49%, 43%)
HSB
hsb(211, 66%, 64%)
CMYK
cmyk(66%, 34%, 0%, 36%)
Oklch
oklch(52.1% 0.104 251.6)

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

#52165D

Royal Purple · MidnightBlue · Eggplant

HEX
#52165D
RGB
rgb(82, 22, 93)
HSL
hsl(291, 62%, 23%)
HSB
hsb(291, 76%, 36%)
CMYK
cmyk(12%, 76%, 0%, 64%)
Oklch
oklch(33.3% 0.129 321.0)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

#371231

Rose Purple · DarkSlateGray · Dark Purple

HEX
#371231
RGB
rgb(55, 18, 49)
HSL
hsl(310, 51%, 14%)
HSB
hsb(310, 67%, 22%)
CMYK
cmyk(0%, 67%, 11%, 78%)
Oklch
oklch(25.4% 0.074 334.3)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0ECAC1
C80E17

Analogous

0EC862
0ECAC1
0E74C8

Triadic

0ECAC1
BF0EC8
C8BF0E

Split-Comp.

0ECAC1
C80E74
C8620E

Tetradic

0ECAC1
620EC8
C80E17
74C80E

Contrast Matrix WCAG 2.1 Contrast

0ECAC1
2BB1BD
386CA3
52165D
371231
—
1.3
Fail
2.7
Fail
6.3
AA
7.9
AAA
1.3
Fail
—
2.1
Fail
5.0
AA
6.3
AA
2.7
Fail
2.1
Fail
—
2.4
Fail
3.0
Fail
6.3
AA
5.0
AA
2.4
Fail
—
1.3
Fail
7.9
AAA
6.3
AA
3.0
Fail
1.3
Fail
—
White BG
2.1Fail
2.6Fail
5.5AA
12.9AAA
16.2AAA
Black BG
10.2AAA
8.1AAA
3.8AA Large
1.6Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F61C3
6566BA
4F4F96
38374C
272729

Deuteranopia

5546C4
5D53B9
4C4893
3C4048
292C28

Tritanopia

17C5C5
32B8B7
3B8B89
4F3E3B
352422

Achromatopsia

919191
8A8A8A
636363
303030
212121

Shades & Tints Shades & Tints

#0ECAC1

Dark
Light

#2BB1BD

Dark
Light

#386CA3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0ecac1;
  --color-2: #2bb1bd;
  --color-3: #386ca3;
  --color-4: #52165d;
  --color-5: #371231;
}

SCSS

$color-1: #0ecac1;
$color-2: #2bb1bd;
$color-3: #386ca3;
$color-4: #52165d;
$color-5: #371231;

TAILWIND

colors: {
  'brand-1': '#0ecac1',
  'brand-2': '#2bb1bd',
  'brand-3': '#386ca3',
  'brand-4': '#52165d',
  'brand-5': '#371231',
}

RGB Array

[14, 202, 193], [43, 177, 189], [56, 108, 163], [82, 22, 93], [55, 18, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0ECAC1, #2BB1BD, #386CA3, #52165D, #371231 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. 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: #0ecac1; --color-2: #2bb1bd; --color-3: #386ca3; --color-4: #52165d; --color-5: #371231. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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