← Back to Editor

#373145 · #FC8B99 · #B9A4AF · #7E7980 · #6D6673

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

#373145

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#373145
RGB
rgb(55, 49, 69)
HSL
hsl(258, 17%, 23%)
HSB
hsb(258, 29%, 27%)
CMYK
cmyk(20%, 29%, 0%, 73%)
Oklch
oklch(32.8% 0.036 298.2)

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

#FC8B99

Peach Pink · LightCoral · Coral Red

HEX
#FC8B99
RGB
rgb(252, 139, 153)
HSL
hsl(353, 95%, 77%)
HSB
hsb(353, 45%, 99%)
CMYK
cmyk(0%, 45%, 39%, 1%)
Oklch
oklch(76.3% 0.137 13.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#B9A4AF

Mauve · DarkGray · Rose Pink

HEX
#B9A4AF
RGB
rgb(185, 164, 175)
HSL
hsl(329, 13%, 68%)
HSB
hsb(329, 11%, 73%)
CMYK
cmyk(0%, 11%, 5%, 27%)
Oklch
oklch(74.0% 0.029 344.9)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#7E7980

Ink Gray · Gray · Warm Gray

HEX
#7E7980
RGB
rgb(126, 121, 128)
HSL
hsl(283, 3%, 49%)
HSB
hsb(283, 5%, 50%)
CMYK
cmyk(2%, 5%, 0%, 50%)
Oklch
oklch(58.3% 0.012 316.5)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#6D6673

Ink Gray · DimGray · Warm Gray

HEX
#6D6673
RGB
rgb(109, 102, 115)
HSL
hsl(272, 6%, 43%)
HSB
hsb(272, 11%, 45%)
CMYK
cmyk(5%, 11%, 0%, 55%)
Oklch
oklch(52.1% 0.022 309.6)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

373145
3F4531

Analogous

313545
373145
413145

Triadic

373145
453731
314537

Split-Comp.

373145
454131
354531

Tetradic

373145
453135
3F4531
314541

Contrast Matrix WCAG 2.1 Contrast

373145
FC8B99
B9A4AF
7E7980
6D6673
—
5.5
AA
5.3
AA
2.9
Fail
2.3
Fail
5.5
AA
—
1.0
Fail
1.9
Fail
2.4
Fail
5.3
AA
1.0
Fail
—
1.8
Fail
2.4
Fail
2.9
Fail
1.9
Fail
1.8
Fail
—
1.3
Fail
2.3
Fail
2.4
Fail
2.4
Fail
1.3
Fail
—
White BG
12.4AAA
2.3Fail
2.3Fail
4.3AA Large
5.5AA
Black BG
1.7Fail
9.3AAA
9.0AAA
4.9AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

343440
CBCA96
B0B0AC
7C7C7E
6A6A70

Deuteranopia

35353F
D2DA95
B1B3AC
7C7C7E
6A6B6F

Tritanopia

373C3C
F69392
B8AAAA
7E7D7D
6D6D6D

Achromatopsia

353535
AEAEAE
ACACAC
7B7B7B
6A6A6A

Shades & Tints Shades & Tints

#373145

Dark
Light

#FC8B99

Dark
Light

#B9A4AF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #373145;
  --color-2: #fc8b99;
  --color-3: #b9a4af;
  --color-4: #7e7980;
  --color-5: #6d6673;
}

SCSS

$color-1: #373145;
$color-2: #fc8b99;
$color-3: #b9a4af;
$color-4: #7e7980;
$color-5: #6d6673;

TAILWIND

colors: {
  'brand-1': '#373145',
  'brand-2': '#fc8b99',
  'brand-3': '#b9a4af',
  'brand-4': '#7e7980',
  'brand-5': '#6d6673',
}

RGB Array

[55, 49, 69], [252, 139, 153], [185, 164, 175], [126, 121, 128], [109, 102, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #373145, #FC8B99, #B9A4AF, #7E7980, #6D6673 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: #373145; --color-2: #fc8b99; --color-3: #b9a4af; --color-4: #7e7980; --color-5: #6d6673. 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