#CB83CC + #BDAEE8 + #AFD1FA + #D1E3D8 + #F6E9CB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CB83CC

Lilac · Orchid · Lilac Purple

HEX

#CB83CC

RGB

rgb(203, 131, 204)

HSL

hsl(299, 42%, 66%)

HSB

hsb(299, 36%, 80%)

CMYK

cmyk(0%, 36%, 0%, 20%)

Oklch

oklch(70.9% 0.130 326.4)

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

#BDAEE8

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#BDAEE8

RGB

rgb(189, 174, 232)

HSL

hsl(256, 56%, 80%)

HSB

hsb(256, 25%, 91%)

CMYK

cmyk(19%, 25%, 0%, 9%)

Oklch

oklch(78.4% 0.083 296.3)

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

#AFD1FA

Azure · LightBlue · Sky Blue

HEX

#AFD1FA

RGB

rgb(175, 209, 250)

HSL

hsl(213, 88%, 83%)

HSB

hsb(213, 30%, 98%)

CMYK

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

Oklch

oklch(85.0% 0.068 253.3)

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

#D1E3D8

Celadon · LightGray · Mint Green

HEX

#D1E3D8

RGB

rgb(209, 227, 216)

HSL

hsl(143, 24%, 85%)

HSB

hsb(143, 8%, 89%)

CMYK

cmyk(8%, 0%, 5%, 11%)

Oklch

oklch(89.9% 0.024 159.1)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#F6E9CB

Goose Yellow · Bisque · Lemon Cream

HEX

#F6E9CB

RGB

rgb(246, 233, 203)

HSL

hsl(42, 70%, 88%)

HSB

hsb(42, 17%, 96%)

CMYK

cmyk(0%, 5%, 17%, 4%)

Oklch

oklch(93.7% 0.042 87.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CB83CC

85CD84

Analogous

A784CD

CB83CC

CD84AA

Triadic

CB83CC

CDCC84

84CDCC

Split-Comp.

CB83CC

AACD84

84CDA7

Tetradic

CB83CC

CDA784

85CD84

84AACD

Contrast Matrix WCAG 2.1 Contrast

CB83CC	BDAEE8	AFD1FA	D1E3D8	F6E9CB
—	1.4 Fail	1.7 Fail	2.0 Fail	2.3 Fail
1.4 Fail	—	1.3 Fail	1.5 Fail	1.7 Fail
1.7 Fail	1.3 Fail	—	1.2 Fail	1.3 Fail
2.0 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.3 Fail	1.7 Fail	1.3 Fail	1.1 Fail	—

White BG

2.7Fail

2.0Fail

1.6Fail

1.3Fail

1.2Fail

Black BG

7.7AAA

10.4AAA

13.3AAA

15.7AAA

17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACABBA

B7B6DA

BEBEF0

D9D9DB

F0F0D2

Deuteranopia

B0B5B6

B7B8D7

BCB9EE

D8D6DB

F1F2D4

Tritanopia

C7ACA9

BCCFCC

B1E8E7

D2DDDD

F5D8D9

Achromatopsia

A1A1A1

B9B9B9

CCCCCC

DCDCDC

E9E9E9

Shades & Tints Shades & Tints

#CB83CC

Dark

Light

#BDAEE8

Dark

Light

#AFD1FA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cb83cc;
  --color-2: #bdaee8;
  --color-3: #afd1fa;
  --color-4: #d1e3d8;
  --color-5: #f6e9cb;
}

SCSS

$color-1: #cb83cc;
$color-2: #bdaee8;
$color-3: #afd1fa;
$color-4: #d1e3d8;
$color-5: #f6e9cb;

TAILWIND

colors: {
  'brand-1': '#cb83cc',
  'brand-2': '#bdaee8',
  'brand-3': '#afd1fa',
  'brand-4': '#d1e3d8',
  'brand-5': '#f6e9cb',
}

RGB Array

[203, 131, 204], [189, 174, 232], [175, 209, 250], [209, 227, 216], [246, 233, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CB83CC, #BDAEE8, #AFD1FA, #D1E3D8, #F6E9CB 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: #cb83cc; --color-2: #bdaee8; --color-3: #afd1fa; --color-4: #d1e3d8; --color-5: #f6e9cb. 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