← Back to Editor

#7471B4 · #8B83B1 · #A295AF · #B8A7AC · #CFB9AA

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7471B4

Deep Indigo · SlateBlue · Navy Blue

HEX
#7471B4
RGB
rgb(116, 113, 180)
HSL
hsl(243, 31%, 57%)
HSB
hsb(243, 37%, 71%)
CMYK
cmyk(36%, 37%, 0%, 29%)
Oklch
oklch(58.0% 0.102 284.8)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#8B83B1

Deep Indigo · LightSlateGray · Navy Blue

HEX
#8B83B1
RGB
rgb(139, 131, 177)
HSL
hsl(250, 23%, 60%)
HSB
hsb(250, 26%, 69%)
CMYK
cmyk(21%, 26%, 0%, 31%)
Oklch
oklch(63.4% 0.069 292.3)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#A295AF

Lilac · DarkGray · Lilac Purple

HEX
#A295AF
RGB
rgb(162, 149, 175)
HSL
hsl(270, 14%, 64%)
HSB
hsb(270, 15%, 69%)
CMYK
cmyk(7%, 15%, 0%, 31%)
Oklch
oklch(69.0% 0.040 307.8)

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

#B8A7AC

Rouge · DarkGray · Rose Pink

HEX
#B8A7AC
RGB
rgb(184, 167, 172)
HSL
hsl(342, 11%, 69%)
HSB
hsb(342, 9%, 72%)
CMYK
cmyk(0%, 9%, 7%, 28%)
Oklch
oklch(74.4% 0.021 357.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#CFB9AA

Apricot · Silver · Warm Sun

HEX
#CFB9AA
RGB
rgb(207, 185, 170)
HSL
hsl(24, 28%, 74%)
HSB
hsb(24, 18%, 81%)
CMYK
cmyk(0%, 11%, 18%, 19%)
Oklch
oklch(80.0% 0.033 56.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7471B4
B0B36F

Analogous

6F8EB3
7471B4
956FB3

Triadic

7471B4
B3736F
6FB373

Split-Comp.

7471B4
B3956F
8EB36F

Tetradic

7471B4
B36F8E
B0B36F
6FB395

Contrast Matrix WCAG 2.1 Contrast

7471B4
8B83B1
A295AF
B8A7AC
CFB9AA
—
1.3
Fail
1.6
Fail
1.9
Fail
2.3
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
1.9
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
2.3
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
White BG
4.4AA Large
3.5AA Large
2.8Fail
2.3Fail
1.9Fail
Black BG
4.8AA
6.0AA
7.5AAA
9.2AAA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7373A4
8887A6
9C9CA9
B1B0AB
C5C5AE

Deuteranopia

7373A0
8889A3
9D9EA7
B2B3AB
C7C8AF

Tritanopia

749794
8B9D9B
A1A4A3
B7AAAA
CEB0B1

Achromatopsia

7A7A7A
8B8B8B
9C9C9C
ADADAD
BEBEBE

Shades & Tints Shades & Tints

#7471B4

Dark
Light

#8B83B1

Dark
Light

#A295AF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7471b4;
  --color-2: #8b83b1;
  --color-3: #a295af;
  --color-4: #b8a7ac;
  --color-5: #cfb9aa;
}

SCSS

$color-1: #7471b4;
$color-2: #8b83b1;
$color-3: #a295af;
$color-4: #b8a7ac;
$color-5: #cfb9aa;

TAILWIND

colors: {
  'brand-1': '#7471b4',
  'brand-2': '#8b83b1',
  'brand-3': '#a295af',
  'brand-4': '#b8a7ac',
  'brand-5': '#cfb9aa',
}

RGB Array

[116, 113, 180], [139, 131, 177], [162, 149, 175], [184, 167, 172], [207, 185, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7471B4, #8B83B1, #A295AF, #B8A7AC, #CFB9AA is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #7471b4; --color-2: #8b83b1; --color-3: #a295af; --color-4: #b8a7ac; --color-5: #cfb9aa. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. Restrained colors convey professionalism and trust. 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