#7CCFC6 + #BBC8B1 + #E0C080 + #E0BC98 + #D4C39D · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7CCFC6

Jade · MediumAquaMarine · Lake Green

HEX

#7CCFC6

RGB

rgb(124, 207, 198)

HSL

hsl(173, 46%, 65%)

HSB

hsb(173, 40%, 81%)

CMYK

cmyk(40%, 0%, 4%, 19%)

Oklch

oklch(79.9% 0.082 186.8)

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

#BBC8B1

Celadon · Silver · Apple Green

HEX

#BBC8B1

RGB

rgb(187, 200, 177)

HSL

hsl(94, 17%, 74%)

HSB

hsb(94, 12%, 78%)

CMYK

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

Oklch

oklch(81.6% 0.035 131.4)

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

#E0C080

Ginger · BurlyWood · Sunflower

HEX

#E0C080

RGB

rgb(224, 192, 128)

HSL

hsl(40, 61%, 69%)

HSB

hsb(40, 43%, 88%)

CMYK

cmyk(0%, 14%, 43%, 12%)

Oklch

oklch(82.1% 0.090 84.0)

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

#E0BC98

Goose Yellow · BurlyWood · Warm Sun

HEX

#E0BC98

RGB

rgb(224, 188, 152)

HSL

hsl(30, 54%, 74%)

HSB

hsb(30, 32%, 88%)

CMYK

cmyk(0%, 16%, 32%, 12%)

Oklch

oklch(81.8% 0.064 66.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D4C39D

Goose Yellow · Tan · Sunflower

HEX

#D4C39D

RGB

rgb(212, 195, 157)

HSL

hsl(41, 39%, 72%)

HSB

hsb(41, 26%, 83%)

CMYK

cmyk(0%, 8%, 26%, 17%)

Oklch

oklch(82.2% 0.054 86.7)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7CCFC6

CF7D86

Analogous

7DCF9C

7CCFC6

7DAFCF

Triadic

7CCFC6

C57DCF

CFC57D

Split-Comp.

7CCFC6

CF7DAF

CF9C7D

Tetradic

7CCFC6

9C7DCF

CF7D86

AFCF7D

Contrast Matrix WCAG 2.1 Contrast

7CCFC6	BBC8B1	E0C080	E0BC98	D4C39D
—	1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

1.8Fail

1.7Fail

1.8Fail

1.7Fail

Black BG

11.6AAA

12.0AAA

11.8AAA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A1C8

C1C1B7

D2D28F

D0D0A1

CDCCA6

Deuteranopia

9B95C9

C0BFB8

D4D693

D3D5A3

CECFA8

Tritanopia

80CACA

BCBBBC

DE9C9E

DEA8A9

D3ADAF

Achromatopsia

B5B5B5

C1C1C1

C2C2C2

C3C3C3

C4C4C4

Shades & Tints Shades & Tints

#7CCFC6

Dark

Light

#BBC8B1

Dark

Light

#E0C080

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7ccfc6;
  --color-2: #bbc8b1;
  --color-3: #e0c080;
  --color-4: #e0bc98;
  --color-5: #d4c39d;
}

SCSS

$color-1: #7ccfc6;
$color-2: #bbc8b1;
$color-3: #e0c080;
$color-4: #e0bc98;
$color-5: #d4c39d;

TAILWIND

colors: {
  'brand-1': '#7ccfc6',
  'brand-2': '#bbc8b1',
  'brand-3': '#e0c080',
  'brand-4': '#e0bc98',
  'brand-5': '#d4c39d',
}

RGB Array

[124, 207, 198], [187, 200, 177], [224, 192, 128], [224, 188, 152], [212, 195, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #7CCFC6, #BBC8B1, #E0C080, #E0BC98, #D4C39D 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: #7ccfc6; --color-2: #bbc8b1; --color-3: #e0c080; --color-4: #e0bc98; --color-5: #d4c39d. 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