#8C7884 + #CF7E81 + #DEBE72 + #E4F659 + #DADEC2 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8C7884

Rose Purple · Gray · Warm Gray

HEX

#8C7884

RGB

rgb(140, 120, 132)

HSL

hsl(324, 8%, 51%)

HSB

hsb(324, 14%, 55%)

CMYK

cmyk(0%, 14%, 6%, 45%)

Oklch

oklch(59.5% 0.030 341.3)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#CF7E81

Peach Pink · LightCoral · Coral Red

HEX

#CF7E81

RGB

rgb(207, 126, 129)

HSL

hsl(358, 46%, 65%)

HSB

hsb(358, 39%, 81%)

CMYK

cmyk(0%, 39%, 38%, 19%)

Oklch

oklch(68.0% 0.101 17.7)

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

#DEBE72

Ginger · BurlyWood · Sunflower

HEX

#DEBE72

RGB

rgb(222, 190, 114)

HSL

hsl(42, 62%, 66%)

HSB

hsb(42, 49%, 87%)

CMYK

cmyk(0%, 14%, 49%, 13%)

Oklch

oklch(81.3% 0.102 87.3)

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

#E4F659

Fresh Green · Khaki · Sunflower

HEX

#E4F659

RGB

rgb(228, 246, 89)

HSL

hsl(67, 90%, 66%)

HSB

hsb(67, 64%, 96%)

CMYK

cmyk(7%, 0%, 64%, 4%)

Oklch

oklch(93.1% 0.178 115.5)

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

#DADEC2

Fresh Green · LightGray · Lemon Cream

HEX

#DADEC2

RGB

rgb(218, 222, 194)

HSL

hsl(69, 30%, 82%)

HSB

hsb(69, 13%, 87%)

CMYK

cmyk(2%, 0%, 13%, 13%)

Oklch

oklch(89.0% 0.038 113.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C7884

788C80

Analogous

8A788C

8C7884

8C787A

Triadic

8C7884

848C78

78848C

Split-Comp.

8C7884

7A8C78

788C8A

Tetradic

8C7884

8C8A78

788C80

787A8C

Contrast Matrix WCAG 2.1 Contrast

8C7884	CF7E81	DEBE72	E4F659	DADEC2
—	1.4 Fail	2.3 Fail	3.4 AA Large	3.0 Fail
1.4 Fail	—	1.7 Fail	2.5 Fail	2.2 Fail
2.3 Fail	1.7 Fail	—	1.5 Fail	1.3 Fail
3.4 AA Large	2.5 Fail	1.5 Fail	—	1.2 Fail
3.0 Fail	2.2 Fail	1.3 Fail	1.2 Fail	—

White BG

4.1AA Large

3.0AA Large

1.8Fail

1.2Fail

1.4Fail

Black BG

5.1AA

7.0AA

11.7AAA

17.6AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

838381

ACAB80

D0D084

ECEC7F

DCDCC9

Deuteranopia

858680

B1B780

D2D489

EBE988

DCDBCA

Tritanopia

8B7F7E

CB8080

DC9396

E59DA4

DACECF

Achromatopsia

7F7F7F

979797

BFBFBF

DFDFDF

DADADA

Shades & Tints Shades & Tints

#8C7884

Dark

Light

#CF7E81

Dark

Light

#DEBE72

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c7884;
  --color-2: #cf7e81;
  --color-3: #debe72;
  --color-4: #e4f659;
  --color-5: #dadec2;
}

SCSS

$color-1: #8c7884;
$color-2: #cf7e81;
$color-3: #debe72;
$color-4: #e4f659;
$color-5: #dadec2;

TAILWIND

colors: {
  'brand-1': '#8c7884',
  'brand-2': '#cf7e81',
  'brand-3': '#debe72',
  'brand-4': '#e4f659',
  'brand-5': '#dadec2',
}

RGB Array

[140, 120, 132], [207, 126, 129], [222, 190, 114], [228, 246, 89], [218, 222, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #8C7884, #CF7E81, #DEBE72, #E4F659, #DADEC2 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: #8c7884; --color-2: #cf7e81; --color-3: #debe72; --color-4: #e4f659; --color-5: #dadec2. 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