← Back to Editor

#394553 · #7D8296 · #829F9D · #D2BBAB · #CFCFA9

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

#394553

Indigo · DarkSlateGray · Prussian Blue

HEX
#394553
RGB
rgb(57, 69, 83)
HSL
hsl(212, 19%, 27%)
HSB
hsb(212, 31%, 33%)
CMYK
cmyk(31%, 17%, 0%, 67%)
Oklch
oklch(38.5% 0.029 252.5)

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

#7D8296

Azure · LightSlateGray · Navy Blue

HEX
#7D8296
RGB
rgb(125, 130, 150)
HSL
hsl(228, 11%, 54%)
HSB
hsb(228, 17%, 59%)
CMYK
cmyk(17%, 13%, 0%, 41%)
Oklch
oklch(60.9% 0.031 274.4)

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

#829F9D

Mineral Blue · LightSlateGray · Lake Green

HEX
#829F9D
RGB
rgb(130, 159, 157)
HSL
hsl(176, 13%, 57%)
HSB
hsb(176, 18%, 62%)
CMYK
cmyk(18%, 0%, 1%, 38%)
Oklch
oklch(68.0% 0.032 191.3)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#D2BBAB

Apricot · Silver · Warm Sun

HEX
#D2BBAB
RGB
rgb(210, 187, 171)
HSL
hsl(25, 30%, 75%)
HSB
hsb(25, 19%, 82%)
CMYK
cmyk(0%, 11%, 19%, 18%)
Oklch
oklch(80.7% 0.034 57.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#CFCFA9

Fresh Green · Silver · Sunflower

HEX
#CFCFA9
RGB
rgb(207, 207, 169)
HSL
hsl(60, 28%, 74%)
HSB
hsb(60, 18%, 81%)
CMYK
cmyk(0%, 0%, 18%, 19%)
Oklch
oklch(84.5% 0.051 107.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

394553
524638

Analogous

385152
394553
393852

Triadic

394553
523844
445238

Split-Comp.

394553
523938
515238

Tetradic

394553
523851
524638
385239

Contrast Matrix WCAG 2.1 Contrast

394553
7D8296
829F9D
D2BBAB
CFCFA9
—
2.6
Fail
3.4
AA Large
5.3
AA
6.1
AA
2.6
Fail
—
1.3
Fail
2.1
Fail
2.4
Fail
3.4
AA Large
1.3
Fail
—
1.5
Fail
1.8
Fail
5.3
AA
2.1
Fail
1.5
Fail
—
1.1
Fail
6.1
AA
2.4
Fail
1.8
Fail
1.1
Fail
—
White BG
9.8AAA
3.8AA Large
2.8Fail
1.8Fail
1.6Fail
Black BG
2.2Fail
5.5AA
7.4AAA
11.4AAA
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E50
7F7F91
8F8F9D
C8C8AF
CFCFB2

Deuteranopia

3E3D4F
7F7F90
8D8B9E
C9CBB0
CFCFB4

Tritanopia

3A4D4C
7D8D8D
839E9E
D1B2B3
CFB9BB

Achromatopsia

434343
838383
969696
C0C0C0
CBCBCB

Shades & Tints Shades & Tints

#394553

Dark
Light

#7D8296

Dark
Light

#829F9D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #394553;
  --color-2: #7d8296;
  --color-3: #829f9d;
  --color-4: #d2bbab;
  --color-5: #cfcfa9;
}

SCSS

$color-1: #394553;
$color-2: #7d8296;
$color-3: #829f9d;
$color-4: #d2bbab;
$color-5: #cfcfa9;

TAILWIND

colors: {
  'brand-1': '#394553',
  'brand-2': '#7d8296',
  'brand-3': '#829f9d',
  'brand-4': '#d2bbab',
  'brand-5': '#cfcfa9',
}

RGB Array

[57, 69, 83], [125, 130, 150], [130, 159, 157], [210, 187, 171], [207, 207, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #394553, #7D8296, #829F9D, #D2BBAB, #CFCFA9 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: #394553; --color-2: #7d8296; --color-3: #829f9d; --color-4: #d2bbab; --color-5: #cfcfa9. 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