#C7DFD2 + #B9D9CA + #ACD5C3 + #9FCCB8 + #8AC1AA · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C7DFD2

Celadon · LightGray · Mint Green

HEX

#C7DFD2

RGB

rgb(199, 223, 210)

HSL

hsl(147, 27%, 83%)

HSB

hsb(147, 11%, 87%)

CMYK

cmyk(11%, 0%, 6%, 13%)

Oklch

oklch(88.2% 0.031 162.1)

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

#B9D9CA

Jade · Silver · Apple Green

HEX

#B9D9CA

RGB

rgb(185, 217, 202)

HSL

hsl(152, 30%, 79%)

HSB

hsb(152, 15%, 85%)

CMYK

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

Oklch

oklch(85.8% 0.040 165.5)

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

#ACD5C3

Jade · Silver · Apple Green

HEX

#ACD5C3

RGB

rgb(172, 213, 195)

HSL

hsl(154, 33%, 75%)

HSB

hsb(154, 19%, 84%)

CMYK

cmyk(19%, 0%, 8%, 16%)

Oklch

oklch(83.9% 0.050 166.6)

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

#9FCCB8

Jade · Silver · Apple Green

HEX

#9FCCB8

RGB

rgb(159, 204, 184)

HSL

hsl(153, 31%, 71%)

HSB

hsb(153, 22%, 80%)

CMYK

cmyk(22%, 0%, 10%, 20%)

Oklch

oklch(80.7% 0.055 166.1)

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

#8AC1AA

Jade · DarkSeaGreen · Apple Green

HEX

#8AC1AA

RGB

rgb(138, 193, 170)

HSL

hsl(155, 31%, 65%)

HSB

hsb(155, 28%, 76%)

CMYK

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

Oklch

oklch(76.6% 0.066 166.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7DFD2

DFC8D5

Analogous

C9DFC8

C7DFD2

C8DFDE

Triadic

C7DFD2

D2C8DF

DFD2C8

Split-Comp.

C7DFD2

DEC8DF

DFC8C9

Tetradic

C7DFD2

C8C9DF

DFC8D5

DFDEC8

Contrast Matrix WCAG 2.1 Contrast

C7DFD2	B9D9CA	ACD5C3	9FCCB8	8AC1AA
—	1.1 Fail	1.1 Fail	1.3 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.3 Fail	1.3 Fail	1.1 Fail	—

White BG

1.4Fail

1.5Fail

1.6Fail

1.8Fail

2.0Fail

Black BG

14.9AAA

13.8AAA

13.1AAA

11.8AAA

10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D2D5

C7C7CE

BEBEC7

B2B3BD

A2A2B0

Deuteranopia

D0CED6

C5C3CE

BBB8C8

B0ADBE

9F9BB1

Tritanopia

C8D8D8

BBD0D1

AECBCC

A1C1C2

8DB4B5

Achromatopsia

D6D6D6

CECECE

C7C7C7

BCBCBC

AEAEAE

Shades & Tints Shades & Tints

#C7DFD2

Dark

Light

#B9D9CA

Dark

Light

#ACD5C3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7dfd2;
  --color-2: #b9d9ca;
  --color-3: #acd5c3;
  --color-4: #9fccb8;
  --color-5: #8ac1aa;
}

SCSS

$color-1: #c7dfd2;
$color-2: #b9d9ca;
$color-3: #acd5c3;
$color-4: #9fccb8;
$color-5: #8ac1aa;

TAILWIND

colors: {
  'brand-1': '#c7dfd2',
  'brand-2': '#b9d9ca',
  'brand-3': '#acd5c3',
  'brand-4': '#9fccb8',
  'brand-5': '#8ac1aa',
}

RGB Array

[199, 223, 210], [185, 217, 202], [172, 213, 195], [159, 204, 184], [138, 193, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #C7DFD2, #B9D9CA, #ACD5C3, #9FCCB8, #8AC1AA 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: #c7dfd2; --color-2: #b9d9ca; --color-3: #acd5c3; --color-4: #9fccb8; --color-5: #8ac1aa. 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 summer-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