#838594 + #B1A0AA + #D2B2B5 + #E9C2BB + #F3CEBB · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#838594

Ash · LightSlateGray · Warm Gray

HEX

#838594

RGB

rgb(131, 133, 148)

HSL

hsl(233, 7%, 55%)

HSB

hsb(233, 11%, 58%)

CMYK

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

Oklch

oklch(62.0% 0.023 279.7)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#B1A0AA

Mauve · DarkGray · Rose Pink

HEX

#B1A0AA

RGB

rgb(177, 160, 170)

HSL

hsl(325, 10%, 66%)

HSB

hsb(325, 10%, 69%)

CMYK

cmyk(0%, 10%, 4%, 31%)

Oklch

oklch(72.3% 0.024 341.5)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#D2B2B5

Peach Pink · Silver · Coral Red

HEX

#D2B2B5

RGB

rgb(210, 178, 181)

HSL

hsl(354, 26%, 76%)

HSB

hsb(354, 15%, 82%)

CMYK

cmyk(0%, 15%, 14%, 18%)

Oklch

oklch(79.2% 0.037 11.6)

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

#E9C2BB

Peach Pink · LightPink · Cherry Blossom

HEX

#E9C2BB

RGB

rgb(233, 194, 187)

HSL

hsl(9, 51%, 82%)

HSB

hsb(9, 20%, 91%)

CMYK

cmyk(0%, 17%, 20%, 9%)

Oklch

oklch(84.6% 0.046 29.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F3CEBB

Apricot · Wheat · Peach Orange

HEX

#F3CEBB

RGB

rgb(243, 206, 187)

HSL

hsl(20, 70%, 84%)

HSB

hsb(20, 23%, 95%)

CMYK

cmyk(0%, 15%, 23%, 5%)

Oklch

oklch(87.8% 0.049 48.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

838594

949284

Analogous

848E94

838594

8A8494

Triadic

838594

948486

869484

Split-Comp.

838594

948A84

8E9484

Tetradic

838594

94848E

949284

84948A

Contrast Matrix WCAG 2.1 Contrast

838594	B1A0AA	D2B2B5	E9C2BB	F3CEBB
—	1.5 Fail	1.9 Fail	2.2 Fail	2.5 Fail
1.5 Fail	—	1.3 Fail	1.5 Fail	1.7 Fail
1.9 Fail	1.3 Fail	—	1.2 Fail	1.3 Fail
2.2 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.5 Fail	1.7 Fail	1.3 Fail	1.1 Fail	—

White BG

3.7AA Large

2.5Fail

1.9Fail

1.6Fail

1.5Fail

Black BG

5.7AA

8.5AAA

10.8AAA

12.9AAA

14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

848490

AAA9A8

C4C4B4

D8D8BD

E3E3C0

Deuteranopia

848490

ABACA7

C6C8B4

DADDBD

E5E8C1

Tritanopia

838E8D

B0A6A5

D0B4B4

E7BEBE

F1C3C4

Achromatopsia

868686

A6A6A6

BCBCBC

CDCDCD

D7D7D7

Shades & Tints Shades & Tints

#838594

Dark

Light

#B1A0AA

Dark

Light

#D2B2B5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #838594;
  --color-2: #b1a0aa;
  --color-3: #d2b2b5;
  --color-4: #e9c2bb;
  --color-5: #f3cebb;
}

SCSS

$color-1: #838594;
$color-2: #b1a0aa;
$color-3: #d2b2b5;
$color-4: #e9c2bb;
$color-5: #f3cebb;

TAILWIND

colors: {
  'brand-1': '#838594',
  'brand-2': '#b1a0aa',
  'brand-3': '#d2b2b5',
  'brand-4': '#e9c2bb',
  'brand-5': '#f3cebb',
}

RGB Array

[131, 133, 148], [177, 160, 170], [210, 178, 181], [233, 194, 187], [243, 206, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #838594, #B1A0AA, #D2B2B5, #E9C2BB, #F3CEBB 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: #838594; --color-2: #b1a0aa; --color-3: #d2b2b5; --color-4: #e9c2bb; --color-5: #f3cebb. 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