#BAE9E7 + #AECCEA + #B1AEEA + #B48ED7 + #B76EC4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BAE9E7

Jade · LightBlue · Glacier Blue

HEX

#BAE9E7

RGB

rgb(186, 233, 231)

HSL

hsl(177, 52%, 82%)

HSB

hsb(177, 20%, 91%)

CMYK

cmyk(20%, 0%, 1%, 9%)

Oklch

oklch(90.1% 0.048 193.1)

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

#AECCEA

Azure · LightBlue · Cobalt Blue

HEX

#AECCEA

RGB

rgb(174, 204, 234)

HSL

hsl(210, 59%, 80%)

HSB

hsb(210, 26%, 92%)

CMYK

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

Oklch

oklch(83.3% 0.053 248.5)

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

#B1AEEA

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#B1AEEA

RGB

rgb(177, 174, 234)

HSL

hsl(243, 59%, 80%)

HSB

hsb(243, 26%, 92%)

CMYK

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

Oklch

oklch(77.5% 0.085 286.5)

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

#B48ED7

Lilac · Orchid · Lilac Purple

HEX

#B48ED7

RGB

rgb(180, 142, 215)

HSL

hsl(271, 48%, 70%)

HSB

hsb(271, 34%, 84%)

CMYK

cmyk(16%, 34%, 0%, 16%)

Oklch

oklch(70.9% 0.111 307.6)

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

#B76EC4

Dark Plum · MediumOrchid · Violet

HEX

#B76EC4

RGB

rgb(183, 110, 196)

HSL

hsl(291, 42%, 60%)

HSB

hsb(291, 44%, 77%)

CMYK

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

Oklch

oklch(64.9% 0.146 321.4)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BAE9E7

E9B9BC

Analogous

B9E9CF

BAE9E7

B9D3E9

Triadic

BAE9E7

E7B9E9

E9E7B9

Split-Comp.

BAE9E7

E9B9D3

E9CFB9

Tetradic

BAE9E7

CFB9E9

E9B9BC

D3E9B9

Contrast Matrix WCAG 2.1 Contrast

BAE9E7	AECCEA	B1AEEA	B48ED7	B76EC4
—	1.3 Fail	1.6 Fail	2.0 Fail	2.6 Fail
1.3 Fail	—	1.2 Fail	1.6 Fail	2.1 Fail
1.6 Fail	1.2 Fail	—	1.3 Fail	1.7 Fail
2.0 Fail	1.6 Fail	1.3 Fail	—	1.3 Fail
2.6 Fail	2.1 Fail	1.7 Fail	1.3 Fail	—

White BG

1.3Fail

1.7Fail

2.1Fail

2.7Fail

3.5AA Large

Black BG

15.9AAA

12.6AAA

10.1AAA

7.8AAA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECFE7

BBBBE3

B0B0DB

A4A3C5

9797AF

Deuteranopia

CCC8E8

B9B7E1

B0B0D8

A6A9C1

9CA1AA

Tritanopia

BCE8E8

AFDDDC

B1D0CE

B2B7B4

B39F9B

Achromatopsia

DBDBDB

C6C6C6

B6B6B6

A2A2A2

8E8E8E

Shades & Tints Shades & Tints

#BAE9E7

Dark

Light

#AECCEA

Dark

Light

#B1AEEA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bae9e7;
  --color-2: #aeccea;
  --color-3: #b1aeea;
  --color-4: #b48ed7;
  --color-5: #b76ec4;
}

SCSS

$color-1: #bae9e7;
$color-2: #aeccea;
$color-3: #b1aeea;
$color-4: #b48ed7;
$color-5: #b76ec4;

TAILWIND

colors: {
  'brand-1': '#bae9e7',
  'brand-2': '#aeccea',
  'brand-3': '#b1aeea',
  'brand-4': '#b48ed7',
  'brand-5': '#b76ec4',
}

RGB Array

[186, 233, 231], [174, 204, 234], [177, 174, 234], [180, 142, 215], [183, 110, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BAE9E7, #AECCEA, #B1AEEA, #B48ED7, #B76EC4 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: #bae9e7; --color-2: #aeccea; --color-3: #b1aeea; --color-4: #b48ed7; --color-5: #b76ec4. 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