#B4CCBD + #A4EBAF + #CADC96 + #E6CF8D + #F7C394 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B4CCBD

Celadon · Silver · Apple Green

HEX

#B4CCBD

RGB

rgb(180, 204, 189)

HSL

hsl(143, 19%, 75%)

HSB

hsb(143, 12%, 80%)

CMYK

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

Oklch

oklch(82.3% 0.033 158.2)

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

#A4EBAF

Emerald · LightGreen · Apple Green

HEX

#A4EBAF

RGB

rgb(164, 235, 175)

HSL

hsl(129, 64%, 78%)

HSB

hsb(129, 30%, 92%)

CMYK

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

Oklch

oklch(87.8% 0.109 148.6)

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

#CADC96

Willow Green · Khaki · Apple Green

HEX

#CADC96

RGB

rgb(202, 220, 150)

HSL

hsl(75, 50%, 73%)

HSB

hsb(75, 32%, 86%)

CMYK

cmyk(8%, 0%, 32%, 14%)

Oklch

oklch(86.4% 0.094 120.1)

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

#E6CF8D

Goose Yellow · BurlyWood · Sunflower

HEX

#E6CF8D

RGB

rgb(230, 207, 141)

HSL

hsl(44, 64%, 73%)

HSB

hsb(44, 39%, 90%)

CMYK

cmyk(0%, 10%, 39%, 10%)

Oklch

oklch(85.9% 0.088 91.0)

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

#F7C394

Apricot · BurlyWood · Peach Orange

HEX

#F7C394

RGB

rgb(247, 195, 148)

HSL

hsl(28, 86%, 77%)

HSB

hsb(28, 40%, 97%)

CMYK

cmyk(0%, 21%, 40%, 3%)

Oklch

oklch(85.3% 0.086 63.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4CCBD

CBB3C2

Analogous

B6CBB3

B4CCBD

B3CBC9

Triadic

B4CCBD

BCB3CB

CBBCB3

Split-Comp.

B4CCBD

C9B3CB

CBB3B6

Tetradic

B4CCBD

B3B6CB

CBB3C2

CBC9B3

Contrast Matrix WCAG 2.1 Contrast

B4CCBD	A4EBAF	CADC96	E6CF8D	F7C394
—	1.2 Fail	1.2 Fail	1.1 Fail	1.1 Fail
1.2 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.7Fail

1.4Fail

1.5Fail

1.6Fail

Black BG

12.3AAA

15.1AAA

14.2AAA

13.7AAA

13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBFC1

C3C3BE

D2D2A7

DCDC9D

E0E09F

Deuteranopia

BDBBC1

BFB9C1

D1CFAB

DDDFA1

E4E7A2

Tritanopia

B5C3C4

A8C9CC

CBB4B7

E5AAAC

F4A8AA

Achromatopsia

C3C3C3

CFCFCF

CECECE

CDCDCD

Shades & Tints Shades & Tints

#B4CCBD

Dark

Light

#A4EBAF

Dark

Light

#CADC96

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4ccbd;
  --color-2: #a4ebaf;
  --color-3: #cadc96;
  --color-4: #e6cf8d;
  --color-5: #f7c394;
}

SCSS

$color-1: #b4ccbd;
$color-2: #a4ebaf;
$color-3: #cadc96;
$color-4: #e6cf8d;
$color-5: #f7c394;

TAILWIND

colors: {
  'brand-1': '#b4ccbd',
  'brand-2': '#a4ebaf',
  'brand-3': '#cadc96',
  'brand-4': '#e6cf8d',
  'brand-5': '#f7c394',
}

RGB Array

[180, 204, 189], [164, 235, 175], [202, 220, 150], [230, 207, 141], [247, 195, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #B4CCBD, #A4EBAF, #CADC96, #E6CF8D, #F7C394 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: #b4ccbd; --color-2: #a4ebaf; --color-3: #cadc96; --color-4: #e6cf8d; --color-5: #f7c394. 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