#AF9995 + #DA80AB + #B686C4 + #9185D6 + #7487CF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AF9995

Peach Pink · DarkGray · Coral Red

HEX

#AF9995

RGB

rgb(175, 153, 149)

HSL

hsl(9, 14%, 64%)

HSB

hsb(9, 15%, 69%)

CMYK

cmyk(0%, 13%, 15%, 31%)

Oklch

oklch(70.1% 0.027 30.0)

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

#DA80AB

Rouge · Orchid · Rose Pink

HEX

#DA80AB

RGB

rgb(218, 128, 171)

HSL

hsl(331, 55%, 68%)

HSB

hsb(331, 41%, 85%)

CMYK

cmyk(0%, 41%, 22%, 15%)

Oklch

oklch(70.9% 0.122 350.6)

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

#B686C4

Lilac · Orchid · Lilac Purple

HEX

#B686C4

RGB

rgb(182, 134, 196)

HSL

hsl(286, 34%, 65%)

HSB

hsb(286, 32%, 77%)

CMYK

cmyk(7%, 32%, 0%, 23%)

Oklch

oklch(68.8% 0.103 318.5)

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

#9185D6

Wisteria · MediumSlateBlue · Cobalt Blue

HEX

#9185D6

RGB

rgb(145, 133, 214)

HSL

hsl(249, 50%, 68%)

HSB

hsb(249, 38%, 84%)

CMYK

cmyk(32%, 38%, 0%, 16%)

Oklch

oklch(66.0% 0.119 289.5)

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

#7487CF

Azure · CornflowerBlue · Cobalt Blue

HEX

#7487CF

RGB

rgb(116, 135, 207)

HSL

hsl(227, 49%, 63%)

HSB

hsb(227, 44%, 81%)

CMYK

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

Oklch

oklch(63.9% 0.111 271.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AF9995

96ACB0

Analogous

B0969F

AF9995

B0A796

Triadic

AF9995

96B09A

9A96B0

Split-Comp.

AF9995

96B0A7

969FB0

Tetradic

AF9995

9FB096

96ACB0

A796B0

Contrast Matrix WCAG 2.1 Contrast

AF9995	DA80AB	B686C4	9185D6	7487CF
—	1.0 Fail	1.1 Fail	1.2 Fail	1.3 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.3 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

2.7Fail

2.9Fail

3.2AA Large

3.4AA Large

Black BG

7.8AAA

7.7AAA

7.2AAA

6.5AA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A596

B3B2A1

A1A1B5

8C8CC2

7C7CBE

Deuteranopia

A7A896

B8BF9E

A4A8B1

8D8DBE

7B7AB9

Tritanopia

AE9797

D69897

B4A9A7

90B3B0

75B0AD

Achromatopsia

9F9F9F

A0A0A0

9B9B9B

929292

8A8A8A

Shades & Tints Shades & Tints

#AF9995

Dark

Light

#DA80AB

Dark

Light

#B686C4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #af9995;
  --color-2: #da80ab;
  --color-3: #b686c4;
  --color-4: #9185d6;
  --color-5: #7487cf;
}

SCSS

$color-1: #af9995;
$color-2: #da80ab;
$color-3: #b686c4;
$color-4: #9185d6;
$color-5: #7487cf;

TAILWIND

colors: {
  'brand-1': '#af9995',
  'brand-2': '#da80ab',
  'brand-3': '#b686c4',
  'brand-4': '#9185d6',
  'brand-5': '#7487cf',
}

RGB Array

[175, 153, 149], [218, 128, 171], [182, 134, 196], [145, 133, 214], [116, 135, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AF9995, #DA80AB, #B686C4, #9185D6, #7487CF 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: #af9995; --color-2: #da80ab; --color-3: #b686c4; --color-4: #9185d6; --color-5: #7487cf. 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 general-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