#FFDB87 + #FFBE8F + #CF86A9 + #817294 + #8999B3 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFDB87

Goose Yellow · Khaki · Lemon Cream

HEX

#FFDB87

RGB

rgb(255, 219, 135)

HSL

hsl(42, 100%, 76%)

HSB

hsb(42, 47%, 100%)

CMYK

cmyk(0%, 14%, 47%, 0%)

Oklch

oklch(90.4% 0.111 87.0)

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

#FFBE8F

Apricot · BurlyWood · Peach Orange

HEX

#FFBE8F

RGB

rgb(255, 190, 143)

HSL

hsl(25, 100%, 78%)

HSB

hsb(25, 44%, 100%)

CMYK

cmyk(0%, 25%, 44%, 0%)

Oklch

oklch(85.0% 0.097 56.9)

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

#CF86A9

Rouge · Orchid · Rose Pink

HEX

#CF86A9

RGB

rgb(207, 134, 169)

HSL

hsl(331, 43%, 67%)

HSB

hsb(331, 35%, 81%)

CMYK

cmyk(0%, 35%, 18%, 19%)

Oklch

oklch(70.5% 0.100 349.7)

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

#817294

Deep Indigo · SlateGray · Violet

HEX

#817294

RGB

rgb(129, 114, 148)

HSL

hsl(266, 14%, 51%)

HSB

hsb(266, 23%, 58%)

CMYK

cmyk(13%, 23%, 0%, 42%)

Oklch

oklch(57.8% 0.054 304.8)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#8999B3

Azure · LightSlateGray · Cobalt Blue

HEX

#8999B3

RGB

rgb(137, 153, 179)

HSL

hsl(217, 22%, 62%)

HSB

hsb(217, 23%, 70%)

CMYK

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

Oklch

oklch(67.9% 0.043 260.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFDB87

85A9FF

Analogous

FF9D85

FFDB87

E7FF85

Triadic

FFDB87

85FFDA

DA85FF

Split-Comp.

FFDB87

85E7FF

9D85FF

Tetradic

FFDB87

85FF9D

85A9FF

FF85E7

Contrast Matrix WCAG 2.1 Contrast

FFDB87	FFBE8F	CF86A9	817294	8999B3
—	1.2 Fail	2.1 Fail	3.3 AA Large	2.2 Fail
1.2 Fail	—	1.7 Fail	2.7 Fail	1.8 Fail
2.1 Fail	1.7 Fail	—	1.6 Fail	1.1 Fail
3.3 AA Large	2.7 Fail	1.6 Fail	—	1.5 Fail
2.2 Fail	1.8 Fail	1.1 Fail	1.5 Fail	—

White BG

1.3Fail

1.6Fail

2.8Fail

4.4AA Large

2.9Fail

Black BG

15.7AAA

13.0AAA

7.6AAA

4.8AA

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEF9B

E3E29A

AFAFA1

7B7A8C

9090AD

Deuteranopia

F2F4A0

E7EC9D

B4B99F

7B7D8A

8F8EAB

Tritanopia

FDABAF

FCA3A5

CB9A98

808584

8AA8A7

Achromatopsia

DCDCDC

CCCCCC

A0A0A0

7A7A7A

979797

Shades & Tints Shades & Tints

#FFDB87

Dark

Light

#FFBE8F

Dark

Light

#CF86A9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffdb87;
  --color-2: #ffbe8f;
  --color-3: #cf86a9;
  --color-4: #817294;
  --color-5: #8999b3;
}

SCSS

$color-1: #ffdb87;
$color-2: #ffbe8f;
$color-3: #cf86a9;
$color-4: #817294;
$color-5: #8999b3;

TAILWIND

colors: {
  'brand-1': '#ffdb87',
  'brand-2': '#ffbe8f',
  'brand-3': '#cf86a9',
  'brand-4': '#817294',
  'brand-5': '#8999b3',
}

RGB Array

[255, 219, 135], [255, 190, 143], [207, 134, 169], [129, 114, 148], [137, 153, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #FFDB87, #FFBE8F, #CF86A9, #817294, #8999B3 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: #ffdb87; --color-2: #ffbe8f; --color-3: #cf86a9; --color-4: #817294; --color-5: #8999b3. 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