← Back to Editor

#71B3BD · #13576C · #66CCCC · #F2FBDB · #9CEDDA

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

#71B3BD

Slate Blue · MediumAquaMarine · Lake Green

HEX
#71B3BD
RGB
rgb(113, 179, 189)
HSL
hsl(188, 37%, 59%)
HSB
hsb(188, 40%, 74%)
CMYK
cmyk(40%, 5%, 0%, 26%)
Oklch
oklch(72.6% 0.069 207.9)

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

#13576C

Lake Blue · DarkSlateGray · Peacock Green

HEX
#13576C
RGB
rgb(19, 87, 108)
HSL
hsl(194, 70%, 25%)
HSB
hsb(194, 82%, 42%)
CMYK
cmyk(82%, 19%, 0%, 58%)
Oklch
oklch(42.6% 0.073 223.8)

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

#66CCCC

Slate Blue · MediumTurquoise · Lake Green

HEX
#66CCCC
RGB
rgb(102, 204, 204)
HSL
hsl(180, 50%, 60%)
HSB
hsb(180, 50%, 80%)
CMYK
cmyk(50%, 0%, 0%, 20%)
Oklch
oklch(78.5% 0.095 195.4)

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

#F2FBDB

Willow Green · Beige · Mint Green

HEX
#F2FBDB
RGB
rgb(242, 251, 219)
HSL
hsl(77, 80%, 92%)
HSB
hsb(77, 13%, 98%)
CMYK
cmyk(4%, 0%, 13%, 2%)
Oklch
oklch(97.3% 0.043 120.0)

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

#9CEDDA

Jade · LightBlue · Glacier Blue

HEX
#9CEDDA
RGB
rgb(156, 237, 218)
HSL
hsl(166, 69%, 77%)
HSB
hsb(166, 34%, 93%)
CMYK
cmyk(34%, 0%, 8%, 7%)
Oklch
oklch(88.9% 0.084 177.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71B3BD
BD7A70

Analogous

70BDA1
71B3BD
708CBD

Triadic

71B3BD
BD70B3
B3BD70

Split-Comp.

71B3BD
BD708C
BDA170

Tetradic

71B3BD
A170BD
BD7A70
8CBD70

Contrast Matrix WCAG 2.1 Contrast

71B3BD
13576C
66CCCC
F2FBDB
9CEDDA
—
3.4
AA Large
1.2
Fail
2.2
Fail
1.7
Fail
3.4
AA Large
—
4.2
AA Large
7.5
AAA
6.0
AA
1.2
Fail
4.2
AA Large
—
1.8
Fail
1.4
Fail
2.2
Fail
7.5
AAA
1.8
Fail
—
1.3
Fail
1.7
Fail
6.0
AA
1.4
Fail
1.3
Fail
—
White BG
2.4Fail
8.1AAA
1.9Fail
1.1Fail
1.4Fail
Black BG
8.9AAA
2.6Fail
11.1AAA
19.6AAA
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8EBB
303167
9293CC
F6F6E3
BFC0DF

Deuteranopia

8A85BA
2D2766
8C85CC
F5F5E5
BAB4E0

Tritanopia

74B9B8
166362
6BCCCC
F2E9EA
A0E2E3

Achromatopsia

A0A0A0
454545
AEAEAE
F5F5F5
D3D3D3

Shades & Tints Shades & Tints

#71B3BD

Dark
Light

#13576C

Dark
Light

#66CCCC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71b3bd;
  --color-2: #13576c;
  --color-3: #66cccc;
  --color-4: #f2fbdb;
  --color-5: #9cedda;
}

SCSS

$color-1: #71b3bd;
$color-2: #13576c;
$color-3: #66cccc;
$color-4: #f2fbdb;
$color-5: #9cedda;

TAILWIND

colors: {
  'brand-1': '#71b3bd',
  'brand-2': '#13576c',
  'brand-3': '#66cccc',
  'brand-4': '#f2fbdb',
  'brand-5': '#9cedda',
}

RGB Array

[113, 179, 189], [19, 87, 108], [102, 204, 204], [242, 251, 219], [156, 237, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #71B3BD, #13576C, #66CCCC, #F2FBDB, #9CEDDA 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: #71b3bd; --color-2: #13576c; --color-3: #66cccc; --color-4: #f2fbdb; --color-5: #9cedda. 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