← Back to Editor

#471754 · #7B5487 · #CDC9DF · #F6F7DB · #3F3A5B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#471754

Royal Purple · MidnightBlue · Eggplant

HEX
#471754
RGB
rgb(71, 23, 84)
HSL
hsl(287, 57%, 21%)
HSB
hsb(287, 73%, 33%)
CMYK
cmyk(15%, 73%, 0%, 67%)
Oklch
oklch(31.0% 0.113 318.3)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

#7B5487

Dark Plum · DimGray · Violet

HEX
#7B5487
RGB
rgb(123, 84, 135)
HSL
hsl(286, 23%, 43%)
HSB
hsb(286, 38%, 53%)
CMYK
cmyk(9%, 38%, 0%, 47%)
Oklch
oklch(50.8% 0.091 318.0)

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

#CDC9DF

Wisteria · LightGray · Sky Blue

HEX
#CDC9DF
RGB
rgb(205, 201, 223)
HSL
hsl(251, 26%, 83%)
HSB
hsb(251, 10%, 87%)
CMYK
cmyk(8%, 10%, 0%, 13%)
Oklch
oklch(84.6% 0.031 294.1)

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

#F6F7DB

Fresh Green · Beige · Lemon Cream

HEX
#F6F7DB
RGB
rgb(246, 247, 219)
HSL
hsl(62, 64%, 91%)
HSB
hsb(62, 11%, 97%)
CMYK
cmyk(0%, 0%, 11%, 3%)
Oklch
oklch(96.8% 0.037 108.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#3F3A5B

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3F3A5B
RGB
rgb(63, 58, 91)
HSL
hsl(249, 22%, 29%)
HSB
hsb(249, 36%, 36%)
CMYK
cmyk(31%, 36%, 0%, 64%)
Oklch
oklch(36.8% 0.056 290.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

471754
245417

Analogous

281754
471754
541743

Triadic

471754
544717
175447

Split-Comp.

471754
435417
175428

Tetradic

471754
542817
245417
174354

Contrast Matrix WCAG 2.1 Contrast

471754
7B5487
CDC9DF
F6F7DB
3F3A5B
—
2.3
Fail
8.6
AAA
12.7
AAA
1.3
Fail
2.3
Fail
—
3.8
AA Large
5.6
AA
1.8
Fail
8.6
AAA
3.8
AA Large
—
1.5
Fail
6.6
AA
12.7
AAA
5.6
AA
1.5
Fail
—
9.8
AAA
1.3
Fail
1.8
Fail
6.6
AA
9.8
AAA
—
White BG
13.8AAA
6.1AA
1.6Fail
1.1Fail
10.7AAA
Black BG
1.5Fail
3.5AA Large
13.0AAA
19.2AAA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

323245
6A6A7B
CBCBDA
F6F6E2
3D3D53

Deuteranopia

353942
6C6F78
CCCCD8
F6F6E3
3D3D51

Tritanopia

453A37
79716F
CDD5D5
F6E7E8
3F4D4B

Achromatopsia

2C2C2C
656565
CDCDCD
F4F4F4
3F3F3F

Shades & Tints Shades & Tints

#471754

Dark
Light

#7B5487

Dark
Light

#CDC9DF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #471754;
  --color-2: #7b5487;
  --color-3: #cdc9df;
  --color-4: #f6f7db;
  --color-5: #3f3a5b;
}

SCSS

$color-1: #471754;
$color-2: #7b5487;
$color-3: #cdc9df;
$color-4: #f6f7db;
$color-5: #3f3a5b;

TAILWIND

colors: {
  'brand-1': '#471754',
  'brand-2': '#7b5487',
  'brand-3': '#cdc9df',
  'brand-4': '#f6f7db',
  'brand-5': '#3f3a5b',
}

RGB Array

[71, 23, 84], [123, 84, 135], [205, 201, 223], [246, 247, 219], [63, 58, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #471754, #7B5487, #CDC9DF, #F6F7DB, #3F3A5B is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #471754; --color-2: #7b5487; --color-3: #cdc9df; --color-4: #f6f7db; --color-5: #3f3a5b. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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