#5983BC + #908C9A + #BFA18B + #FE8474 + #FAE7D1 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5983BC

Azure · SteelBlue · Navy Blue

HEX

#5983BC

RGB

rgb(89, 131, 188)

HSL

hsl(215, 42%, 54%)

HSB

hsb(215, 53%, 74%)

CMYK

cmyk(53%, 30%, 0%, 26%)

Oklch

oklch(60.4% 0.099 256.3)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#908C9A

Ash · LightSlateGray · Silver Sand

HEX

#908C9A

RGB

rgb(144, 140, 154)

HSL

hsl(257, 6%, 58%)

HSB

hsb(257, 9%, 60%)

CMYK

cmyk(6%, 9%, 0%, 40%)

Oklch

oklch(64.8% 0.021 298.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#BFA18B

Apricot · Tan · Warm Sun

HEX

#BFA18B

RGB

rgb(191, 161, 139)

HSL

hsl(25, 29%, 65%)

HSB

hsb(25, 27%, 75%)

CMYK

cmyk(0%, 16%, 27%, 25%)

Oklch

oklch(73.0% 0.047 58.2)

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

#FE8474

Peach Pink · Salmon · Coral Red

HEX

#FE8474

RGB

rgb(254, 132, 116)

HSL

hsl(7, 99%, 73%)

HSB

hsb(7, 54%, 100%)

CMYK

cmyk(0%, 48%, 54%, 0%)

Oklch

oklch(74.7% 0.151 28.9)

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

#FAE7D1

Goose Yellow · Bisque · Peach Orange

HEX

#FAE7D1

RGB

rgb(250, 231, 209)

HSL

hsl(32, 80%, 90%)

HSB

hsb(32, 16%, 98%)

CMYK

cmyk(0%, 8%, 16%, 2%)

Oklch

oklch(93.7% 0.036 71.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5983BC

BB9258

Analogous

58B3BB

5983BC

6158BB

Triadic

5983BC

BB5881

81BB58

Split-Comp.

5983BC

BB6158

B3BB58

Tetradic

5983BC

BB58B3

BB9258

58BB61

Contrast Matrix WCAG 2.1 Contrast

5983BC	908C9A	BFA18B	FE8474	FAE7D1
—	1.2 Fail	1.6 Fail	1.6 Fail	3.2 AA Large
1.2 Fail	—	1.4 Fail	1.4 Fail	2.7 Fail
1.6 Fail	1.4 Fail	—	1.0 Fail	2.0 Fail
1.6 Fail	1.4 Fail	1.0 Fail	—	2.0 Fail
3.2 AA Large	2.7 Fail	2.0 Fail	2.0 Fail	—

White BG

3.9AA Large

3.3AA Large

2.4Fail

1.2Fail

Black BG

5.4AA

6.4AA

8.7AAA

8.8AAA

17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6CAE

8E8E97

B2B290

C9C878

F2F2D6

Deuteranopia

6966AB

8F8F96

B4B692

D0D979

F3F4D8

Tritanopia

5BA3A1

909493

BE9595

F87B7C

F9DBDB

Achromatopsia

7D7D7D

8F8F8F

A7A7A7

EAEAEA

Shades & Tints Shades & Tints

#5983BC

Dark

Light

#908C9A

Dark

Light

#BFA18B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5983bc;
  --color-2: #908c9a;
  --color-3: #bfa18b;
  --color-4: #fe8474;
  --color-5: #fae7d1;
}

SCSS

$color-1: #5983bc;
$color-2: #908c9a;
$color-3: #bfa18b;
$color-4: #fe8474;
$color-5: #fae7d1;

TAILWIND

colors: {
  'brand-1': '#5983bc',
  'brand-2': '#908c9a',
  'brand-3': '#bfa18b',
  'brand-4': '#fe8474',
  'brand-5': '#fae7d1',
}

RGB Array

[89, 131, 188], [144, 140, 154], [191, 161, 139], [254, 132, 116], [250, 231, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #5983BC, #908C9A, #BFA18B, #FE8474, #FAE7D1 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: #5983bc; --color-2: #908c9a; --color-3: #bfa18b; --color-4: #fe8474; --color-5: #fae7d1. 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