#C2F1B8 + #CFE6A4 + #DFDFA1 + #E4D7BF + #E3D3CC · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C2F1B8

Emerald · LightGray · Mint Green

HEX

#C2F1B8

RGB

rgb(194, 241, 184)

HSL

hsl(109, 67%, 83%)

HSB

hsb(109, 24%, 95%)

CMYK

cmyk(20%, 0%, 24%, 5%)

Oklch

oklch(91.1% 0.090 140.1)

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

#CFE6A4

Willow Green · Khaki · Apple Green

HEX

#CFE6A4

RGB

rgb(207, 230, 164)

HSL

hsl(81, 57%, 77%)

HSB

hsb(81, 29%, 90%)

CMYK

cmyk(10%, 0%, 29%, 10%)

Oklch

oklch(89.2% 0.090 123.8)

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

#DFDFA1

Fresh Green · Khaki · Sunflower

HEX

#DFDFA1

RGB

rgb(223, 223, 161)

HSL

hsl(60, 49%, 75%)

HSB

hsb(60, 28%, 87%)

CMYK

cmyk(0%, 0%, 28%, 13%)

Oklch

oklch(88.9% 0.080 107.9)

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

#E4D7BF

Goose Yellow · Wheat · Peach Orange

HEX

#E4D7BF

RGB

rgb(228, 215, 191)

HSL

hsl(39, 41%, 82%)

HSB

hsb(39, 16%, 89%)

CMYK

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

Oklch

oklch(88.3% 0.035 82.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E3D3CC

Apricot · LightGray · Peach Orange

HEX

#E3D3CC

RGB

rgb(227, 211, 204)

HSL

hsl(18, 29%, 85%)

HSB

hsb(18, 10%, 89%)

CMYK

cmyk(0%, 7%, 10%, 11%)

Oklch

oklch(87.8% 0.020 45.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2F1B8

E6B7F1

Analogous

DEF1B7

C2F1B8

B7F1C9

Triadic

C2F1B8

B7C1F1

F1B7C1

Split-Comp.

C2F1B8

C9B7F1

F1B7DE

Tetradic

C2F1B8

B7DEF1

E6B7F1

F1C9B7

Contrast Matrix WCAG 2.1 Contrast

C2F1B8	CFE6A4	DFDFA1	E4D7BF	E3D3CC
—	1.1 Fail	1.1 Fail	1.1 Fail	1.1 Fail
1.1 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.1 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.3Fail

1.4Fail

1.5Fail

Black BG

16.6AAA

15.5AAA

15.2AAA

14.8AAA

14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D7C6

D9D9B4

DFDFB0

DEDEC5

DCDCCE

Deuteranopia

D4D0C9

D8D6B8

DFDFB4

DFE0C6

DDDECE

Tritanopia

C4D1D3

D0C1C3

DFBCBE

E3C9CA

E2CFCF

Achromatopsia

DCDCDC

D8D8D8

D7D7D7

Shades & Tints Shades & Tints

#C2F1B8

Dark

Light

#CFE6A4

Dark

Light

#DFDFA1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2f1b8;
  --color-2: #cfe6a4;
  --color-3: #dfdfa1;
  --color-4: #e4d7bf;
  --color-5: #e3d3cc;
}

SCSS

$color-1: #c2f1b8;
$color-2: #cfe6a4;
$color-3: #dfdfa1;
$color-4: #e4d7bf;
$color-5: #e3d3cc;

TAILWIND

colors: {
  'brand-1': '#c2f1b8',
  'brand-2': '#cfe6a4',
  'brand-3': '#dfdfa1',
  'brand-4': '#e4d7bf',
  'brand-5': '#e3d3cc',
}

RGB Array

[194, 241, 184], [207, 230, 164], [223, 223, 161], [228, 215, 191], [227, 211, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #C2F1B8, #CFE6A4, #DFDFA1, #E4D7BF, #E3D3CC 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: #c2f1b8; --color-2: #cfe6a4; --color-3: #dfdfa1; --color-4: #e4d7bf; --color-5: #e3d3cc. 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