#CFCFCF + #A2E7D3 + #D1D4CD + #F2C9D3 + #E0CFD0 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CFCFCF

Silver Gray · LightGray · Pearl Gray

HEX

#CFCFCF

RGB

rgb(207, 207, 207)

HSL

hsl(0, 0%, 81%)

HSB

hsb(0, 0%, 81%)

CMYK

cmyk(0%, 0%, 0%, 19%)

Oklch

oklch(85.5% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#A2E7D3

Jade · LightBlue · Glacier Blue

HEX

#A2E7D3

RGB

rgb(162, 231, 211)

HSL

hsl(163, 59%, 77%)

HSB

hsb(163, 30%, 91%)

CMYK

cmyk(30%, 0%, 9%, 9%)

Oklch

oklch(87.6% 0.075 174.5)

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

#D1D4CD

Willow Green · LightGray · Pearl Gray

HEX

#D1D4CD

RGB

rgb(209, 212, 205)

HSL

hsl(86, 8%, 82%)

HSB

hsb(86, 3%, 83%)

CMYK

cmyk(1%, 0%, 3%, 17%)

Oklch

oklch(86.6% 0.010 125.7)

Traditional「Willow Green」· Paint「Pearl Gray」· Creative Silver Lining

#F2C9D3

Peach Pink · Pink · Cherry Blossom

HEX

#F2C9D3

RGB

rgb(242, 201, 211)

HSL

hsl(345, 61%, 87%)

HSB

hsb(345, 17%, 95%)

CMYK

cmyk(0%, 17%, 13%, 5%)

Oklch

oklch(87.4% 0.048 1.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#E0CFD0

Peach Pink · LightGray · Cherry Blossom

HEX

#E0CFD0

RGB

rgb(224, 207, 208)

HSL

hsl(356, 22%, 85%)

HSB

hsb(356, 8%, 88%)

CMYK

cmyk(0%, 8%, 7%, 12%)

Oklch

oklch(86.9% 0.019 13.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFCFCF

Analogous

CFCFCF

Triadic

CFCFCF

Split-Comp.

CFCFCF

Tetradic

CFCFCF

Contrast Matrix WCAG 2.1 Contrast

CFCFCF	A2E7D3	D1D4CD	F2C9D3	E0CFD0
—	1.1 Fail	1.0 Fail	1.0 Fail	1.0 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.0 Fail	1.1 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

1.6Fail

1.4Fail

1.5Fail

Black BG

13.5AAA

14.9AAA

14.0AAA

14.1AAA

14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCFCF

C0C0D8

D2D2CF

E0E0D1

D9D8D0

Deuteranopia

CFCFCF

BCB7D9

D2D2CF

E3E6D0

DADBD0

Tritanopia

CFCFCF

A5DCDD

D1D0D0

F0CFCE

DFD0D0

Achromatopsia

CFCFCF

D0D0D0

D2D2D2

D6D6D6

D4D4D4

Shades & Tints Shades & Tints

#CFCFCF

Dark

Light

#A2E7D3

Dark

Light

#D1D4CD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfcfcf;
  --color-2: #a2e7d3;
  --color-3: #d1d4cd;
  --color-4: #f2c9d3;
  --color-5: #e0cfd0;
}

SCSS

$color-1: #cfcfcf;
$color-2: #a2e7d3;
$color-3: #d1d4cd;
$color-4: #f2c9d3;
$color-5: #e0cfd0;

TAILWIND

colors: {
  'brand-1': '#cfcfcf',
  'brand-2': '#a2e7d3',
  'brand-3': '#d1d4cd',
  'brand-4': '#f2c9d3',
  'brand-5': '#e0cfd0',
}

RGB Array

[207, 207, 207], [162, 231, 211], [209, 212, 205], [242, 201, 211], [224, 207, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #CFCFCF, #A2E7D3, #D1D4CD, #F2C9D3, #E0CFD0 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: #cfcfcf; --color-2: #a2e7d3; --color-3: #d1d4cd; --color-4: #f2c9d3; --color-5: #e0cfd0. 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