#5F69A4 + #9E89B0 + #B793AF + #D3A1A4 + #E5BFB6 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5F69A4

Azure · SlateGray · Navy Blue

HEX

#5F69A4

RGB

rgb(95, 105, 164)

HSL

hsl(231, 27%, 51%)

HSB

hsb(231, 42%, 64%)

CMYK

cmyk(42%, 36%, 0%, 36%)

Oklch

oklch(53.8% 0.093 275.5)

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

#9E89B0

Lilac · DarkGray · Lilac Purple

HEX

#9E89B0

RGB

rgb(158, 137, 176)

HSL

hsl(272, 20%, 61%)

HSB

hsb(272, 22%, 69%)

CMYK

cmyk(10%, 22%, 0%, 31%)

Oklch

oklch(66.2% 0.061 309.1)

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

#B793AF

Mauve · DarkGray · Lilac Purple

HEX

#B793AF

RGB

rgb(183, 147, 175)

HSL

hsl(313, 20%, 65%)

HSB

hsb(313, 20%, 72%)

CMYK

cmyk(0%, 20%, 4%, 28%)

Oklch

oklch(70.5% 0.058 334.1)

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

#D3A1A4

Peach Pink · Tan · Coral Red

HEX

#D3A1A4

RGB

rgb(211, 161, 164)

HSL

hsl(356, 36%, 73%)

HSB

hsb(356, 24%, 83%)

CMYK

cmyk(0%, 24%, 22%, 17%)

Oklch

oklch(75.6% 0.060 14.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#E5BFB6

Peach Pink · LightPink · Cherry Blossom

HEX

#E5BFB6

RGB

rgb(229, 191, 182)

HSL

hsl(11, 47%, 81%)

HSB

hsb(11, 21%, 90%)

CMYK

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

Oklch

oklch(83.5% 0.046 33.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F69A4

A49A60

Analogous

608CA4

5F69A4

7860A4

Triadic

5F69A4

A4606A

6AA460

Split-Comp.

5F69A4

A47860

8CA460

Tetradic

5F69A4

A4608C

A49A60

60A478

Contrast Matrix WCAG 2.1 Contrast

5F69A4	9E89B0	B793AF	D3A1A4	E5BFB6
—	1.6 Fail	1.9 Fail	2.3 Fail	3.1 AA Large
1.6 Fail	—	1.2 Fail	1.4 Fail	1.9 Fail
1.9 Fail	1.2 Fail	—	1.2 Fail	1.6 Fail
2.3 Fail	1.4 Fail	1.2 Fail	—	1.3 Fail
3.1 AA Large	1.9 Fail	1.6 Fail	1.3 Fail	—

White BG

5.2AA

3.2AA Large

2.7Fail

2.2Fail

1.7Fail

Black BG

4.0AA Large

6.7AA

7.8AAA

9.4AAA

12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

636396

9595A7

A7A7A8

BDBDA3

D5D4B8

Deuteranopia

636292

9698A4

AAACA7

C0C4A3

D7DAB9

Tritanopia

608A88

9D9F9D

B5A3A2

D1A3A3

E3BABA

Achromatopsia

6D6D6D

949494

A1A1A1

B0B0B0

C9C9C9

Shades & Tints Shades & Tints

#5F69A4

Dark

Light

#9E89B0

Dark

Light

#B793AF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f69a4;
  --color-2: #9e89b0;
  --color-3: #b793af;
  --color-4: #d3a1a4;
  --color-5: #e5bfb6;
}

SCSS

$color-1: #5f69a4;
$color-2: #9e89b0;
$color-3: #b793af;
$color-4: #d3a1a4;
$color-5: #e5bfb6;

TAILWIND

colors: {
  'brand-1': '#5f69a4',
  'brand-2': '#9e89b0',
  'brand-3': '#b793af',
  'brand-4': '#d3a1a4',
  'brand-5': '#e5bfb6',
}

RGB Array

[95, 105, 164], [158, 137, 176], [183, 147, 175], [211, 161, 164], [229, 191, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #5F69A4, #9E89B0, #B793AF, #D3A1A4, #E5BFB6 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: #5f69a4; --color-2: #9e89b0; --color-3: #b793af; --color-4: #d3a1a4; --color-5: #e5bfb6. 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 cool-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