#7C86AA + #BABAD6 + #CACAD9 + #DCDFFA + #FBEEFA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7C86AA

Azure · LightSlateGray · Navy Blue

HEX

#7C86AA

RGB

rgb(124, 134, 170)

HSL

hsl(227, 21%, 58%)

HSB

hsb(227, 27%, 67%)

CMYK

cmyk(27%, 21%, 0%, 33%)

Oklch

oklch(62.5% 0.056 272.6)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#BABAD6

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#BABAD6

RGB

rgb(186, 186, 214)

HSL

hsl(240, 25%, 78%)

HSB

hsb(240, 13%, 84%)

CMYK

cmyk(13%, 13%, 0%, 16%)

Oklch

oklch(79.8% 0.039 285.5)

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

#CACAD9

Wisteria · LightGray · Sky Blue

HEX

#CACAD9

RGB

rgb(202, 202, 217)

HSL

hsl(240, 16%, 82%)

HSB

hsb(240, 7%, 85%)

CMYK

cmyk(7%, 7%, 0%, 15%)

Oklch

oklch(84.4% 0.021 285.9)

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

#DCDFFA

Azure · Lavender · Sky Blue

HEX

#DCDFFA

RGB

rgb(220, 223, 250)

HSL

hsl(234, 75%, 92%)

HSB

hsb(234, 12%, 98%)

CMYK

cmyk(12%, 11%, 0%, 2%)

Oklch

oklch(91.0% 0.037 280.6)

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

#FBEEFA

Mauve · Snow · Lavender

HEX

#FBEEFA

RGB

rgb(251, 238, 250)

HSL

hsl(305, 62%, 96%)

HSB

hsb(305, 5%, 98%)

CMYK

cmyk(0%, 5%, 0%, 2%)

Oklch

oklch(96.3% 0.021 328.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C86AA

AAA17D

Analogous

7D9EAA

7C86AA

8A7DAA

Triadic

7C86AA

AA7D87

87AA7D

Split-Comp.

7C86AA

AA8A7D

9EAA7D

Tetradic

7C86AA

AA7D9E

AAA17D

7DAA8A

Contrast Matrix WCAG 2.1 Contrast

7C86AA	BABAD6	CACAD9	DCDFFA	FBEEFA
—	1.9 Fail	2.2 Fail	2.7 Fail	3.2 AA Large
1.9 Fail	—	1.2 Fail	1.4 Fail	1.7 Fail
2.2 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
2.7 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
3.2 AA Large	1.7 Fail	1.4 Fail	1.2 Fail	—

White BG

3.6AA Large

1.9Fail

1.6Fail

1.3Fail

1.1Fail

Black BG

5.8AA

11.1AAA

13.0AAA

16.0AAA

18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8080A1

BABACF

CACAD5

DDDDF3

F5F5F7

Deuteranopia

807F9F

BABACE

CACAD4

DDDDF2

F6F7F6

Tritanopia

7D9A99

BACAC9

CAD3D2

DCEEED

FAF5F4

Achromatopsia

878787

BDBDBD

CCCCCC

E1E1E1

F3F3F3

Shades & Tints Shades & Tints

#7C86AA

Dark

Light

#BABAD6

Dark

Light

#CACAD9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c86aa;
  --color-2: #babad6;
  --color-3: #cacad9;
  --color-4: #dcdffa;
  --color-5: #fbeefa;
}

SCSS

$color-1: #7c86aa;
$color-2: #babad6;
$color-3: #cacad9;
$color-4: #dcdffa;
$color-5: #fbeefa;

TAILWIND

colors: {
  'brand-1': '#7c86aa',
  'brand-2': '#babad6',
  'brand-3': '#cacad9',
  'brand-4': '#dcdffa',
  'brand-5': '#fbeefa',
}

RGB Array

[124, 134, 170], [186, 186, 214], [202, 202, 217], [220, 223, 250], [251, 238, 250]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7C86AA, #BABAD6, #CACAD9, #DCDFFA, #FBEEFA 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: #7c86aa; --color-2: #babad6; --color-3: #cacad9; --color-4: #dcdffa; --color-5: #fbeefa. 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