← Back to Editor

#4D3643 · #626F73 · #81918C · #DEBC95 · #BA5454

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

#4D3643

Rose Purple · DarkSlateGray · Camellia

HEX
#4D3643
RGB
rgb(77, 54, 67)
HSL
hsl(326, 18%, 26%)
HSB
hsb(326, 30%, 30%)
CMYK
cmyk(0%, 30%, 13%, 70%)
Oklch
oklch(36.4% 0.039 344.3)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#626F73

Slate Blue · DimGray · Warm Gray

HEX
#626F73
RGB
rgb(98, 111, 115)
HSL
hsl(194, 8%, 42%)
HSB
hsb(194, 15%, 45%)
CMYK
cmyk(15%, 3%, 0%, 55%)
Oklch
oklch(53.2% 0.017 218.2)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#81918C

Ash · LightSlateGray · Warm Gray

HEX
#81918C
RGB
rgb(129, 145, 140)
HSL
hsl(161, 7%, 54%)
HSB
hsb(161, 11%, 57%)
CMYK
cmyk(11%, 0%, 3%, 43%)
Oklch
oklch(64.2% 0.020 174.9)

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

#DEBC95

Goose Yellow · BurlyWood · Warm Sun

HEX
#DEBC95
RGB
rgb(222, 188, 149)
HSL
hsl(32, 53%, 73%)
HSB
hsb(32, 33%, 87%)
CMYK
cmyk(0%, 15%, 33%, 13%)
Oklch
oklch(81.5% 0.065 70.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#BA5454

Crimson · Sienna · Passion Red

HEX
#BA5454
RGB
rgb(186, 84, 84)
HSL
hsl(0, 43%, 53%)
HSB
hsb(0, 55%, 73%)
CMYK
cmyk(0%, 55%, 55%, 27%)
Oklch
oklch(57.4% 0.132 22.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D3643
364E41

Analogous

4D364E
4D3643
4E3638

Triadic

4D3643
444E36
36444E

Split-Comp.

4D3643
384E36
364E4D

Tetradic

4D3643
4E4D36
364E41
36384E

Contrast Matrix WCAG 2.1 Contrast

4D3643
626F73
81918C
DEBC95
BA5454
—
2.1
Fail
3.3
AA Large
6.1
AA
2.3
Fail
2.1
Fail
—
1.6
Fail
2.9
Fail
1.1
Fail
3.3
AA Large
1.6
Fail
—
1.8
Fail
1.4
Fail
6.1
AA
2.9
Fail
1.8
Fail
—
2.6
Fail
2.3
Fail
1.1
Fail
1.4
Fail
2.6
Fail
—
White BG
10.9AAA
5.2AA
3.3AA Large
1.8Fail
4.7AA
Black BG
1.9Fail
4.0AA Large
6.4AA
11.7AAA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

434340
686872
88888D
CFCF9E
8E8D54

Deuteranopia

44463F
676672
87868E
D1D4A1
949B54

Tritanopia

4C3D3D
637171
828E8E
DCA6A8
B55454

Achromatopsia

3E3E3E
6C6C6C
8C8C8C
C2C2C2
727272

Shades & Tints Shades & Tints

#4D3643

Dark
Light

#626F73

Dark
Light

#81918C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d3643;
  --color-2: #626f73;
  --color-3: #81918c;
  --color-4: #debc95;
  --color-5: #ba5454;
}

SCSS

$color-1: #4d3643;
$color-2: #626f73;
$color-3: #81918c;
$color-4: #debc95;
$color-5: #ba5454;

TAILWIND

colors: {
  'brand-1': '#4d3643',
  'brand-2': '#626f73',
  'brand-3': '#81918c',
  'brand-4': '#debc95',
  'brand-5': '#ba5454',
}

RGB Array

[77, 54, 67], [98, 111, 115], [129, 145, 140], [222, 188, 149], [186, 84, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D3643, #626F73, #81918C, #DEBC95, #BA5454 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: #4d3643; --color-2: #626f73; --color-3: #81918c; --color-4: #debc95; --color-5: #ba5454. 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