← Back to Editor

#BB8D9B · #F8AB63 · #FFE5AA · #D6ECEF · #9DC0E6

sunset

A 5-color sunset palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#BB8D9B

Rouge · DarkGray · Rose Pink

HEX
#BB8D9B
RGB
rgb(187, 141, 155)
HSL
hsl(342, 25%, 64%)
HSB
hsb(342, 25%, 73%)
CMYK
cmyk(0%, 25%, 17%, 27%)
Oklch
oklch(69.1% 0.059 358.7)

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

#F8AB63

Apricot · SandyBrown · Warm Sun

HEX
#F8AB63
RGB
rgb(248, 171, 99)
HSL
hsl(29, 91%, 68%)
HSB
hsb(29, 60%, 97%)
CMYK
cmyk(0%, 31%, 60%, 3%)
Oklch
oklch(80.1% 0.127 62.4)

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

#FFE5AA

Goose Yellow · Wheat · Lemon Cream

HEX
#FFE5AA
RGB
rgb(255, 229, 170)
HSL
hsl(42, 100%, 83%)
HSB
hsb(42, 33%, 100%)
CMYK
cmyk(0%, 10%, 33%, 0%)
Oklch
oklch(92.9% 0.080 86.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D6ECEF

Sky Blue · Lavender · Glacier Blue

HEX
#D6ECEF
RGB
rgb(214, 236, 239)
HSL
hsl(187, 44%, 89%)
HSB
hsb(187, 10%, 94%)
CMYK
cmyk(10%, 1%, 0%, 6%)
Oklch
oklch(92.8% 0.024 206.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#9DC0E6

Azure · LightSteelBlue · Cobalt Blue

HEX
#9DC0E6
RGB
rgb(157, 192, 230)
HSL
hsl(211, 59%, 76%)
HSB
hsb(211, 32%, 90%)
CMYK
cmyk(32%, 17%, 0%, 10%)
Oklch
oklch(79.5% 0.066 250.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB8D9B
8CBAAC

Analogous

BA8CB1
BB8D9B
BA958C

Triadic

BB8D9B
9ABA8C
8C9ABA

Split-Comp.

BB8D9B
8CBA95
8CB1BA

Tetradic

BB8D9B
B1BA8C
8CBAAC
958CBA

Contrast Matrix WCAG 2.1 Contrast

BB8D9B
F8AB63
FFE5AA
D6ECEF
9DC0E6
—
1.5
Fail
2.3
Fail
2.3
Fail
1.5
Fail
1.5
Fail
—
1.5
Fail
1.6
Fail
1.0
Fail
2.3
Fail
1.5
Fail
—
1.0
Fail
1.5
Fail
2.3
Fail
1.6
Fail
1.0
Fail
—
1.5
Fail
1.5
Fail
1.0
Fail
1.5
Fail
1.5
Fail
—
White BG
2.8Fail
1.9Fail
1.2Fail
1.2Fail
1.9Fail
Black BG
7.4AAA
11.0AAA
17.0AAA
17.1AAA
11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A798
D7D674
F4F4B8
E0E0EE
ACACDD

Deuteranopia

AAAD97
DBE179
F5F7BC
DEDDEE
AAA8DB

Tritanopia

B99594
F48285
FEC4C6
D7EEEE
9FD6D4

Achromatopsia

9C9C9C
BABABA
E6E6E6
E6E6E6
BABABA

Shades & Tints Shades & Tints

#BB8D9B

Dark
Light

#F8AB63

Dark
Light

#FFE5AA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb8d9b;
  --color-2: #f8ab63;
  --color-3: #ffe5aa;
  --color-4: #d6ecef;
  --color-5: #9dc0e6;
}

SCSS

$color-1: #bb8d9b;
$color-2: #f8ab63;
$color-3: #ffe5aa;
$color-4: #d6ecef;
$color-5: #9dc0e6;

TAILWIND

colors: {
  'brand-1': '#bb8d9b',
  'brand-2': '#f8ab63',
  'brand-3': '#ffe5aa',
  'brand-4': '#d6ecef',
  'brand-5': '#9dc0e6',
}

RGB Array

[187, 141, 155], [248, 171, 99], [255, 229, 170], [214, 236, 239], [157, 192, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #BB8D9B, #F8AB63, #FFE5AA, #D6ECEF, #9DC0E6 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #bb8d9b; --color-2: #f8ab63; --color-3: #ffe5aa; --color-4: #d6ecef; --color-5: #9dc0e6. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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