← Back to Editor

#4D4167 · #786179 · #A2828C · #CDA29E · #F7C2B0

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

#4D4167

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#4D4167
RGB
rgb(77, 65, 103)
HSL
hsl(259, 23%, 33%)
HSB
hsb(259, 37%, 40%)
CMYK
cmyk(25%, 37%, 0%, 60%)
Oklch
oklch(40.4% 0.064 298.0)

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

#786179

Dark Plum · DimGray · Violet

HEX
#786179
RGB
rgb(120, 97, 121)
HSL
hsl(298, 11%, 43%)
HSB
hsb(298, 20%, 47%)
CMYK
cmyk(1%, 20%, 0%, 53%)
Oklch
oklch(52.4% 0.046 324.9)

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

#A2828C

Dark Violet · Gray · Rose Pink

HEX
#A2828C
RGB
rgb(162, 130, 140)
HSL
hsl(341, 15%, 57%)
HSB
hsb(341, 20%, 64%)
CMYK
cmyk(0%, 20%, 14%, 36%)
Oklch
oklch(64.0% 0.042 357.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#CDA29E

Peach Pink · Tan · Coral Red

HEX
#CDA29E
RGB
rgb(205, 162, 158)
HSL
hsl(5, 32%, 71%)
HSB
hsb(5, 23%, 80%)
CMYK
cmyk(0%, 21%, 23%, 20%)
Oklch
oklch(75.0% 0.052 24.5)

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

#F7C2B0

Apricot · LightPink · Peach Orange

HEX
#F7C2B0
RGB
rgb(247, 194, 176)
HSL
hsl(15, 82%, 83%)
HSB
hsb(15, 29%, 97%)
CMYK
cmyk(0%, 21%, 29%, 3%)
Oklch
oklch(85.7% 0.066 39.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D4167
5B6841

Analogous

414868
4D4167
604168

Triadic

4D4167
684D41
41684D

Split-Comp.

4D4167
686041
486841

Tetradic

4D4167
684148
5B6841
416860

Contrast Matrix WCAG 2.1 Contrast

4D4167
786179
A2828C
CDA29E
F7C2B0
—
1.7
Fail
2.7
Fail
4.1
AA Large
5.9
AA
1.7
Fail
—
1.6
Fail
2.4
Fail
3.5
AA Large
2.7
Fail
1.6
Fail
—
1.5
Fail
2.2
Fail
4.1
AA Large
2.4
Fail
1.5
Fail
—
1.4
Fail
5.9
AA
3.5
AA Large
2.2
Fail
1.4
Fail
—
White BG
9.3AAA
5.5AA
3.4AA Large
2.3Fail
1.6Fail
Black BG
2.3Fail
3.8AA Large
6.1AA
9.3AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

48485E
6E6E73
94948A
BABA9F
E0E0B4

Deuteranopia

49495C
6F7172
969889
BDC09F
E3E7B5

Tritanopia

4C5755
776F6E
A08887
CBA0A0
F4B8B9

Achromatopsia

494949
6B6B6B
8D8D8D
AEAEAE
D0D0D0

Shades & Tints Shades & Tints

#4D4167

Dark
Light

#786179

Dark
Light

#A2828C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d4167;
  --color-2: #786179;
  --color-3: #a2828c;
  --color-4: #cda29e;
  --color-5: #f7c2b0;
}

SCSS

$color-1: #4d4167;
$color-2: #786179;
$color-3: #a2828c;
$color-4: #cda29e;
$color-5: #f7c2b0;

TAILWIND

colors: {
  'brand-1': '#4d4167',
  'brand-2': '#786179',
  'brand-3': '#a2828c',
  'brand-4': '#cda29e',
  'brand-5': '#f7c2b0',
}

RGB Array

[77, 65, 103], [120, 97, 121], [162, 130, 140], [205, 162, 158], [247, 194, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D4167, #786179, #A2828C, #CDA29E, #F7C2B0 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: #4d4167; --color-2: #786179; --color-3: #a2828c; --color-4: #cda29e; --color-5: #f7c2b0. 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