← Back to Editor

#4D3246 · #615264 · #73778F · #91A2AC · #B9E0E6

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

#4D3246

Rose Purple · DarkSlateGray · Eggplant

HEX
#4D3246
RGB
rgb(77, 50, 70)
HSL
hsl(316, 21%, 25%)
HSB
hsb(316, 35%, 30%)
CMYK
cmyk(0%, 35%, 9%, 70%)
Oklch
oklch(35.7% 0.050 336.5)

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

#615264

Dark Plum · DimGray · Eggplant

HEX
#615264
RGB
rgb(97, 82, 100)
HSL
hsl(290, 10%, 36%)
HSB
hsb(290, 18%, 39%)
CMYK
cmyk(3%, 18%, 0%, 61%)
Oklch
oklch(46.0% 0.034 320.6)

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

#73778F

Azure · SlateGray · Navy Blue

HEX
#73778F
RGB
rgb(115, 119, 143)
HSL
hsl(231, 11%, 51%)
HSB
hsb(231, 20%, 56%)
CMYK
cmyk(20%, 17%, 0%, 44%)
Oklch
oklch(57.4% 0.037 277.7)

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

#91A2AC

Sky Blue · DarkGray · Cobalt Blue

HEX
#91A2AC
RGB
rgb(145, 162, 172)
HSL
hsl(202, 14%, 62%)
HSB
hsb(202, 16%, 67%)
CMYK
cmyk(16%, 6%, 0%, 33%)
Oklch
oklch(70.2% 0.024 233.5)

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

#B9E0E6

Sky Blue · LightBlue · Glacier Blue

HEX
#B9E0E6
RGB
rgb(185, 224, 230)
HSL
hsl(188, 47%, 81%)
HSB
hsb(188, 20%, 90%)
CMYK
cmyk(20%, 3%, 0%, 10%)
Oklch
oklch(88.1% 0.042 207.8)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D3246
324D3A

Analogous

47324D
4D3246
4D3239

Triadic

4D3246
464D32
32464D

Split-Comp.

4D3246
394D32
324D47

Tetradic

4D3246
4D4732
324D3A
32394D

Contrast Matrix WCAG 2.1 Contrast

4D3246
615264
73778F
91A2AC
B9E0E6
—
1.6
Fail
2.6
Fail
4.3
AA Large
8.0
AAA
1.6
Fail
—
1.6
Fail
2.7
Fail
5.1
AA
2.6
Fail
1.6
Fail
—
1.7
Fail
3.1
AA Large
4.3
AA Large
2.7
Fail
1.7
Fail
—
1.9
Fail
8.0
AAA
5.1
AA
3.1
AA Large
1.9
Fail
—
White BG
11.3AAA
7.2AAA
4.4AA Large
2.6Fail
1.4Fail
Black BG
1.9Fail
2.9Fail
4.8AA
8.0AAA
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

414141
5B5A60
757589
9899AA
CACAE5

Deuteranopia

434540
5B5C5F
757488
9796A9
C8C5E4

Tritanopia

4C3D3D
605C5B
738584
92A8A7
BBE3E3

Achromatopsia

3C3C3C
595959
797979
9E9E9E
D5D5D5

Shades & Tints Shades & Tints

#4D3246

Dark
Light

#615264

Dark
Light

#73778F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d3246;
  --color-2: #615264;
  --color-3: #73778f;
  --color-4: #91a2ac;
  --color-5: #b9e0e6;
}

SCSS

$color-1: #4d3246;
$color-2: #615264;
$color-3: #73778f;
$color-4: #91a2ac;
$color-5: #b9e0e6;

TAILWIND

colors: {
  'brand-1': '#4d3246',
  'brand-2': '#615264',
  'brand-3': '#73778f',
  'brand-4': '#91a2ac',
  'brand-5': '#b9e0e6',
}

RGB Array

[77, 50, 70], [97, 82, 100], [115, 119, 143], [145, 162, 172], [185, 224, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D3246, #615264, #73778F, #91A2AC, #B9E0E6 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #4d3246; --color-2: #615264; --color-3: #73778f; --color-4: #91a2ac; --color-5: #b9e0e6. 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. 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