#C7E8DC + #02F7EF + #96DCDB + #B4C7C9 + #ABA3BC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C7E8DC

Jade · LightGray · Mint Green

HEX

#C7E8DC

RGB

rgb(199, 232, 220)

HSL

hsl(158, 42%, 85%)

HSB

hsb(158, 14%, 91%)

CMYK

cmyk(14%, 0%, 5%, 9%)

Oklch

oklch(90.4% 0.038 171.5)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#02F7EF

Mineral Blue · Cyan · Mint Ice

HEX

#02F7EF

RGB

rgb(2, 247, 239)

HSL

hsl(178, 98%, 49%)

HSB

hsb(178, 99%, 97%)

CMYK

cmyk(99%, 0%, 3%, 3%)

Oklch

oklch(88.1% 0.152 190.6)

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

#96DCDB

Jade · LightBlue · Lake Green

HEX

#96DCDB

RGB

rgb(150, 220, 219)

HSL

hsl(179, 50%, 73%)

HSB

hsb(179, 32%, 86%)

CMYK

cmyk(32%, 0%, 0%, 14%)

Oklch

oklch(84.8% 0.070 194.8)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#B4C7C9

Sky Blue · Silver · Lake Green

HEX

#B4C7C9

RGB

rgb(180, 199, 201)

HSL

hsl(186, 16%, 75%)

HSB

hsb(186, 10%, 79%)

CMYK

cmyk(10%, 1%, 0%, 21%)

Oklch

oklch(81.6% 0.021 204.4)

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

#ABA3BC

Wisteria · DarkGray · Cobalt Blue

HEX

#ABA3BC

RGB

rgb(171, 163, 188)

HSL

hsl(259, 16%, 69%)

HSB

hsb(259, 13%, 74%)

CMYK

cmyk(9%, 13%, 0%, 26%)

Oklch

oklch(73.0% 0.037 300.1)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7E8DC

E9C9D4

Analogous

C9E9CD

C7E8DC

C9E5E9

Triadic

C7E8DC

DDC9E9

E9DDC9

Split-Comp.

C7E8DC

E9C9E5

E9CDC9

Tetradic

C7E8DC

CDC9E9

E9C9D4

E5E9C9

Contrast Matrix WCAG 2.1 Contrast

C7E8DC	02F7EF	96DCDB	B4C7C9	ABA3BC
—	1.0 Fail	1.2 Fail	1.3 Fail	1.8 Fail
1.0 Fail	—	1.1 Fail	1.3 Fail	1.8 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.6 Fail
1.3 Fail	1.3 Fail	1.1 Fail	—	1.4 Fail
1.8 Fail	1.8 Fail	1.6 Fail	1.4 Fail	—

White BG

1.3Fail

1.4Fail

1.5Fail

1.8Fail

2.4Fail

Black BG

16.0AAA

15.6AAA

13.6AAA

12.0AAA

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D6DF

6C6EF1

B4B5DB

BCBCC9

A8A7B6

Deuteranopia

D3D1E0

5E4CF1

B0ABDB

BBBAC8

A8A9B5

Tritanopia

C9E1E2

0EF2F3

9ADBDB

B5C8C8

ABB1B0

Achromatopsia

DDDDDD

ADADAD

C7C7C7

C2C2C2

A8A8A8

Shades & Tints Shades & Tints

#C7E8DC

Dark

Light

#02F7EF

Dark

Light

#96DCDB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7e8dc;
  --color-2: #02f7ef;
  --color-3: #96dcdb;
  --color-4: #b4c7c9;
  --color-5: #aba3bc;
}

SCSS

$color-1: #c7e8dc;
$color-2: #02f7ef;
$color-3: #96dcdb;
$color-4: #b4c7c9;
$color-5: #aba3bc;

TAILWIND

colors: {
  'brand-1': '#c7e8dc',
  'brand-2': '#02f7ef',
  'brand-3': '#96dcdb',
  'brand-4': '#b4c7c9',
  'brand-5': '#aba3bc',
}

RGB Array

[199, 232, 220], [2, 247, 239], [150, 220, 219], [180, 199, 201], [171, 163, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7E8DC, #02F7EF, #96DCDB, #B4C7C9, #ABA3BC is ideal for: health products, baby brands, fresh-style blogs. 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: #c7e8dc; --color-2: #02f7ef; --color-3: #96dcdb; --color-4: #b4c7c9; --color-5: #aba3bc. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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