← Back to Editor

#C2CCCD · #A7BABC · #78A9AE · #5EC1CB · #2FD1E2

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

#C2CCCD

Sky Blue · Silver · Glacier Blue

HEX
#C2CCCD
RGB
rgb(194, 204, 205)
HSL
hsl(185, 10%, 78%)
HSB
hsb(185, 5%, 80%)
CMYK
cmyk(5%, 0%, 0%, 20%)
Oklch
oklch(83.8% 0.011 204.1)

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

#A7BABC

Sky Blue · DarkGray · Lake Green

HEX
#A7BABC
RGB
rgb(167, 186, 188)
HSL
hsl(186, 14%, 70%)
HSB
hsb(186, 11%, 74%)
CMYK
cmyk(11%, 1%, 0%, 26%)
Oklch
oklch(77.5% 0.021 204.4)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#78A9AE

Slate Blue · CadetBlue · Lake Green

HEX
#78A9AE
RGB
rgb(120, 169, 174)
HSL
hsl(186, 25%, 58%)
HSB
hsb(186, 31%, 68%)
CMYK
cmyk(31%, 3%, 0%, 32%)
Oklch
oklch(70.2% 0.053 204.0)

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

#5EC1CB

Lake Blue · MediumTurquoise · Lake Green

HEX
#5EC1CB
RGB
rgb(94, 193, 203)
HSL
hsl(186, 51%, 58%)
HSB
hsb(186, 54%, 80%)
CMYK
cmyk(54%, 5%, 0%, 20%)
Oklch
oklch(75.5% 0.094 204.2)

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

#2FD1E2

Lake Blue · Turquoise · Lake Green

HEX
#2FD1E2
RGB
rgb(47, 209, 226)
HSL
hsl(186, 76%, 54%)
HSB
hsb(186, 79%, 89%)
CMYK
cmyk(79%, 8%, 0%, 11%)
Oklch
oklch(78.9% 0.127 205.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2CCCD
CDC2C1

Analogous

C1CDC8
C2CCCD
C1C6CD

Triadic

C2CCCD
CDC1CC
CCCDC1

Split-Comp.

C2CCCD
CDC1C6
CDC8C1

Tetradic

C2CCCD
C8C1CD
CDC2C1
C6CDC1

Contrast Matrix WCAG 2.1 Contrast

C2CCCD
A7BABC
78A9AE
5EC1CB
2FD1E2
—
1.2
Fail
1.6
Fail
1.3
Fail
1.1
Fail
1.2
Fail
—
1.3
Fail
1.0
Fail
1.1
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
1.3
Fail
1.0
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
1.4
Fail
1.1
Fail
—
White BG
1.6Fail
2.0Fail
2.6Fail
2.1Fail
1.9Fail
Black BG
12.8AAA
10.4AAA
8.1AAA
10.0AAA
11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C6CD
AFAFBC
8D8EAD
898AC9
7577DE

Deuteranopia

C6C5CD
AEADBB
8A87AD
837CC8
6C60DD

Tritanopia

C2CDCD
A8BBBB
7AACAC
63C7C6
37DBDA

Achromatopsia

C9C9C9
B5B5B5
9B9B9B
A5A5A5
A3A3A3

Shades & Tints Shades & Tints

#C2CCCD

Dark
Light

#A7BABC

Dark
Light

#78A9AE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2cccd;
  --color-2: #a7babc;
  --color-3: #78a9ae;
  --color-4: #5ec1cb;
  --color-5: #2fd1e2;
}

SCSS

$color-1: #c2cccd;
$color-2: #a7babc;
$color-3: #78a9ae;
$color-4: #5ec1cb;
$color-5: #2fd1e2;

TAILWIND

colors: {
  'brand-1': '#c2cccd',
  'brand-2': '#a7babc',
  'brand-3': '#78a9ae',
  'brand-4': '#5ec1cb',
  'brand-5': '#2fd1e2',
}

RGB Array

[194, 204, 205], [167, 186, 188], [120, 169, 174], [94, 193, 203], [47, 209, 226]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C2CCCD, #A7BABC, #78A9AE, #5EC1CB, #2FD1E2 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: #c2cccd; --color-2: #a7babc; --color-3: #78a9ae; --color-4: #5ec1cb; --color-5: #2fd1e2. 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