#B37EC2 + #B6A5D9 + #BCCDE3 + #DAF0F2 + #F5FCFC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B37EC2

Lilac · MediumOrchid · Lilac Purple

HEX

#B37EC2

RGB

rgb(179, 126, 194)

HSL

hsl(287, 36%, 63%)

HSB

hsb(287, 35%, 76%)

CMYK

cmyk(8%, 35%, 0%, 24%)

Oklch

oklch(67.0% 0.114 318.6)

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

#B6A5D9

Wisteria · LightSteelBlue · Lilac Purple

HEX

#B6A5D9

RGB

rgb(182, 165, 217)

HSL

hsl(260, 41%, 75%)

HSB

hsb(260, 24%, 85%)

CMYK

cmyk(16%, 24%, 0%, 15%)

Oklch

oklch(75.4% 0.076 299.6)

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

#BCCDE3

Azure · LightSteelBlue · Sky Blue

HEX

#BCCDE3

RGB

rgb(188, 205, 227)

HSL

hsl(214, 41%, 81%)

HSB

hsb(214, 17%, 89%)

CMYK

cmyk(17%, 10%, 0%, 11%)

Oklch

oklch(84.2% 0.036 254.9)

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

#DAF0F2

Sky Blue · Lavender · Glacier Blue

HEX

#DAF0F2

RGB

rgb(218, 240, 242)

HSL

hsl(185, 48%, 90%)

HSB

hsb(185, 10%, 95%)

CMYK

cmyk(10%, 1%, 0%, 5%)

Oklch

oklch(94.0% 0.023 203.4)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#F5FCFC

Sky Blue · Snow · Glacier Blue

HEX

#F5FCFC

RGB

rgb(245, 252, 252)

HSL

hsl(180, 54%, 97%)

HSB

hsb(180, 3%, 99%)

CMYK

cmyk(3%, 0%, 0%, 1%)

Oklch

oklch(98.6% 0.007 197.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B37EC2

8DC37F

Analogous

927FC3

B37EC2

C37FAF

Triadic

B37EC2

C3B47F

7FC3B4

Split-Comp.

B37EC2

AFC37F

7FC392

Tetradic

B37EC2

C3927F

8DC37F

7FAFC3

Contrast Matrix WCAG 2.1 Contrast

B37EC2	B6A5D9	BCCDE3	DAF0F2	F5FCFC
—	1.4 Fail	1.9 Fail	2.7 Fail	3.0 AA Large
1.4 Fail	—	1.4 Fail	1.9 Fail	2.2 Fail
1.9 Fail	1.4 Fail	—	1.4 Fail	1.6 Fail
2.7 Fail	1.9 Fail	1.4 Fail	—	1.1 Fail
3.0 AA Large	2.2 Fail	1.6 Fail	1.1 Fail	—

White BG

3.1AA Large

2.2Fail

1.6Fail

1.2Fail

1.0Fail

Black BG

6.7AA

9.4AAA

13.0AAA

17.7AAA

20.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CB2

AFAECC

C3C4DE

E4E4F2

F8F8FC

Deuteranopia

9FA3AE

B0B1C9

C2C1DC

E2E1F1

F8F7FC

Tritanopia

B0A5A2

B5C2C0

BDD9D9

DBF1F1

F5FCFC

Achromatopsia

969696

B0B0B0

CACACA

EAEAEA

FAFAFA

Shades & Tints Shades & Tints

#B37EC2

Dark

Light

#B6A5D9

Dark

Light

#BCCDE3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b37ec2;
  --color-2: #b6a5d9;
  --color-3: #bccde3;
  --color-4: #daf0f2;
  --color-5: #f5fcfc;
}

SCSS

$color-1: #b37ec2;
$color-2: #b6a5d9;
$color-3: #bccde3;
$color-4: #daf0f2;
$color-5: #f5fcfc;

TAILWIND

colors: {
  'brand-1': '#b37ec2',
  'brand-2': '#b6a5d9',
  'brand-3': '#bccde3',
  'brand-4': '#daf0f2',
  'brand-5': '#f5fcfc',
}

RGB Array

[179, 126, 194], [182, 165, 217], [188, 205, 227], [218, 240, 242], [245, 252, 252]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B37EC2, #B6A5D9, #BCCDE3, #DAF0F2, #F5FCFC 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: #b37ec2; --color-2: #b6a5d9; --color-3: #bccde3; --color-4: #daf0f2; --color-5: #f5fcfc. 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