#C28ABD + #E4A876 + #FDC010 + #D3DCAD + #C5E9D0 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C28ABD

Mauve · Orchid · Lilac Purple

HEX

#C28ABD

RGB

rgb(194, 138, 189)

HSL

hsl(305, 31%, 65%)

HSB

hsb(305, 29%, 76%)

CMYK

cmyk(0%, 29%, 3%, 24%)

Oklch

oklch(70.5% 0.096 329.6)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#E4A876

Apricot · DarkSalmon · Warm Sun

HEX

#E4A876

RGB

rgb(228, 168, 118)

HSL

hsl(27, 67%, 68%)

HSB

hsb(27, 48%, 89%)

CMYK

cmyk(0%, 26%, 48%, 11%)

Oklch

oklch(77.7% 0.097 60.5)

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

#FDC010

Ginger · Gold · Sunflower

HEX

#FDC010

RGB

rgb(253, 192, 16)

HSL

hsl(45, 98%, 53%)

HSB

hsb(45, 94%, 99%)

CMYK

cmyk(0%, 24%, 94%, 1%)

Oklch

oklch(84.0% 0.170 85.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D3DCAD

Willow Green · Wheat · Apple Green

HEX

#D3DCAD

RGB

rgb(211, 220, 173)

HSL

hsl(71, 40%, 77%)

HSB

hsb(71, 21%, 86%)

CMYK

cmyk(4%, 0%, 21%, 14%)

Oklch

oklch(87.6% 0.063 116.5)

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

#C5E9D0

Celadon · LightGray · Mint Green

HEX

#C5E9D0

RGB

rgb(197, 233, 208)

HSL

hsl(138, 45%, 84%)

HSB

hsb(138, 15%, 91%)

CMYK

cmyk(15%, 0%, 11%, 9%)

Oklch

oklch(90.1% 0.051 155.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C28ABD

8AC18F

Analogous

AA8AC1

C28ABD

C18AA1

Triadic

C28ABD

BDC18A

8ABDC1

Split-Comp.

C28ABD

A1C18A

8AC1AA

Tetradic

C28ABD

C1AA8A

8AC18F

8AA1C1

Contrast Matrix WCAG 2.1 Contrast

C28ABD	E4A876	FDC010	D3DCAD	C5E9D0
—	1.3 Fail	1.7 Fail	1.9 Fail	2.1 Fail
1.3 Fail	—	1.3 Fail	1.4 Fail	1.6 Fail
1.7 Fail	1.3 Fail	—	1.1 Fail	1.3 Fail
1.9 Fail	1.4 Fail	1.1 Fail	—	1.1 Fail
2.1 Fail	1.6 Fail	1.3 Fail	1.1 Fail	—

White BG

2.7Fail

2.1Fail

1.7Fail

1.4Fail

1.3Fail

Black BG

7.7AAA

10.2AAA

12.7AAA

14.6AAA

15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA9B1

CAC982

E3E23B

D7D7B8

D5D5D6

Deuteranopia

ADB1AE

CED285

E6EB45

D6D6BB

D3D0D8

Tritanopia

BFA7A5

E18C8E

FA5C64

D3C1C3

C7DBDC

Achromatopsia

A1A1A1

B4B4B4

BEBEBE

D4D4D4

DBDBDB

Shades & Tints Shades & Tints

#C28ABD

Dark

Light

#E4A876

Dark

Light

#FDC010

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c28abd;
  --color-2: #e4a876;
  --color-3: #fdc010;
  --color-4: #d3dcad;
  --color-5: #c5e9d0;
}

SCSS

$color-1: #c28abd;
$color-2: #e4a876;
$color-3: #fdc010;
$color-4: #d3dcad;
$color-5: #c5e9d0;

TAILWIND

colors: {
  'brand-1': '#c28abd',
  'brand-2': '#e4a876',
  'brand-3': '#fdc010',
  'brand-4': '#d3dcad',
  'brand-5': '#c5e9d0',
}

RGB Array

[194, 138, 189], [228, 168, 118], [253, 192, 16], [211, 220, 173], [197, 233, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #C28ABD, #E4A876, #FDC010, #D3DCAD, #C5E9D0 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: #c28abd; --color-2: #e4a876; --color-3: #fdc010; --color-4: #d3dcad; --color-5: #c5e9d0. 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