← Back to Editor

#403F3E · #4D4443 · #614848 · #7A4B51 · #187C72

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#403F3E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#403F3E
RGB
rgb(64, 63, 62)
HSL
hsl(30, 2%, 25%)
HSB
hsb(30, 3%, 25%)
CMYK
cmyk(0%, 2%, 3%, 75%)
Oklch
oklch(36.8% 0.002 67.8)

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

#4D4443

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4D4443
RGB
rgb(77, 68, 67)
HSL
hsl(6, 7%, 28%)
HSB
hsb(6, 13%, 30%)
CMYK
cmyk(0%, 12%, 13%, 70%)
Oklch
oklch(39.5% 0.012 25.3)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#614848

Crimson · DarkOliveGreen · Wine Red

HEX
#614848
RGB
rgb(97, 72, 72)
HSL
hsl(0, 15%, 33%)
HSB
hsb(0, 26%, 38%)
CMYK
cmyk(0%, 26%, 26%, 62%)
Oklch
oklch(42.8% 0.034 18.6)

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

#7A4B51

Crimson · DimGray · Wine Red

HEX
#7A4B51
RGB
rgb(122, 75, 81)
HSL
hsl(352, 24%, 39%)
HSB
hsb(352, 39%, 48%)
CMYK
cmyk(0%, 39%, 34%, 52%)
Oklch
oklch(46.8% 0.064 11.5)

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

#187C72

Mineral Blue · Teal · Mint Ice

HEX
#187C72
RGB
rgb(24, 124, 114)
HSL
hsl(174, 68%, 29%)
HSB
hsb(174, 81%, 49%)
CMYK
cmyk(81%, 0%, 8%, 51%)
Oklch
oklch(53.0% 0.088 184.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

403F3E
3E4041

Analogous

413E3E
403F3E
41413E

Triadic

403F3E
3E4140
403E41

Split-Comp.

403F3E
3E4141
3E3E41

Tetradic

403F3E
3E413E
3E4041
413E41

Contrast Matrix WCAG 2.1 Contrast

403F3E
4D4443
614848
7A4B51
187C72
—
1.1
Fail
1.3
Fail
1.5
Fail
2.1
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.9
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
1.4
Fail
2.1
Fail
1.9
Fail
1.6
Fail
1.4
Fail
—
White BG
10.5AAA
9.4AAA
8.3AAA
7.1AAA
5.0AA
Black BG
2.0Fail
2.2Fail
2.5Fail
3.0Fail
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

40403E
494943
565648
666550
434474

Deuteranopia

40403E
4A4A43
585948
686C4F
3E3675

Tritanopia

403E3E
4D4343
604848
784E4E
1D7677

Achromatopsia

3F3F3F
474747
4F4F4F
5A5A5A
5D5D5D

Shades & Tints Shades & Tints

#403F3E

Dark
Light

#4D4443

Dark
Light

#614848

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #403f3e;
  --color-2: #4d4443;
  --color-3: #614848;
  --color-4: #7a4b51;
  --color-5: #187c72;
}

SCSS

$color-1: #403f3e;
$color-2: #4d4443;
$color-3: #614848;
$color-4: #7a4b51;
$color-5: #187c72;

TAILWIND

colors: {
  'brand-1': '#403f3e',
  'brand-2': '#4d4443',
  'brand-3': '#614848',
  'brand-4': '#7a4b51',
  'brand-5': '#187c72',
}

RGB Array

[64, 63, 62], [77, 68, 67], [97, 72, 72], [122, 75, 81], [24, 124, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #403F3E, #4D4443, #614848, #7A4B51, #187C72 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. 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: #403f3e; --color-2: #4d4443; --color-3: #614848; --color-4: #7a4b51; --color-5: #187c72. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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