#CCD9CA + #7ED3E0 + #74ACE1 + #8488D1 + #896AAB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCD9CA

Celadon · LightGray · Mint Green

HEX

#CCD9CA

RGB

rgb(204, 217, 202)

HSL

hsl(112, 16%, 82%)

HSB

hsb(112, 7%, 85%)

CMYK

cmyk(6%, 0%, 7%, 15%)

Oklch

oklch(87.1% 0.025 141.5)

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

#7ED3E0

Sky Blue · SkyBlue · Lake Green

HEX

#7ED3E0

RGB

rgb(126, 211, 224)

HSL

hsl(188, 61%, 69%)

HSB

hsb(188, 44%, 88%)

CMYK

cmyk(44%, 6%, 0%, 12%)

Oklch

oklch(81.8% 0.084 208.2)

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

#74ACE1

Sky Blue · CornflowerBlue · Cobalt Blue

HEX

#74ACE1

RGB

rgb(116, 172, 225)

HSL

hsl(209, 64%, 67%)

HSB

hsb(209, 48%, 88%)

CMYK

cmyk(48%, 24%, 0%, 12%)

Oklch

oklch(72.6% 0.097 248.0)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#8488D1

Azure · MediumSlateBlue · Cobalt Blue

HEX

#8488D1

RGB

rgb(132, 136, 209)

HSL

hsl(237, 46%, 67%)

HSB

hsb(237, 37%, 82%)

CMYK

cmyk(37%, 35%, 0%, 18%)

Oklch

oklch(65.3% 0.108 280.5)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#896AAB

Deep Indigo · LightSlateGray · Violet

HEX

#896AAB

RGB

rgb(137, 106, 171)

HSL

hsl(269, 28%, 54%)

HSB

hsb(269, 38%, 67%)

CMYK

cmyk(20%, 38%, 0%, 33%)

Oklch

oklch(58.1% 0.103 305.4)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCD9CA

D6CAD8

Analogous

D3D8CA

CCD9CA

CAD8CF

Triadic

CCD9CA

CACCD8

D8CACC

Split-Comp.

CCD9CA

CFCAD8

D8CAD3

Tetradic

CCD9CA

CAD3D8

D6CAD8

D8CFCA

Contrast Matrix WCAG 2.1 Contrast

CCD9CA	7ED3E0	74ACE1	8488D1	896AAB
—	1.2 Fail	1.6 Fail	2.2 Fail	3.0 AA Large
1.2 Fail	—	1.4 Fail	1.9 Fail	2.6 Fail
1.6 Fail	1.4 Fail	—	1.4 Fail	1.9 Fail
2.2 Fail	1.9 Fail	1.4 Fail	—	1.4 Fail
3.0 AA Large	2.6 Fail	1.9 Fail	1.4 Fail	—

White BG

1.5Fail

1.7Fail

2.4Fail

3.3AA Large

4.5AA Large

Black BG

14.3AAA

12.3AAA

8.7AAA

6.4AA

4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2CE

A3A4DD

8C8DD4

8686BF

7C7B9B

Deuteranopia

D1D0CE

9E98DC

8985D1

8685BB

7D8098

Tritanopia

CDD0D1

82DADA

77CAC8

84B1AE

878F8C

Achromatopsia

D3D3D3

BBBBBB

A1A1A1

8F8F8F

7B7B7B

Shades & Tints Shades & Tints

#CCD9CA

Dark

Light

#7ED3E0

Dark

Light

#74ACE1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccd9ca;
  --color-2: #7ed3e0;
  --color-3: #74ace1;
  --color-4: #8488d1;
  --color-5: #896aab;
}

SCSS

$color-1: #ccd9ca;
$color-2: #7ed3e0;
$color-3: #74ace1;
$color-4: #8488d1;
$color-5: #896aab;

TAILWIND

colors: {
  'brand-1': '#ccd9ca',
  'brand-2': '#7ed3e0',
  'brand-3': '#74ace1',
  'brand-4': '#8488d1',
  'brand-5': '#896aab',
}

RGB Array

[204, 217, 202], [126, 211, 224], [116, 172, 225], [132, 136, 209], [137, 106, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCD9CA, #7ED3E0, #74ACE1, #8488D1, #896AAB 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: #ccd9ca; --color-2: #7ed3e0; --color-3: #74ace1; --color-4: #8488d1; --color-5: #896aab. 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