#CFE4BD + #C35658 + #D1B881 + #D8D762 + #D8DFB2 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CFE4BD

Celadon · LightGray · Mint Green

HEX

#CFE4BD

RGB

rgb(207, 228, 189)

HSL

hsl(92, 42%, 82%)

HSB

hsb(92, 17%, 89%)

CMYK

cmyk(9%, 0%, 17%, 11%)

Oklch

oklch(89.3% 0.057 130.6)

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

#C35658

Crimson · Sienna · Passion Red

HEX

#C35658

RGB

rgb(195, 86, 88)

HSL

hsl(359, 48%, 55%)

HSB

hsb(359, 56%, 76%)

CMYK

cmyk(0%, 56%, 55%, 24%)

Oklch

oklch(59.1% 0.140 21.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#D1B881

Ginger · Tan · Sunflower

HEX

#D1B881

RGB

rgb(209, 184, 129)

HSL

hsl(41, 47%, 66%)

HSB

hsb(41, 38%, 82%)

CMYK

cmyk(0%, 12%, 38%, 18%)

Oklch

oklch(79.1% 0.078 86.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D8D762

Fresh Green · BurlyWood · Sunflower

HEX

#D8D762

RGB

rgb(216, 215, 98)

HSL

hsl(59, 60%, 62%)

HSB

hsb(59, 55%, 85%)

CMYK

cmyk(0%, 0%, 55%, 15%)

Oklch

oklch(85.7% 0.139 108.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D8DFB2

Fresh Green · Wheat · Lemon Cream

HEX

#D8DFB2

RGB

rgb(216, 223, 178)

HSL

hsl(69, 41%, 79%)

HSB

hsb(69, 20%, 87%)

CMYK

cmyk(3%, 0%, 20%, 13%)

Oklch

oklch(88.7% 0.060 114.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFE4BD

D2BEE4

Analogous

E3E4BE

CFE4BD

BEE4BF

Triadic

CFE4BD

BED0E4

E4BED0

Split-Comp.

CFE4BD

BFBEE4

E4BEE3

Tetradic

CFE4BD

BEE3E4

D2BEE4

E4BFBE

Contrast Matrix WCAG 2.1 Contrast

CFE4BD	C35658	D1B881	D8D762	D8DFB2
—	3.2 AA Large	1.4 Fail	1.1 Fail	1.0 Fail
3.2 AA Large	—	2.3 Fail	2.9 Fail	3.2 AA Large
1.4 Fail	2.3 Fail	—	1.3 Fail	1.4 Fail
1.1 Fail	2.9 Fail	1.3 Fail	—	1.1 Fail
1.0 Fail	3.2 AA Large	1.4 Fail	1.1 Fail	—

White BG

1.4Fail

4.4AA Large

1.9Fail

1.5Fail

1.4Fail

Black BG

15.5AAA

4.8AA

10.9AAA

13.8AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D8C6

949358

C6C68E

D8D87E

DBDBBD

Deuteranopia

D7D5C9

9AA257

C8C992

D8D885

DBDAC0

Tritanopia

D0CED0

BE5757

D0999B

D8959A

D8C5C7

Achromatopsia

D9D9D9

777777

B9B9B9

CACACA

D8D8D8

Shades & Tints Shades & Tints

#CFE4BD

Dark

Light

#C35658

Dark

Light

#D1B881

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfe4bd;
  --color-2: #c35658;
  --color-3: #d1b881;
  --color-4: #d8d762;
  --color-5: #d8dfb2;
}

SCSS

$color-1: #cfe4bd;
$color-2: #c35658;
$color-3: #d1b881;
$color-4: #d8d762;
$color-5: #d8dfb2;

TAILWIND

colors: {
  'brand-1': '#cfe4bd',
  'brand-2': '#c35658',
  'brand-3': '#d1b881',
  'brand-4': '#d8d762',
  'brand-5': '#d8dfb2',
}

RGB Array

[207, 228, 189], [195, 86, 88], [209, 184, 129], [216, 215, 98], [216, 223, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #CFE4BD, #C35658, #D1B881, #D8D762, #D8DFB2 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: #cfe4bd; --color-2: #c35658; --color-3: #d1b881; --color-4: #d8d762; --color-5: #d8dfb2. 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