← Back to Editor

#143E4D · #3F3E4D · #55454C · #8D5F51 · #758156

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

#143E4D

Lake Blue · DarkSlateGray · Peacock Green

HEX
#143E4D
RGB
rgb(20, 62, 77)
HSL
hsl(196, 59%, 19%)
HSB
hsb(196, 74%, 30%)
CMYK
cmyk(74%, 19%, 0%, 70%)
Oklch
oklch(34.2% 0.053 225.3)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#3F3E4D

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3F3E4D
RGB
rgb(63, 62, 77)
HSL
hsl(244, 11%, 27%)
HSB
hsb(244, 19%, 30%)
CMYK
cmyk(18%, 19%, 0%, 70%)
Oklch
oklch(37.1% 0.026 288.1)

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

#55454C

Dark Violet · DarkSlateGray · Camellia

HEX
#55454C
RGB
rgb(85, 69, 76)
HSL
hsl(334, 10%, 30%)
HSB
hsb(334, 19%, 33%)
CMYK
cmyk(0%, 19%, 11%, 67%)
Oklch
oklch(40.9% 0.024 350.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#8D5F51

Crimson · Sienna · Passion Red

HEX
#8D5F51
RGB
rgb(141, 95, 81)
HSL
hsl(14, 27%, 44%)
HSB
hsb(14, 43%, 55%)
CMYK
cmyk(0%, 33%, 43%, 45%)
Oklch
oklch(53.1% 0.064 37.6)

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

#758156

Grass Green · DimGray · Olive Green

HEX
#758156
RGB
rgb(117, 129, 86)
HSL
hsl(77, 20%, 42%)
HSB
hsb(77, 33%, 51%)
CMYK
cmyk(9%, 0%, 33%, 49%)
Oklch
oklch(58.2% 0.064 121.1)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

143E4D
4D2314

Analogous

144D40
143E4D
14214D

Triadic

143E4D
4D143E
3E4D14

Split-Comp.

143E4D
4D1421
4D4014

Tetradic

143E4D
40144D
4D2314
214D14

Contrast Matrix WCAG 2.1 Contrast

143E4D
3F3E4D
55454C
8D5F51
758156
—
1.1
Fail
1.3
Fail
2.1
Fail
2.8
Fail
1.1
Fail
—
1.2
Fail
1.9
Fail
2.5
Fail
1.3
Fail
1.2
Fail
—
1.7
Fail
2.1
Fail
2.1
Fail
1.9
Fail
1.7
Fail
—
1.3
Fail
2.8
Fail
2.5
Fail
2.1
Fail
1.3
Fail
—
White BG
11.5AAA
10.5AAA
9.0AAA
5.4AA
4.2AA Large
Black BG
1.8Fail
2.0Fail
2.3Fail
3.9AA Large
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

262749
3F3F49
4E4E4A
797954
7A7A60

Deuteranopia

242149
3F3F49
4F504A
7C7F55
7A7963

Tritanopia

164746
3F4746
544949
8B5758
76696A

Achromatopsia

333333
404040
4B4B4B
6B6B6B
797979

Shades & Tints Shades & Tints

#143E4D

Dark
Light

#3F3E4D

Dark
Light

#55454C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #143e4d;
  --color-2: #3f3e4d;
  --color-3: #55454c;
  --color-4: #8d5f51;
  --color-5: #758156;
}

SCSS

$color-1: #143e4d;
$color-2: #3f3e4d;
$color-3: #55454c;
$color-4: #8d5f51;
$color-5: #758156;

TAILWIND

colors: {
  'brand-1': '#143e4d',
  'brand-2': '#3f3e4d',
  'brand-3': '#55454c',
  'brand-4': '#8d5f51',
  'brand-5': '#758156',
}

RGB Array

[20, 62, 77], [63, 62, 77], [85, 69, 76], [141, 95, 81], [117, 129, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #143E4D, #3F3E4D, #55454C, #8D5F51, #758156 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: #143e4d; --color-2: #3f3e4d; --color-3: #55454c; --color-4: #8d5f51; --color-5: #758156. 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