#B5CEB3 + #D7D0AC + #D7BDA4 + #E9AD9A + #F89F9C · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B5CEB3

Celadon · Silver · Apple Green

HEX

#B5CEB3

RGB

rgb(181, 206, 179)

HSL

hsl(116, 22%, 75%)

HSB

hsb(116, 13%, 81%)

CMYK

cmyk(12%, 0%, 13%, 19%)

Oklch

oklch(82.5% 0.046 143.1)

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

#D7D0AC

Fresh Green · Wheat · Lemon Cream

HEX

#D7D0AC

RGB

rgb(215, 208, 172)

HSL

hsl(50, 35%, 76%)

HSB

hsb(50, 20%, 84%)

CMYK

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

Oklch

oklch(85.4% 0.049 98.2)

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

#D7BDA4

Apricot · Tan · Warm Sun

HEX

#D7BDA4

RGB

rgb(215, 189, 164)

HSL

hsl(29, 39%, 74%)

HSB

hsb(29, 24%, 84%)

CMYK

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

Oklch

oklch(81.4% 0.045 66.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#E9AD9A

Peach Pink · BurlyWood · Coral Red

HEX

#E9AD9A

RGB

rgb(233, 173, 154)

HSL

hsl(14, 64%, 76%)

HSB

hsb(14, 34%, 91%)

CMYK

cmyk(0%, 26%, 34%, 9%)

Oklch

oklch(79.9% 0.076 38.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F89F9C

Peach Pink · LightSalmon · Coral Red

HEX

#F89F9C

RGB

rgb(248, 159, 156)

HSL

hsl(2, 87%, 79%)

HSB

hsb(2, 37%, 97%)

CMYK

cmyk(0%, 36%, 37%, 3%)

Oklch

oklch(79.1% 0.107 21.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5CEB3

CBB1CD

Analogous

C1CDB1

B5CEB3

B1CDBD

Triadic

B5CEB3

B1B3CD

CDB1B3

Split-Comp.

B5CEB3

BDB1CD

CDB1C1

Tetradic

B5CEB3

B1C1CD

CBB1CD

CDBDB1

Contrast Matrix WCAG 2.1 Contrast

B5CEB3	D7D0AC	D7BDA4	E9AD9A	F89F9C
—	1.1 Fail	1.1 Fail	1.1 Fail	1.2 Fail
1.1 Fail	—	1.2 Fail	1.2 Fail	1.3 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.2 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

1.7Fail

1.6Fail

1.8Fail

1.9Fail

2.0Fail

Black BG

12.4AAA

13.5AAA

11.7AAA

10.9AAA

10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C0BA

D4D4B5

CCCCAA

CFCE9F

D1D19D

Deuteranopia

BEBDBB

D4D5B7

CDCFAC

D3D7A0

D7DD9D

Tritanopia

B6BFC0

D7BCBD

D6AFB0

E6A2A3

F49D9D

Achromatopsia

C3C3C3

CECECE

C2C2C2

BDBDBD

B9B9B9

Shades & Tints Shades & Tints

#B5CEB3

Dark

Light

#D7D0AC

Dark

Light

#D7BDA4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5ceb3;
  --color-2: #d7d0ac;
  --color-3: #d7bda4;
  --color-4: #e9ad9a;
  --color-5: #f89f9c;
}

SCSS

$color-1: #b5ceb3;
$color-2: #d7d0ac;
$color-3: #d7bda4;
$color-4: #e9ad9a;
$color-5: #f89f9c;

TAILWIND

colors: {
  'brand-1': '#b5ceb3',
  'brand-2': '#d7d0ac',
  'brand-3': '#d7bda4',
  'brand-4': '#e9ad9a',
  'brand-5': '#f89f9c',
}

RGB Array

[181, 206, 179], [215, 208, 172], [215, 189, 164], [233, 173, 154], [248, 159, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #B5CEB3, #D7D0AC, #D7BDA4, #E9AD9A, #F89F9C 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: #b5ceb3; --color-2: #d7d0ac; --color-3: #d7bda4; --color-4: #e9ad9a; --color-5: #f89f9c. 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