#957685 + #C48F81 + #FFB787 + #FCDCA1 + #D1DBC2 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#957685

Dark Violet · Gray · Rose Pink

HEX

#957685

RGB

rgb(149, 118, 133)

HSL

hsl(331, 13%, 52%)

HSB

hsb(331, 21%, 58%)

CMYK

cmyk(0%, 21%, 11%, 42%)

Oklch

oklch(60.0% 0.044 347.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#C48F81

Peach Pink · DarkSalmon · Coral Red

HEX

#C48F81

RGB

rgb(196, 143, 129)

HSL

hsl(13, 36%, 64%)

HSB

hsb(13, 34%, 77%)

CMYK

cmyk(0%, 27%, 34%, 23%)

Oklch

oklch(69.8% 0.068 35.3)

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

#FFB787

Apricot · LightSalmon · Peach Orange

HEX

#FFB787

RGB

rgb(255, 183, 135)

HSL

hsl(24, 100%, 76%)

HSB

hsb(24, 47%, 100%)

CMYK

cmyk(0%, 28%, 47%, 0%)

Oklch

oklch(83.6% 0.105 54.5)

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

#FCDCA1

Goose Yellow · Wheat · Peach Orange

HEX

#FCDCA1

RGB

rgb(252, 220, 161)

HSL

hsl(39, 94%, 81%)

HSB

hsb(39, 36%, 99%)

CMYK

cmyk(0%, 13%, 36%, 1%)

Oklch

oklch(90.8% 0.083 82.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#D1DBC2

Willow Green · LightGray · Mint Green

HEX

#D1DBC2

RGB

rgb(209, 219, 194)

HSL

hsl(84, 26%, 81%)

HSB

hsb(84, 11%, 86%)

CMYK

cmyk(5%, 0%, 11%, 14%)

Oklch

oklch(87.7% 0.035 124.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

957685

759585

Analogous

957594

957685

957575

Triadic

957685

849575

758495

Split-Comp.

957685

759575

759495

Tetradic

957685

949575

759585

757595

Contrast Matrix WCAG 2.1 Contrast

957685	C48F81	FFB787	FCDCA1	D1DBC2
—	1.5 Fail	2.4 Fail	3.1 AA Large	2.8 Fail
1.5 Fail	—	1.6 Fail	2.1 Fail	1.9 Fail
2.4 Fail	1.6 Fail	—	1.3 Fail	1.2 Fail
3.1 AA Large	2.1 Fail	1.3 Fail	—	1.1 Fail
2.8 Fail	1.9 Fail	1.2 Fail	1.1 Fail	—

White BG

4.0AA Large

2.8Fail

1.7Fail

1.3Fail

1.4Fail

Black BG

5.2AA

7.6AAA

12.4AAA

15.9AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

888781

ADAD84

E0DF93

EEEEAF

D5D5C8

Deuteranopia

898C81

B0B485

E4E995

F0F2B3

D5D4CA

Tritanopia

937F7E

C18788

FB9C9E

FABBBD

D1CDCE

Achromatopsia

818181

9D9D9D

C7C7C7

DFDFDF

D5D5D5

Shades & Tints Shades & Tints

#957685

Dark

Light

#C48F81

Dark

Light

#FFB787

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #957685;
  --color-2: #c48f81;
  --color-3: #ffb787;
  --color-4: #fcdca1;
  --color-5: #d1dbc2;
}

SCSS

$color-1: #957685;
$color-2: #c48f81;
$color-3: #ffb787;
$color-4: #fcdca1;
$color-5: #d1dbc2;

TAILWIND

colors: {
  'brand-1': '#957685',
  'brand-2': '#c48f81',
  'brand-3': '#ffb787',
  'brand-4': '#fcdca1',
  'brand-5': '#d1dbc2',
}

RGB Array

[149, 118, 133], [196, 143, 129], [255, 183, 135], [252, 220, 161], [209, 219, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #957685, #C48F81, #FFB787, #FCDCA1, #D1DBC2 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: #957685; --color-2: #c48f81; --color-3: #ffb787; --color-4: #fcdca1; --color-5: #d1dbc2. 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