← Back to Editor

#4C486C · #55526E · #7E8296 · #D1CFAB · #BFBB62

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

#4C486C

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#4C486C
RGB
rgb(76, 72, 108)
HSL
hsl(247, 20%, 35%)
HSB
hsb(247, 33%, 42%)
CMYK
cmyk(30%, 33%, 0%, 58%)
Oklch
oklch(42.1% 0.059 288.7)

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

#55526E

Deep Indigo · DimGray · Prussian Blue

HEX
#55526E
RGB
rgb(85, 82, 110)
HSL
hsl(246, 15%, 38%)
HSB
hsb(246, 25%, 43%)
CMYK
cmyk(23%, 25%, 0%, 57%)
Oklch
oklch(45.3% 0.045 289.4)

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

#7E8296

Azure · LightSlateGray · Navy Blue

HEX
#7E8296
RGB
rgb(126, 130, 150)
HSL
hsl(230, 10%, 54%)
HSB
hsb(230, 16%, 59%)
CMYK
cmyk(16%, 13%, 0%, 41%)
Oklch
oklch(61.0% 0.031 276.5)

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

#D1CFAB

Fresh Green · Silver · Sunflower

HEX
#D1CFAB
RGB
rgb(209, 207, 171)
HSL
hsl(57, 29%, 75%)
HSB
hsb(57, 18%, 82%)
CMYK
cmyk(0%, 1%, 18%, 18%)
Oklch
oklch(84.7% 0.048 104.8)

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

#BFBB62

Autumn Sage · Tan · Sunflower

HEX
#BFBB62
RGB
rgb(191, 187, 98)
HSL
hsl(57, 42%, 57%)
HSB
hsb(57, 49%, 75%)
CMYK
cmyk(0%, 2%, 49%, 25%)
Oklch
oklch(77.6% 0.112 106.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4C486C
676B47

Analogous

47556B
4C486C
5D476B

Triadic

4C486C
6B4C47
476B4C

Split-Comp.

4C486C
6B5D47
556B47

Tetradic

4C486C
6B4755
676B47
476B5D

Contrast Matrix WCAG 2.1 Contrast

4C486C
55526E
7E8296
D1CFAB
BFBB62
—
1.1
Fail
2.3
Fail
5.4
AA
4.3
AA Large
1.1
Fail
—
2.0
Fail
4.7
AA
3.7
AA Large
2.3
Fail
2.0
Fail
—
2.4
Fail
1.9
Fail
5.4
AA
4.7
AA
2.4
Fail
—
1.3
Fail
4.3
AA Large
3.7
AA Large
1.9
Fail
1.3
Fail
—
White BG
8.6AAA
7.5AAA
3.8AA Large
1.6Fail
2.0Fail
Black BG
2.5Fail
2.8Fail
5.5AA
13.2AAA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A63
545467
808091
D0D0B4
BDBD78

Deuteranopia

4B4B61
545466
807F90
D0D0B6
BEBE7D

Tritanopia

4C5C5B
556261
7E8D8D
D1BBBC
BF898C

Achromatopsia

4D4D4D
565656
838383
CBCBCB
B2B2B2

Shades & Tints Shades & Tints

#4C486C

Dark
Light

#55526E

Dark
Light

#7E8296

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4c486c;
  --color-2: #55526e;
  --color-3: #7e8296;
  --color-4: #d1cfab;
  --color-5: #bfbb62;
}

SCSS

$color-1: #4c486c;
$color-2: #55526e;
$color-3: #7e8296;
$color-4: #d1cfab;
$color-5: #bfbb62;

TAILWIND

colors: {
  'brand-1': '#4c486c',
  'brand-2': '#55526e',
  'brand-3': '#7e8296',
  'brand-4': '#d1cfab',
  'brand-5': '#bfbb62',
}

RGB Array

[76, 72, 108], [85, 82, 110], [126, 130, 150], [209, 207, 171], [191, 187, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4C486C, #55526E, #7E8296, #D1CFAB, #BFBB62 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: #4c486c; --color-2: #55526e; --color-3: #7e8296; --color-4: #d1cfab; --color-5: #bfbb62. 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