← Back to Editor

#C1ECEB · #B4E0C1 · #57F3F8 · #5CA3A7 · #0D0C1E

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 LibraryData Visualization

Color Details Color Details

#C1ECEB

Jade · LightBlue · Glacier Blue

HEX
#C1ECEB
RGB
rgb(193, 236, 235)
HSL
hsl(179, 53%, 84%)
HSB
hsb(179, 18%, 93%)
CMYK
cmyk(18%, 0%, 0%, 7%)
Oklch
oklch(91.3% 0.044 194.7)

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

#B4E0C1

Celadon · Silver · Apple Green

HEX
#B4E0C1
RGB
rgb(180, 224, 193)
HSL
hsl(138, 42%, 79%)
HSB
hsb(138, 20%, 88%)
CMYK
cmyk(20%, 0%, 14%, 12%)
Oklch
oklch(86.7% 0.063 154.2)

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

#57F3F8

Sky Blue · Turquoise · Lake Green

HEX
#57F3F8
RGB
rgb(87, 243, 248)
HSL
hsl(182, 92%, 66%)
HSB
hsb(182, 65%, 97%)
CMYK
cmyk(65%, 2%, 0%, 3%)
Oklch
oklch(88.5% 0.129 198.2)

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

#5CA3A7

Slate Blue · CadetBlue · Lake Green

HEX
#5CA3A7
RGB
rgb(92, 163, 167)
HSL
hsl(183, 30%, 51%)
HSB
hsb(183, 45%, 65%)
CMYK
cmyk(45%, 2%, 0%, 35%)
Oklch
oklch(67.1% 0.072 200.3)

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

#0D0C1E

Deep Indigo · Black · Deep Sea Blue

HEX
#0D0C1E
RGB
rgb(13, 12, 30)
HSL
hsl(243, 43%, 8%)
HSB
hsb(243, 60%, 12%)
CMYK
cmyk(57%, 60%, 0%, 88%)
Oklch
oklch(16.7% 0.037 284.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C1ECEB
ECC1C1

Analogous

C1ECD5
C1ECEB
C1D7EC

Triadic

C1ECEB
EBC1EC
ECEBC1

Split-Comp.

C1ECEB
ECC1D7
ECD5C1

Tetradic

C1ECEB
D5C1EC
ECC1C1
D7ECC1

Contrast Matrix WCAG 2.1 Contrast

C1ECEB
B4E0C1
57F3F8
5CA3A7
0D0C1E
—
1.1
Fail
1.1
Fail
2.3
Fail
15.1
AAA
1.1
Fail
—
1.1
Fail
2.0
Fail
13.2
AAA
1.1
Fail
1.1
Fail
—
2.1
Fail
14.3
AAA
2.3
Fail
2.0
Fail
2.1
Fail
—
6.7
AA
15.1
AAA
13.2
AAA
14.3
AAA
6.7
AA
—
White BG
1.3Fail
1.5Fail
1.3Fail
2.9Fail
19.3AAA
Black BG
16.5AAA
14.4AAA
15.6AAA
7.3AAA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4EB
C7C7C9
9B9CF7
7B7BA6
0D0D1A

Deuteranopia

D1CEEB
C5C1CA
9286F7
7771A6
0D0D19

Tritanopia

C3EBEB
B6CED0
5FF6F6
60A5A5
0D1615

Achromatopsia

DFDFDF
CFCFCF
C5C5C5
8E8E8E
0E0E0E

Shades & Tints Shades & Tints

#C1ECEB

Dark
Light

#B4E0C1

Dark
Light

#57F3F8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c1eceb;
  --color-2: #b4e0c1;
  --color-3: #57f3f8;
  --color-4: #5ca3a7;
  --color-5: #0d0c1e;
}

SCSS

$color-1: #c1eceb;
$color-2: #b4e0c1;
$color-3: #57f3f8;
$color-4: #5ca3a7;
$color-5: #0d0c1e;

TAILWIND

colors: {
  'brand-1': '#c1eceb',
  'brand-2': '#b4e0c1',
  'brand-3': '#57f3f8',
  'brand-4': '#5ca3a7',
  'brand-5': '#0d0c1e',
}

RGB Array

[193, 236, 235], [180, 224, 193], [87, 243, 248], [92, 163, 167], [13, 12, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C1ECEB, #B4E0C1, #57F3F8, #5CA3A7, #0D0C1E is ideal for: 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: #c1eceb; --color-2: #b4e0c1; --color-3: #57f3f8; --color-4: #5ca3a7; --color-5: #0d0c1e. 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 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