#AFADD4 + #FC6AB5 + #E79FAB + #E0CEA6 + #E8DBEF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFADD4

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#AFADD4

RGB

rgb(175, 173, 212)

HSL

hsl(243, 31%, 75%)

HSB

hsb(243, 18%, 83%)

CMYK

cmyk(17%, 18%, 0%, 17%)

Oklch

oklch(76.2% 0.055 287.4)

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

#FC6AB5

Mauve · Orchid · Rose Pink

HEX

#FC6AB5

RGB

rgb(252, 106, 181)

HSL

hsl(329, 96%, 70%)

HSB

hsb(329, 58%, 99%)

CMYK

cmyk(0%, 58%, 28%, 1%)

Oklch

oklch(72.6% 0.194 351.0)

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

#E79FAB

Peach Pink · LightPink · Coral Red

HEX

#E79FAB

RGB

rgb(231, 159, 171)

HSL

hsl(350, 60%, 76%)

HSB

hsb(350, 31%, 91%)

CMYK

cmyk(0%, 31%, 26%, 9%)

Oklch

oklch(77.6% 0.087 8.3)

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

#E0CEA6

Goose Yellow · Wheat · Lemon Cream

HEX

#E0CEA6

RGB

rgb(224, 206, 166)

HSL

hsl(41, 48%, 76%)

HSB

hsb(41, 26%, 88%)

CMYK

cmyk(0%, 8%, 26%, 12%)

Oklch

oklch(85.6% 0.057 86.6)

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

#E8DBEF

Lilac · Lavender · Lavender

HEX

#E8DBEF

RGB

rgb(232, 219, 239)

HSL

hsl(279, 38%, 90%)

HSB

hsb(279, 8%, 94%)

CMYK

cmyk(3%, 8%, 0%, 6%)

Oklch

oklch(90.8% 0.030 314.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFADD4

D1D3AB

Analogous

ABBDD3

AFADD4

C1ABD3

Triadic

AFADD4

D3ADAB

ABD3AD

Split-Comp.

AFADD4

D3C1AB

BDD3AB

Tetradic

AFADD4

D3ABBD

D1D3AB

ABD3C1

Contrast Matrix WCAG 2.1 Contrast

AFADD4	FC6AB5	E79FAB	E0CEA6	E8DBEF
—	1.2 Fail	1.0 Fail	1.4 Fail	1.6 Fail
1.2 Fail	—	1.3 Fail	1.7 Fail	2.0 Fail
1.0 Fail	1.3 Fail	—	1.4 Fail	1.6 Fail
1.4 Fail	1.7 Fail	1.4 Fail	—	1.2 Fail
1.6 Fail	2.0 Fail	1.6 Fail	1.2 Fail	—

White BG

2.2Fail

2.7Fail

2.1Fail

1.5Fail

1.3Fail

Black BG

9.8AAA

7.9AAA

9.9AAA

13.5AAA

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAECB

BDBBA3

C8C7A8

D8D8B0

E2E2EA

Deuteranopia

AEAEC8

C5D09F

CCD1A7

D9DBB2

E3E4E9

Tritanopia

AFC3C1

F59591

E3A6A5

DFB7B9

E7E6E6

Achromatopsia

B2B2B2

9E9E9E

B6B6B6

CFCFCF

E1E1E1

Shades & Tints Shades & Tints

#AFADD4

Dark

Light

#FC6AB5

Dark

Light

#E79FAB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afadd4;
  --color-2: #fc6ab5;
  --color-3: #e79fab;
  --color-4: #e0cea6;
  --color-5: #e8dbef;
}

SCSS

$color-1: #afadd4;
$color-2: #fc6ab5;
$color-3: #e79fab;
$color-4: #e0cea6;
$color-5: #e8dbef;

TAILWIND

colors: {
  'brand-1': '#afadd4',
  'brand-2': '#fc6ab5',
  'brand-3': '#e79fab',
  'brand-4': '#e0cea6',
  'brand-5': '#e8dbef',
}

RGB Array

[175, 173, 212], [252, 106, 181], [231, 159, 171], [224, 206, 166], [232, 219, 239]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFADD4, #FC6AB5, #E79FAB, #E0CEA6, #E8DBEF 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: #afadd4; --color-2: #fc6ab5; --color-3: #e79fab; --color-4: #e0cea6; --color-5: #e8dbef. 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