#B1A387 + #CC7180 + #E87A7A + #E8907B + #D5B382 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B1A387

Ginger · DarkGray · Sunflower

HEX

#B1A387

RGB

rgb(177, 163, 135)

HSL

hsl(40, 21%, 61%)

HSB

hsb(40, 24%, 69%)

CMYK

cmyk(0%, 8%, 24%, 31%)

Oklch

oklch(72.0% 0.042 84.5)

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

#CC7180

Peach Pink · LightCoral · Coral Red

HEX

#CC7180

RGB

rgb(204, 113, 128)

HSL

hsl(350, 47%, 62%)

HSB

hsb(350, 45%, 80%)

CMYK

cmyk(0%, 45%, 37%, 20%)

Oklch

oklch(65.4% 0.115 10.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#E87A7A

Peach Pink · LightCoral · Coral Red

HEX

#E87A7A

RGB

rgb(232, 122, 122)

HSL

hsl(0, 71%, 69%)

HSB

hsb(0, 47%, 91%)

CMYK

cmyk(0%, 47%, 47%, 9%)

Oklch

oklch(70.4% 0.136 21.1)

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

#E8907B

Peach Pink · DarkSalmon · Coral Red

HEX

#E8907B

RGB

rgb(232, 144, 123)

HSL

hsl(12, 70%, 70%)

HSB

hsb(12, 47%, 91%)

CMYK

cmyk(0%, 38%, 47%, 9%)

Oklch

oklch(73.9% 0.112 34.2)

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

#D5B382

Ginger · Tan · Warm Sun

HEX

#D5B382

RGB

rgb(213, 179, 130)

HSL

hsl(35, 50%, 67%)

HSB

hsb(35, 39%, 84%)

CMYK

cmyk(0%, 16%, 39%, 16%)

Oklch

oklch(78.5% 0.076 76.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1A387

8795B0

Analogous

B08E87

B1A387

A9B087

Triadic

B1A387

87B0A3

A387B0

Split-Comp.

B1A387

87A9B0

8E87B0

Tetradic

B1A387

87B08E

8795B0

B087A9

Contrast Matrix WCAG 2.1 Contrast

B1A387	CC7180	E87A7A	E8907B	D5B382
—	1.4 Fail	1.1 Fail	1.0 Fail	1.3 Fail
1.4 Fail	—	1.2 Fail	1.4 Fail	1.7 Fail
1.1 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
1.0 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
1.3 Fail	1.7 Fail	1.4 Fail	1.2 Fail	—

White BG

2.5Fail

3.4AA Large

2.8Fail

2.4Fail

2.0Fail

Black BG

8.5AAA

6.2AA

7.5AAA

8.7AAA

10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAB8E

A5A47C

B8B77A

C2C180

C6C68E

Deuteranopia

ACAD8F

AAB17C

BFC77A

C7CE81

C8CB91

Tritanopia

B09394

C77A79

E27A7A

E48485

D39799

Achromatopsia

A4A4A4

8E8E8E

9B9B9B

A8A8A8

B8B8B8

Shades & Tints Shades & Tints

#B1A387

Dark

Light

#CC7180

Dark

Light

#E87A7A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1a387;
  --color-2: #cc7180;
  --color-3: #e87a7a;
  --color-4: #e8907b;
  --color-5: #d5b382;
}

SCSS

$color-1: #b1a387;
$color-2: #cc7180;
$color-3: #e87a7a;
$color-4: #e8907b;
$color-5: #d5b382;

TAILWIND

colors: {
  'brand-1': '#b1a387',
  'brand-2': '#cc7180',
  'brand-3': '#e87a7a',
  'brand-4': '#e8907b',
  'brand-5': '#d5b382',
}

RGB Array

[177, 163, 135], [204, 113, 128], [232, 122, 122], [232, 144, 123], [213, 179, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #B1A387, #CC7180, #E87A7A, #E8907B, #D5B382 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: #b1a387; --color-2: #cc7180; --color-3: #e87a7a; --color-4: #e8907b; --color-5: #d5b382. 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