#B55287 + #BF8781 + #E2A3AA + #E6D486 + #D6F3E2 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B55287

Rose Purple · MediumVioletRed · Rose Pink

HEX

#B55287

RGB

rgb(181, 82, 135)

HSL

hsl(328, 40%, 52%)

HSB

hsb(328, 55%, 71%)

CMYK

cmyk(0%, 55%, 25%, 29%)

Oklch

oklch(57.9% 0.142 349.1)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#BF8781

Peach Pink · DarkSalmon · Coral Red

HEX

#BF8781

RGB

rgb(191, 135, 129)

HSL

hsl(6, 33%, 63%)

HSB

hsb(6, 32%, 75%)

CMYK

cmyk(0%, 29%, 32%, 25%)

Oklch

oklch(67.7% 0.070 25.9)

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

#E2A3AA

Peach Pink · Tan · Coral Red

HEX

#E2A3AA

RGB

rgb(226, 163, 170)

HSL

hsl(353, 52%, 76%)

HSB

hsb(353, 28%, 89%)

CMYK

cmyk(0%, 28%, 25%, 11%)

Oklch

oklch(77.7% 0.075 11.6)

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

#E6D486

Goose Yellow · Khaki · Sunflower

HEX

#E6D486

RGB

rgb(230, 212, 134)

HSL

hsl(49, 66%, 71%)

HSB

hsb(49, 42%, 90%)

CMYK

cmyk(0%, 8%, 42%, 10%)

Oklch

oklch(86.8% 0.100 96.7)

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

#D6F3E2

Emerald · Beige · Mint Green

HEX

#D6F3E2

RGB

rgb(214, 243, 226)

HSL

hsl(145, 55%, 90%)

HSB

hsb(145, 12%, 95%)

CMYK

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

Oklch

oklch(93.8% 0.038 159.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B55287

54B681

Analogous

B254B6

B55287

B65457

Triadic

B55287

88B654

5488B6

Split-Comp.

B55287

57B654

54B6B2

Tetradic

B55287

B6B254

54B681

5457B6

Contrast Matrix WCAG 2.1 Contrast

B55287	BF8781	E2A3AA	E6D486	D6F3E2
—	1.5 Fail	2.2 Fail	3.1 AA Large	3.9 AA Large
1.5 Fail	—	1.4 Fail	2.0 Fail	2.5 Fail
2.2 Fail	1.4 Fail	—	1.4 Fail	1.8 Fail
3.1 AA Large	2.0 Fail	1.4 Fail	—	1.3 Fail
3.9 AA Large	2.5 Fail	1.8 Fail	1.3 Fail	—

White BG

4.6AA

3.0AA Large

2.1Fail

1.5Fail

1.2Fail

Black BG

4.5AA

7.0AA

10.1AAA

14.1AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A897A

A7A682

C7C6A8

DEDE99

E3E3E6

Deuteranopia

909777

AAAE83

CACFA8

DFE19D

E1DFE7

Tritanopia

B0706E

BC8484

DFA7A7

E5A8AB

D7E9EA

Achromatopsia

767676

979797

B7B7B7

D0D0D0

E8E8E8

Shades & Tints Shades & Tints

#B55287

Dark

Light

#BF8781

Dark

Light

#E2A3AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b55287;
  --color-2: #bf8781;
  --color-3: #e2a3aa;
  --color-4: #e6d486;
  --color-5: #d6f3e2;
}

SCSS

$color-1: #b55287;
$color-2: #bf8781;
$color-3: #e2a3aa;
$color-4: #e6d486;
$color-5: #d6f3e2;

TAILWIND

colors: {
  'brand-1': '#b55287',
  'brand-2': '#bf8781',
  'brand-3': '#e2a3aa',
  'brand-4': '#e6d486',
  'brand-5': '#d6f3e2',
}

RGB Array

[181, 82, 135], [191, 135, 129], [226, 163, 170], [230, 212, 134], [214, 243, 226]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #B55287, #BF8781, #E2A3AA, #E6D486, #D6F3E2 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: #b55287; --color-2: #bf8781; --color-3: #e2a3aa; --color-4: #e6d486; --color-5: #d6f3e2. 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 sunset-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