#FFB7A3 + #DFA8AC + #C099B6 + #A08ABF + #817BC9 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFB7A3

Peach Pink · LightPink · Cherry Blossom

HEX

#FFB7A3

RGB

rgb(255, 183, 163)

HSL

hsl(13, 100%, 82%)

HSB

hsb(13, 36%, 100%)

CMYK

cmyk(0%, 28%, 36%, 0%)

Oklch

oklch(84.2% 0.089 36.1)

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

#DFA8AC

Peach Pink · Tan · Coral Red

HEX

#DFA8AC

RGB

rgb(223, 168, 172)

HSL

hsl(356, 46%, 77%)

HSB

hsb(356, 25%, 87%)

CMYK

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

Oklch

oklch(78.4% 0.065 13.8)

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

#C099B6

Mauve · DarkGray · Lilac Purple

HEX

#C099B6

RGB

rgb(192, 153, 182)

HSL

hsl(315, 24%, 68%)

HSB

hsb(315, 20%, 75%)

CMYK

cmyk(0%, 20%, 5%, 25%)

Oklch

oklch(72.8% 0.061 335.5)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#A08ABF

Wisteria · DarkGray · Lilac Purple

HEX

#A08ABF

RGB

rgb(160, 138, 191)

HSL

hsl(265, 29%, 65%)

HSB

hsb(265, 28%, 75%)

CMYK

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

Oklch

oklch(67.2% 0.080 303.3)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#817BC9

Wisteria · SlateBlue · Cobalt Blue

HEX

#817BC9

RGB

rgb(129, 123, 201)

HSL

hsl(245, 42%, 64%)

HSB

hsb(245, 39%, 79%)

CMYK

cmyk(36%, 39%, 0%, 21%)

Oklch

oklch(62.1% 0.116 286.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFB7A3

A3EBFF

Analogous

FFA3BD

FFB7A3

FFE5A3

Triadic

FFB7A3

A3FFB7

B7A3FF

Split-Comp.

FFB7A3

A3FFE5

A3BDFF

Tetradic

FFB7A3

BDFFA3

A3EBFF

E5A3FF

Contrast Matrix WCAG 2.1 Contrast

FFB7A3	DFA8AC	C099B6	A08ABF	817BC9
—	1.2 Fail	1.5 Fail	1.8 Fail	2.2 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.8 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.8 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.2 Fail	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

1.7Fail

2.0Fail

2.5Fail

3.1AA Large

3.7AA Large

Black BG

12.6AAA

10.3AAA

8.5AAA

6.9AA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0DFA8

C7C7AB

AFAFAF

9696B2

7E7EB6

Deuteranopia

E4E9A9

CACFAB

B1B4AD

9899AF

7F7FB2

Tritanopia

FBACAD

DCAAAA

BEA9A8

9FA8A6

81A7A4

Achromatopsia

CACACA

B9B9B9

A8A8A8

979797

868686

Shades & Tints Shades & Tints

#FFB7A3

Dark

Light

#DFA8AC

Dark

Light

#C099B6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffb7a3;
  --color-2: #dfa8ac;
  --color-3: #c099b6;
  --color-4: #a08abf;
  --color-5: #817bc9;
}

SCSS

$color-1: #ffb7a3;
$color-2: #dfa8ac;
$color-3: #c099b6;
$color-4: #a08abf;
$color-5: #817bc9;

TAILWIND

colors: {
  'brand-1': '#ffb7a3',
  'brand-2': '#dfa8ac',
  'brand-3': '#c099b6',
  'brand-4': '#a08abf',
  'brand-5': '#817bc9',
}

RGB Array

[255, 183, 163], [223, 168, 172], [192, 153, 182], [160, 138, 191], [129, 123, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #FFB7A3, #DFA8AC, #C099B6, #A08ABF, #817BC9 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: #ffb7a3; --color-2: #dfa8ac; --color-3: #c099b6; --color-4: #a08abf; --color-5: #817bc9. 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