#AFCAFB + #B5B4E5 + #CBACCF + #D1A2A5 + #CA978C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFCAFB

Azure · LightBlue · Sky Blue

HEX

#AFCAFB

RGB

rgb(175, 202, 251)

HSL

hsl(219, 90%, 84%)

HSB

hsb(219, 30%, 98%)

CMYK

cmyk(30%, 20%, 0%, 2%)

Oklch

oklch(83.6% 0.075 262.2)

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

#B5B4E5

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#B5B4E5

RGB

rgb(181, 180, 229)

HSL

hsl(241, 49%, 80%)

HSB

hsb(241, 21%, 90%)

CMYK

cmyk(21%, 21%, 0%, 10%)

Oklch

oklch(78.8% 0.069 285.6)

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

#CBACCF

Lilac · Silver · Lilac Purple

HEX

#CBACCF

RGB

rgb(203, 172, 207)

HSL

hsl(293, 27%, 74%)

HSB

hsb(293, 17%, 81%)

CMYK

cmyk(2%, 17%, 0%, 19%)

Oklch

oklch(78.3% 0.060 322.4)

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

#D1A2A5

Peach Pink · Tan · Coral Red

HEX

#D1A2A5

RGB

rgb(209, 162, 165)

HSL

hsl(356, 34%, 73%)

HSB

hsb(356, 22%, 82%)

CMYK

cmyk(0%, 22%, 21%, 18%)

Oklch

oklch(75.6% 0.056 14.2)

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

#CA978C

Peach Pink · Tan · Coral Red

HEX

#CA978C

RGB

rgb(202, 151, 140)

HSL

hsl(11, 37%, 67%)

HSB

hsb(11, 31%, 79%)

CMYK

cmyk(0%, 25%, 31%, 21%)

Oklch

oklch(72.2% 0.064 32.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFCAFB

FBE1B1

Analogous

B1F0FB

AFCAFB

BCB1FB

Triadic

AFCAFB

FBB1CB

CBFBB1

Split-Comp.

AFCAFB

FBBCB1

F0FBB1

Tetradic

AFCAFB

FBB1F0

FBE1B1

B1FBBC

Contrast Matrix WCAG 2.1 Contrast

AFCAFB	B5B4E5	CBACCF	D1A2A5	CA978C
—	1.2 Fail	1.2 Fail	1.3 Fail	1.5 Fail
1.2 Fail	—	1.0 Fail	1.1 Fail	1.3 Fail
1.2 Fail	1.0 Fail	—	1.1 Fail	1.2 Fail
1.3 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.7Fail

2.0Fail

2.2Fail

2.5Fail

Black BG

12.7AAA

10.6AAA

10.3AAA

9.4AAA

8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBEF

B5B5D9

BEBDC7

BDBCA4

B4B38F

Deuteranopia

B9B7EC

B5B5D6

BFC2C4

BFC3A4

B7BB8F

Tritanopia

B0E6E4

B5D0CE

C9C0BE

CFA4A4

C79191

Achromatopsia

C8C8C8

BABABA

B9B9B9

B0B0B0

A5A5A5

Shades & Tints Shades & Tints

#AFCAFB

Dark

Light

#B5B4E5

Dark

Light

#CBACCF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afcafb;
  --color-2: #b5b4e5;
  --color-3: #cbaccf;
  --color-4: #d1a2a5;
  --color-5: #ca978c;
}

SCSS

$color-1: #afcafb;
$color-2: #b5b4e5;
$color-3: #cbaccf;
$color-4: #d1a2a5;
$color-5: #ca978c;

TAILWIND

colors: {
  'brand-1': '#afcafb',
  'brand-2': '#b5b4e5',
  'brand-3': '#cbaccf',
  'brand-4': '#d1a2a5',
  'brand-5': '#ca978c',
}

RGB Array

[175, 202, 251], [181, 180, 229], [203, 172, 207], [209, 162, 165], [202, 151, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFCAFB, #B5B4E5, #CBACCF, #D1A2A5, #CA978C 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: #afcafb; --color-2: #b5b4e5; --color-3: #cbaccf; --color-4: #d1a2a5; --color-5: #ca978c. 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