← Back to Editor

#4B3E50 · #C74358 · #C26C91 · #BB989E · #BDB294

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4B3E50

Dark Plum · DarkSlateGray · Eggplant

HEX
#4B3E50
RGB
rgb(75, 62, 80)
HSL
hsl(283, 13%, 28%)
HSB
hsb(283, 23%, 31%)
CMYK
cmyk(6%, 22%, 0%, 69%)
Oklch
oklch(38.4% 0.034 316.6)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#C74358

Crimson · Crimson · Passion Red

HEX
#C74358
RGB
rgb(199, 67, 88)
HSL
hsl(350, 54%, 52%)
HSB
hsb(350, 66%, 78%)
CMYK
cmyk(0%, 66%, 56%, 22%)
Oklch
oklch(57.3% 0.167 14.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#C26C91

Dark Violet · LightCoral · Rose Pink

HEX
#C26C91
RGB
rgb(194, 108, 145)
HSL
hsl(334, 41%, 59%)
HSB
hsb(334, 44%, 76%)
CMYK
cmyk(0%, 44%, 25%, 24%)
Oklch
oklch(63.9% 0.117 353.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#BB989E

Peach Pink · DarkGray · Coral Red

HEX
#BB989E
RGB
rgb(187, 152, 158)
HSL
hsl(350, 20%, 66%)
HSB
hsb(350, 19%, 73%)
CMYK
cmyk(0%, 19%, 16%, 27%)
Oklch
oklch(71.3% 0.043 6.7)

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

#BDB294

Ginger · Tan · Sunflower

HEX
#BDB294
RGB
rgb(189, 178, 148)
HSL
hsl(44, 24%, 66%)
HSB
hsb(44, 22%, 74%)
CMYK
cmyk(0%, 6%, 22%, 26%)
Oklch
oklch(76.5% 0.043 90.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B3E50
43513E

Analogous

423E51
4B3E50
513E4D

Triadic

4B3E50
514B3E
3E514B

Split-Comp.

4B3E50
4D513E
3E5142

Tetradic

4B3E50
51423E
43513E
3E4D51

Contrast Matrix WCAG 2.1 Contrast

4B3E50
C74358
C26C91
BB989E
BDB294
—
2.1
Fail
2.8
Fail
3.8
AA Large
4.7
AA
2.1
Fail
—
1.3
Fail
1.9
Fail
2.3
Fail
2.8
Fail
1.3
Fail
—
1.4
Fail
1.7
Fail
3.8
AA Large
1.9
Fail
1.4
Fail
—
1.2
Fail
4.7
AA
2.3
Fail
1.7
Fail
1.2
Fail
—
White BG
10.0AAA
4.8AA
3.6AA Large
2.6Fail
2.1Fail
Black BG
2.1Fail
4.4AA Large
5.8AA
8.1AAA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

45454C
8E8D53
9D9C88
ACAC9D
B8B89B

Deuteranopia

46474B
969F52
A2A886
AEB19C
B9BA9D

Tritanopia

4A4847
C04F4E
BE817F
B99B9B
BCA1A2

Achromatopsia

444444
6D6D6D
8A8A8A
A3A3A3
B2B2B2

Shades & Tints Shades & Tints

#4B3E50

Dark
Light

#C74358

Dark
Light

#C26C91

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b3e50;
  --color-2: #c74358;
  --color-3: #c26c91;
  --color-4: #bb989e;
  --color-5: #bdb294;
}

SCSS

$color-1: #4b3e50;
$color-2: #c74358;
$color-3: #c26c91;
$color-4: #bb989e;
$color-5: #bdb294;

TAILWIND

colors: {
  'brand-1': '#4b3e50',
  'brand-2': '#c74358',
  'brand-3': '#c26c91',
  'brand-4': '#bb989e',
  'brand-5': '#bdb294',
}

RGB Array

[75, 62, 80], [199, 67, 88], [194, 108, 145], [187, 152, 158], [189, 178, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4B3E50, #C74358, #C26C91, #BB989E, #BDB294 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4b3e50; --color-2: #c74358; --color-3: #c26c91; --color-4: #bb989e; --color-5: #bdb294. 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. 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