← Back to Editor

#4F6A99 · #7D8CB7 · #CACCD9 · #A0252A · #222328

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

#4F6A99

Indigo · SteelBlue · Navy Blue

HEX
#4F6A99
RGB
rgb(79, 106, 153)
HSL
hsl(218, 32%, 45%)
HSB
hsb(218, 48%, 60%)
CMYK
cmyk(48%, 31%, 0%, 40%)
Oklch
oklch(52.4% 0.081 261.1)

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

#7D8CB7

Azure · LightSlateGray · Navy Blue

HEX
#7D8CB7
RGB
rgb(125, 140, 183)
HSL
hsl(224, 29%, 60%)
HSB
hsb(224, 32%, 72%)
CMYK
cmyk(32%, 23%, 0%, 28%)
Oklch
oklch(64.4% 0.067 269.6)

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

#CACCD9

Azure · LightGray · Sky Blue

HEX
#CACCD9
RGB
rgb(202, 204, 217)
HSL
hsl(232, 16%, 82%)
HSB
hsb(232, 7%, 85%)
CMYK
cmyk(7%, 6%, 0%, 15%)
Oklch
oklch(84.8% 0.018 279.0)

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

#A0252A

Vermilion · Brown · Wine Red

HEX
#A0252A
RGB
rgb(160, 37, 42)
HSL
hsl(358, 62%, 39%)
HSB
hsb(358, 77%, 63%)
CMYK
cmyk(0%, 77%, 74%, 37%)
Oklch
oklch(46.7% 0.159 24.0)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#222328

Indigo · DarkSlateGray · Dark Stone

HEX
#222328
RGB
rgb(34, 35, 40)
HSL
hsl(230, 8%, 15%)
HSB
hsb(230, 15%, 16%)
CMYK
cmyk(15%, 13%, 0%, 84%)
Oklch
oklch(25.7% 0.009 276.7)

Traditional「Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F6A99
977D4E

Analogous

4E8E97
4F6A99
584E97

Triadic

4F6A99
974E69
69974E

Split-Comp.

4F6A99
97584E
8E974E

Tetradic

4F6A99
974E8E
977D4E
4E9758

Contrast Matrix WCAG 2.1 Contrast

4F6A99
7D8CB7
CACCD9
A0252A
222328
—
1.6
Fail
3.4
AA Large
1.4
Fail
2.9
Fail
1.6
Fail
—
2.1
Fail
2.3
Fail
4.7
AA
3.4
AA Large
2.1
Fail
—
4.7
AA
9.8
AAA
1.4
Fail
2.3
Fail
4.7
AA
—
2.1
Fail
2.9
Fail
4.7
AA
9.8
AAA
2.1
Fail
—
White BG
5.4AA
3.3AA Large
1.6Fail
7.5AAA
15.7AAA
Black BG
3.9AA Large
6.3AA
13.2AAA
2.8Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B8E
8384AD
CBCBD6
6B6A29
222227

Deuteranopia

59578B
8382AA
CBCBD5
727B29
222227

Tritanopia

508583
7EA4A3
CAD3D3
9A2828
222626

Achromatopsia

676767
8C8C8C
CDCDCD
4A4A4A
232323

Shades & Tints Shades & Tints

#4F6A99

Dark
Light

#7D8CB7

Dark
Light

#CACCD9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f6a99;
  --color-2: #7d8cb7;
  --color-3: #caccd9;
  --color-4: #a0252a;
  --color-5: #222328;
}

SCSS

$color-1: #4f6a99;
$color-2: #7d8cb7;
$color-3: #caccd9;
$color-4: #a0252a;
$color-5: #222328;

TAILWIND

colors: {
  'brand-1': '#4f6a99',
  'brand-2': '#7d8cb7',
  'brand-3': '#caccd9',
  'brand-4': '#a0252a',
  'brand-5': '#222328',
}

RGB Array

[79, 106, 153], [125, 140, 183], [202, 204, 217], [160, 37, 42], [34, 35, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4F6A99, #7D8CB7, #CACCD9, #A0252A, #222328 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: #4f6a99; --color-2: #7d8cb7; --color-3: #caccd9; --color-4: #a0252a; --color-5: #222328. 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