#CCE8D0 + #C4E3B6 + #A5C4A9 + #83A3A3 + #98D1E4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCE8D0

Celadon · LightGray · Mint Green

HEX

#CCE8D0

RGB

rgb(204, 232, 208)

HSL

hsl(129, 38%, 85%)

HSB

hsb(129, 12%, 91%)

CMYK

cmyk(12%, 0%, 10%, 9%)

Oklch

oklch(90.4% 0.044 149.4)

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

#C4E3B6

Celadon · LightGray · Apple Green

HEX

#C4E3B6

RGB

rgb(196, 227, 182)

HSL

hsl(101, 45%, 80%)

HSB

hsb(101, 20%, 89%)

CMYK

cmyk(14%, 0%, 20%, 11%)

Oklch

oklch(88.2% 0.069 136.0)

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

#A5C4A9

Celadon · DarkGray · Apple Green

HEX

#A5C4A9

RGB

rgb(165, 196, 169)

HSL

hsl(128, 21%, 71%)

HSB

hsb(128, 16%, 77%)

CMYK

cmyk(16%, 0%, 14%, 23%)

Oklch

oklch(79.0% 0.050 148.7)

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

#83A3A3

Slate Blue · LightSlateGray · Lake Green

HEX

#83A3A3

RGB

rgb(131, 163, 163)

HSL

hsl(180, 15%, 58%)

HSB

hsb(180, 20%, 64%)

CMYK

cmyk(20%, 0%, 0%, 36%)

Oklch

oklch(69.2% 0.035 196.4)

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

#98D1E4

Sky Blue · SkyBlue · Lake Green

HEX

#98D1E4

RGB

rgb(152, 209, 228)

HSL

hsl(195, 58%, 75%)

HSB

hsb(195, 33%, 89%)

CMYK

cmyk(33%, 8%, 0%, 11%)

Oklch

oklch(82.8% 0.064 220.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCE8D0

E7CAE3

Analogous

D4E7CA

CCE8D0

CAE7DD

Triadic

CCE8D0

CFCAE7

E7CFCA

Split-Comp.

CCE8D0

DDCAE7

E7CAD4

Tetradic

CCE8D0

CAD4E7

E7CAE3

E7DDCA

Contrast Matrix WCAG 2.1 Contrast

CCE8D0	C4E3B6	A5C4A9	83A3A3	98D1E4
—	1.1 Fail	1.4 Fail	2.1 Fail	1.3 Fail
1.1 Fail	—	1.4 Fail	1.9 Fail	1.2 Fail
1.4 Fail	1.4 Fail	—	1.4 Fail	1.1 Fail
2.1 Fail	1.9 Fail	1.4 Fail	—	1.6 Fail
1.3 Fail	1.2 Fail	1.1 Fail	1.6 Fail	—

White BG

1.3Fail

1.4Fail

1.9Fail

2.7Fail

1.7Fail

Black BG

16.0AAA

15.0AAA

11.1AAA

7.7AAA

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D8D6

D1D2C1

B2B3B0

9191A3

B1B1DF

Deuteranopia

D7D4D7

D0CDC4

B1AEB1

8F8DA3

ADA9DE

Tritanopia

CDDADB

C6C9CB

A7B5B6

85A3A3

9BDCDB

Achromatopsia

DDDDDD

D5D5D5

B8B8B8

999999

C2C2C2

Shades & Tints Shades & Tints

#CCE8D0

Dark

Light

#C4E3B6

Dark

Light

#A5C4A9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cce8d0;
  --color-2: #c4e3b6;
  --color-3: #a5c4a9;
  --color-4: #83a3a3;
  --color-5: #98d1e4;
}

SCSS

$color-1: #cce8d0;
$color-2: #c4e3b6;
$color-3: #a5c4a9;
$color-4: #83a3a3;
$color-5: #98d1e4;

TAILWIND

colors: {
  'brand-1': '#cce8d0',
  'brand-2': '#c4e3b6',
  'brand-3': '#a5c4a9',
  'brand-4': '#83a3a3',
  'brand-5': '#98d1e4',
}

RGB Array

[204, 232, 208], [196, 227, 182], [165, 196, 169], [131, 163, 163], [152, 209, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCE8D0, #C4E3B6, #A5C4A9, #83A3A3, #98D1E4 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: #cce8d0; --color-2: #c4e3b6; --color-3: #a5c4a9; --color-4: #83a3a3; --color-5: #98d1e4. 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