#978E90 + #F8C9A5 + #F8BBB1 + #CEB8BD + #BCBACA · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#978E90

Ash · Gray · Silver Sand

HEX

#978E90

RGB

rgb(151, 142, 144)

HSL

hsl(347, 4%, 57%)

HSB

hsb(347, 6%, 59%)

CMYK

cmyk(0%, 6%, 5%, 41%)

Oklch

oklch(65.5% 0.011 2.2)

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

#F8C9A5

Apricot · Wheat · Peach Orange

HEX

#F8C9A5

RGB

rgb(248, 201, 165)

HSL

hsl(26, 86%, 81%)

HSB

hsb(26, 33%, 97%)

CMYK

cmyk(0%, 19%, 33%, 3%)

Oklch

oklch(86.8% 0.072 59.1)

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

#F8BBB1

Peach Pink · LightPink · Cherry Blossom

HEX

#F8BBB1

RGB

rgb(248, 187, 177)

HSL

hsl(8, 84%, 83%)

HSB

hsb(8, 29%, 97%)

CMYK

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

Oklch

oklch(84.5% 0.072 29.2)

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

#CEB8BD

Peach Pink · Silver · Coral Red

HEX

#CEB8BD

RGB

rgb(206, 184, 189)

HSL

hsl(346, 18%, 76%)

HSB

hsb(346, 11%, 81%)

CMYK

cmyk(0%, 11%, 8%, 19%)

Oklch

oklch(80.3% 0.026 2.2)

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

#BCBACA

Wisteria · Silver · Cobalt Blue

HEX

#BCBACA

RGB

rgb(188, 186, 202)

HSL

hsl(248, 13%, 76%)

HSB

hsb(248, 8%, 79%)

CMYK

cmyk(7%, 8%, 0%, 21%)

Oklch

oklch(79.5% 0.022 291.6)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

978E90

8D9694

Analogous

968D93

978E90

968F8D

Triadic

978E90

8F968D

8D8F96

Split-Comp.

978E90

8D968F

8D9396

Tetradic

978E90

93968D

8D9694

8F8D96

Contrast Matrix WCAG 2.1 Contrast

978E90	F8C9A5	F8BBB1	CEB8BD	BCBACA
—	2.1 Fail	1.9 Fail	1.7 Fail	1.7 Fail
2.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.9 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.7 Fail	1.2 Fail	1.1 Fail	—	1.0 Fail
1.7 Fail	1.3 Fail	1.2 Fail	1.0 Fail	—

White BG

3.2AA Large

1.5Fail

1.6Fail

1.9Fail

Black BG

6.6AA

13.9AAA

12.7AAA

11.2AAA

11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

939390

E4E3AE

DEDDB3

C4C4BC

BBBBC6

Deuteranopia

94948F

E6EAB0

E1E6B4

C6C7BB

BBBBC5

Tritanopia

978F8F

F6B5B6

F5B5B6

CDBBBB

BCC3C2

Achromatopsia

919191

D3D3D3

CCCCCC

BFBFBF

BCBCBC

Shades & Tints Shades & Tints

#978E90

Dark

Light

#F8C9A5

Dark

Light

#F8BBB1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #978e90;
  --color-2: #f8c9a5;
  --color-3: #f8bbb1;
  --color-4: #ceb8bd;
  --color-5: #bcbaca;
}

SCSS

$color-1: #978e90;
$color-2: #f8c9a5;
$color-3: #f8bbb1;
$color-4: #ceb8bd;
$color-5: #bcbaca;

TAILWIND

colors: {
  'brand-1': '#978e90',
  'brand-2': '#f8c9a5',
  'brand-3': '#f8bbb1',
  'brand-4': '#ceb8bd',
  'brand-5': '#bcbaca',
}

RGB Array

[151, 142, 144], [248, 201, 165], [248, 187, 177], [206, 184, 189], [188, 186, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #978E90, #F8C9A5, #F8BBB1, #CEB8BD, #BCBACA 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: #978e90; --color-2: #f8c9a5; --color-3: #f8bbb1; --color-4: #ceb8bd; --color-5: #bcbaca. 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