#8195A1 + #7F9AC9 + #AE92F0 + #E394DE + #FF9E9E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8195A1

Slate Blue · LightSlateGray · Navy Blue

HEX

#8195A1

RGB

rgb(129, 149, 161)

HSL

hsl(202, 15%, 57%)

HSB

hsb(202, 20%, 63%)

CMYK

cmyk(20%, 7%, 0%, 37%)

Oklch

oklch(65.8% 0.029 234.2)

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

#7F9AC9

Azure · CornflowerBlue · Cobalt Blue

HEX

#7F9AC9

RGB

rgb(127, 154, 201)

HSL

hsl(218, 41%, 64%)

HSB

hsb(218, 37%, 79%)

CMYK

cmyk(37%, 23%, 0%, 21%)

Oklch

oklch(68.3% 0.076 261.3)

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

#AE92F0

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#AE92F0

RGB

rgb(174, 146, 240)

HSL

hsl(258, 76%, 76%)

HSB

hsb(258, 39%, 94%)

CMYK

cmyk(27%, 39%, 0%, 6%)

Oklch

oklch(72.2% 0.136 296.6)

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

#E394DE

Mauve · Violet · Lilac Purple

HEX

#E394DE

RGB

rgb(227, 148, 222)

HSL

hsl(304, 59%, 74%)

HSB

hsb(304, 35%, 89%)

CMYK

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

Oklch

oklch(77.0% 0.134 329.0)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#FF9E9E

Peach Pink · LightSalmon · Cherry Blossom

HEX

#FF9E9E

RGB

rgb(255, 158, 158)

HSL

hsl(0, 100%, 81%)

HSB

hsb(0, 38%, 100%)

CMYK

cmyk(0%, 38%, 38%, 0%)

Oklch

oklch(79.8% 0.116 20.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8195A1

A28D81

Analogous

81A29D

8195A1

8185A2

Triadic

8195A1

A28196

96A281

Split-Comp.

8195A1

A28185

A29D81

Tetradic

8195A1

9D81A2

A28D81

85A281

Contrast Matrix WCAG 2.1 Contrast

8195A1	7F9AC9	AE92F0	E394DE	FF9E9E
—	1.1 Fail	1.2 Fail	1.4 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.4 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.3 Fail
1.4 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
1.6 Fail	1.4 Fail	1.3 Fail	1.1 Fail	—

White BG

3.1AA Large

2.9Fail

2.6Fail

2.2Fail

2.0Fail

Black BG

6.7AA

7.4AAA

8.2AAA

9.6AAA

10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8A9E

8B8BBE

A2A2D9

C1C0CC

D5D49E

Deuteranopia

89879D

8987BB

A4A6D4

C5CBC8

DBE29E

Tritanopia

829C9B

80B5B3

ADC7C3

DFBEBB

FA9E9E

Achromatopsia

909090

979797

A5A5A5

B4B4B4

BBBBBB

Shades & Tints Shades & Tints

#8195A1

Dark

Light

#7F9AC9

Dark

Light

#AE92F0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8195a1;
  --color-2: #7f9ac9;
  --color-3: #ae92f0;
  --color-4: #e394de;
  --color-5: #ff9e9e;
}

SCSS

$color-1: #8195a1;
$color-2: #7f9ac9;
$color-3: #ae92f0;
$color-4: #e394de;
$color-5: #ff9e9e;

TAILWIND

colors: {
  'brand-1': '#8195a1',
  'brand-2': '#7f9ac9',
  'brand-3': '#ae92f0',
  'brand-4': '#e394de',
  'brand-5': '#ff9e9e',
}

RGB Array

[129, 149, 161], [127, 154, 201], [174, 146, 240], [227, 148, 222], [255, 158, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8195A1, #7F9AC9, #AE92F0, #E394DE, #FF9E9E 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: #8195a1; --color-2: #7f9ac9; --color-3: #ae92f0; --color-4: #e394de; --color-5: #ff9e9e. 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