#FB8A8E + #EAC1A1 + #EDB38B + #DCE2E0 + #8E908D · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FB8A8E

Peach Pink · LightCoral · Coral Red

HEX

#FB8A8E

RGB

rgb(251, 138, 142)

HSL

hsl(358, 93%, 76%)

HSB

hsb(358, 45%, 98%)

CMYK

cmyk(0%, 45%, 43%, 2%)

Oklch

oklch(75.7% 0.137 18.6)

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

#EAC1A1

Apricot · BurlyWood · Peach Orange

HEX

#EAC1A1

RGB

rgb(234, 193, 161)

HSL

hsl(26, 63%, 77%)

HSB

hsb(26, 31%, 92%)

CMYK

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

Oklch

oklch(83.9% 0.064 59.7)

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

#EDB38B

Apricot · BurlyWood · Warm Sun

HEX

#EDB38B

RGB

rgb(237, 179, 139)

HSL

hsl(24, 73%, 74%)

HSB

hsb(24, 41%, 93%)

CMYK

cmyk(0%, 24%, 41%, 7%)

Oklch

oklch(81.1% 0.086 55.8)

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

#DCE2E0

Jade · LightGray · Cloud White

HEX

#DCE2E0

RGB

rgb(220, 226, 224)

HSL

hsl(160, 9%, 87%)

HSB

hsb(160, 3%, 89%)

CMYK

cmyk(3%, 0%, 1%, 11%)

Oklch

oklch(90.8% 0.007 174.4)

Traditional「Jade」· Paint「Cloud White」· Creative Silver Lining

#8E908D

Ash · Gray · Silver Sand

HEX

#8E908D

RGB

rgb(142, 144, 141)

HSL

hsl(100, 1%, 56%)

HSB

hsb(100, 2%, 56%)

CMYK

cmyk(1%, 0%, 2%, 44%)

Oklch

oklch(65.1% 0.005 134.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FB8A8E

89FBF7

Analogous

FB89C6

FB8A8E

FBBE89

Triadic

FB8A8E

8DFB89

898DFB

Split-Comp.

FB8A8E

89FBBE

89C6FB

Tetradic

FB8A8E

C6FB89

89FBF7

BE89FB

Contrast Matrix WCAG 2.1 Contrast

FB8A8E	EAC1A1	EDB38B	DCE2E0	8E908D
—	1.4 Fail	1.3 Fail	1.8 Fail	1.4 Fail
1.4 Fail	—	1.1 Fail	1.3 Fail	1.9 Fail
1.3 Fail	1.1 Fail	—	1.4 Fail	1.8 Fail
1.8 Fail	1.3 Fail	1.4 Fail	—	2.5 Fail
1.4 Fail	1.9 Fail	1.8 Fail	2.5 Fail	—

White BG

2.3Fail

1.7Fail

1.8Fail

1.3Fail

3.2AA Large

Black BG

9.1AAA

12.6AAA

11.4AAA

16.0AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CAC98D

D8D8A9

D4D395

DFDFE0

8F8F8E

Deuteranopia

D1D98D

DBDEAB

D7DC97

DEDEE1

8F8F8E

Tritanopia

F58C8C

E8AFB0

EA9C9E

DCE1E1

8E8E8E

Achromatopsia

ACACAC

CACACA

C0C0C0

E0E0E0

8F8F8F

Shades & Tints Shades & Tints

#FB8A8E

Dark

Light

#EAC1A1

Dark

Light

#EDB38B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fb8a8e;
  --color-2: #eac1a1;
  --color-3: #edb38b;
  --color-4: #dce2e0;
  --color-5: #8e908d;
}

SCSS

$color-1: #fb8a8e;
$color-2: #eac1a1;
$color-3: #edb38b;
$color-4: #dce2e0;
$color-5: #8e908d;

TAILWIND

colors: {
  'brand-1': '#fb8a8e',
  'brand-2': '#eac1a1',
  'brand-3': '#edb38b',
  'brand-4': '#dce2e0',
  'brand-5': '#8e908d',
}

RGB Array

[251, 138, 142], [234, 193, 161], [237, 179, 139], [220, 226, 224], [142, 144, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #FB8A8E, #EAC1A1, #EDB38B, #DCE2E0, #8E908D 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: #fb8a8e; --color-2: #eac1a1; --color-3: #edb38b; --color-4: #dce2e0; --color-5: #8e908d. 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