← Back to Editor

#403D4C · #E27470 · #D0A097 · #B7B1B8 · #B7BAF7

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 LibraryData Visualization

Color Details Color Details

#403D4C

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#403D4C
RGB
rgb(64, 61, 76)
HSL
hsl(252, 11%, 27%)
HSB
hsb(252, 20%, 30%)
CMYK
cmyk(16%, 20%, 0%, 70%)
Oklch
oklch(36.9% 0.026 294.3)

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

#E27470

Peach Pink · LightCoral · Coral Red

HEX
#E27470
RGB
rgb(226, 116, 112)
HSL
hsl(2, 66%, 66%)
HSB
hsb(2, 50%, 89%)
CMYK
cmyk(0%, 49%, 50%, 11%)
Oklch
oklch(68.4% 0.138 23.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D0A097

Peach Pink · Tan · Coral Red

HEX
#D0A097
RGB
rgb(208, 160, 151)
HSL
hsl(9, 38%, 70%)
HSB
hsb(9, 27%, 82%)
CMYK
cmyk(0%, 23%, 27%, 18%)
Oklch
oklch(74.8% 0.059 30.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B7B1B8

Silver Gray · Silver · Pearl Gray

HEX
#B7B1B8
RGB
rgb(183, 177, 184)
HSL
hsl(291, 5%, 71%)
HSB
hsb(291, 4%, 72%)
CMYK
cmyk(1%, 4%, 0%, 28%)
Oklch
oklch(76.7% 0.012 321.3)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#B7BAF7

Azure · LightSteelBlue · Sky Blue

HEX
#B7BAF7
RGB
rgb(183, 186, 247)
HSL
hsl(237, 80%, 84%)
HSB
hsb(237, 26%, 97%)
CMYK
cmyk(26%, 25%, 0%, 3%)
Oklch
oklch(80.8% 0.086 282.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

403D4C
494C3D

Analogous

3D424C
403D4C
483D4C

Triadic

403D4C
4C403D
3D4C40

Split-Comp.

403D4C
4C483D
424C3D

Tetradic

403D4C
4C3D42
494C3D
3D4C48

Contrast Matrix WCAG 2.1 Contrast

403D4C
E27470
D0A097
B7B1B8
B7BAF7
—
3.5
AA Large
4.6
AA
5.0
AA
5.7
AA
3.5
AA Large
—
1.3
Fail
1.4
Fail
1.6
Fail
4.6
AA
1.3
Fail
—
1.1
Fail
1.2
Fail
5.0
AA
1.4
Fail
1.1
Fail
—
1.1
Fail
5.7
AA
1.6
Fail
1.2
Fail
1.1
Fail
—
White BG
10.6AAA
3.0AA Large
2.3Fail
2.1Fail
1.8Fail
Black BG
2.0Fail
7.0AA
9.2AAA
10.0AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F48
B2B171
BBBB99
B4B4B6
B8B8E8

Deuteranopia

3F3F48
B9C171
BEC29A
B5B5B6
B8B8E5

Tritanopia

404645
DD7272
CE9B9B
B7B5B5
B7DDDA

Achromatopsia

404040
949494
ADADAD
B4B4B4
C0C0C0

Shades & Tints Shades & Tints

#403D4C

Dark
Light

#E27470

Dark
Light

#D0A097

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #403d4c;
  --color-2: #e27470;
  --color-3: #d0a097;
  --color-4: #b7b1b8;
  --color-5: #b7baf7;
}

SCSS

$color-1: #403d4c;
$color-2: #e27470;
$color-3: #d0a097;
$color-4: #b7b1b8;
$color-5: #b7baf7;

TAILWIND

colors: {
  'brand-1': '#403d4c',
  'brand-2': '#e27470',
  'brand-3': '#d0a097',
  'brand-4': '#b7b1b8',
  'brand-5': '#b7baf7',
}

RGB Array

[64, 61, 76], [226, 116, 112], [208, 160, 151], [183, 177, 184], [183, 186, 247]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #403D4C, #E27470, #D0A097, #B7B1B8, #B7BAF7 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: #403d4c; --color-2: #e27470; --color-3: #d0a097; --color-4: #b7b1b8; --color-5: #b7baf7. 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