← Back to Editor

#3E444A · #787776 · #BB8F8F · #F89689 · #949594

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

#3E444A

Indigo · DarkSlateGray · Charcoal

HEX
#3E444A
RGB
rgb(62, 68, 74)
HSL
hsl(210, 9%, 27%)
HSB
hsb(210, 16%, 29%)
CMYK
cmyk(16%, 8%, 0%, 71%)
Oklch
oklch(38.3% 0.013 248.2)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#787776

Ink Gray · Gray · Warm Gray

HEX
#787776
RGB
rgb(120, 119, 118)
HSL
hsl(30, 1%, 47%)
HSB
hsb(30, 2%, 47%)
CMYK
cmyk(0%, 1%, 2%, 53%)
Oklch
oklch(57.0% 0.002 67.8)

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

#BB8F8F

Peach Pink · DarkGray · Coral Red

HEX
#BB8F8F
RGB
rgb(187, 143, 143)
HSL
hsl(0, 24%, 65%)
HSB
hsb(0, 24%, 73%)
CMYK
cmyk(0%, 24%, 24%, 27%)
Oklch
oklch(69.2% 0.054 18.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F89689

Peach Pink · LightSalmon · Coral Red

HEX
#F89689
RGB
rgb(248, 150, 137)
HSL
hsl(7, 89%, 75%)
HSB
hsb(7, 45%, 97%)
CMYK
cmyk(0%, 40%, 45%, 3%)
Oklch
oklch(77.2% 0.120 28.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#949594

Ash · LightSlateGray · Silver Sand

HEX
#949594
RGB
rgb(148, 149, 148)
HSL
hsl(120, 0%, 58%)
HSB
hsb(120, 1%, 58%)
CMYK
cmyk(1%, 0%, 1%, 42%)
Oklch
oklch(66.9% 0.002 145.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3E444A
4B453F

Analogous

3F4B4B
3E444A
3F3F4B

Triadic

3E444A
4B3F45
454B3F

Split-Comp.

3E444A
4B3F3F
4B4B3F

Tetradic

3E444A
4B3F4B
4B453F
3F4B3F

Contrast Matrix WCAG 2.1 Contrast

3E444A
787776
BB8F8F
F89689
949594
—
2.2
Fail
3.5
AA Large
4.6
AA
3.3
AA Large
2.2
Fail
—
1.6
Fail
2.1
Fail
1.5
Fail
3.5
AA Large
1.6
Fail
—
1.3
Fail
1.1
Fail
4.6
AA
2.1
Fail
1.3
Fail
—
1.4
Fail
3.3
AA Large
1.5
Fail
1.1
Fail
1.4
Fail
—
White BG
9.9AAA
4.5AA Large
2.8Fail
2.2Fail
3.0AA Large
Black BG
2.1Fail
4.7AA
7.4AAA
9.7AAA
7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

414149
787876
A8A88F
CECD8C
949494

Deuteranopia

404048
787876
ABAE8F
D3DB8D
949494

Tritanopia

3E4747
787676
B98F8F
F38F8F
949494

Achromatopsia

434343
777777
9C9C9C
B2B2B2
959595

Shades & Tints Shades & Tints

#3E444A

Dark
Light

#787776

Dark
Light

#BB8F8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3e444a;
  --color-2: #787776;
  --color-3: #bb8f8f;
  --color-4: #f89689;
  --color-5: #949594;
}

SCSS

$color-1: #3e444a;
$color-2: #787776;
$color-3: #bb8f8f;
$color-4: #f89689;
$color-5: #949594;

TAILWIND

colors: {
  'brand-1': '#3e444a',
  'brand-2': '#787776',
  'brand-3': '#bb8f8f',
  'brand-4': '#f89689',
  'brand-5': '#949594',
}

RGB Array

[62, 68, 74], [120, 119, 118], [187, 143, 143], [248, 150, 137], [148, 149, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3E444A, #787776, #BB8F8F, #F89689, #949594 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: #3e444a; --color-2: #787776; --color-3: #bb8f8f; --color-4: #f89689; --color-5: #949594. 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