← Back to Editor

#38424E · #50575F · #974C53 · #FE5848 · #FE8443

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 Library

Color Details Color Details

#38424E

Indigo · DarkSlateGray · Prussian Blue

HEX
#38424E
RGB
rgb(56, 66, 78)
HSL
hsl(213, 16%, 26%)
HSB
hsb(213, 28%, 31%)
CMYK
cmyk(28%, 15%, 0%, 69%)
Oklch
oklch(37.5% 0.025 253.1)

TraditionalIndigo」· PaintPrussian Blue」· Creative Blush Sunrise

#50575F

Indigo · DimGray · Charcoal

HEX
#50575F
RGB
rgb(80, 87, 95)
HSL
hsl(212, 9%, 34%)
HSB
hsb(212, 16%, 37%)
CMYK
cmyk(16%, 8%, 0%, 63%)
Oklch
oklch(45.3% 0.016 251.7)

TraditionalIndigo」· PaintCharcoal」· Creative Midnight Shadow

#974C53

Crimson · Sienna · Passion Red

HEX
#974C53
RGB
rgb(151, 76, 83)
HSL
hsl(354, 33%, 45%)
HSB
hsb(354, 50%, 59%)
CMYK
cmyk(0%, 50%, 45%, 41%)
Oklch
oklch(51.1% 0.100 15.4)

TraditionalCrimson」· PaintPassion Red」· Creative Blush Sunrise

#FE5848

Peach Pink · Tomato · Coral Red

HEX
#FE5848
RGB
rgb(254, 88, 72)
HSL
hsl(5, 99%, 64%)
HSB
hsb(5, 72%, 100%)
CMYK
cmyk(0%, 65%, 72%, 0%)
Oklch
oklch(68.2% 0.204 29.0)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#FE8443

Apricot · Coral · Warm Sun

HEX
#FE8443
RGB
rgb(254, 132, 67)
HSL
hsl(21, 99%, 63%)
HSB
hsb(21, 74%, 100%)
CMYK
cmyk(0%, 48%, 74%, 0%)
Oklch
oklch(74.0% 0.168 46.4)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

38424E
4D4338

Analogous

384C4D
38424E
39384D

Triadic

38424E
4D3841
414D38

Split-Comp.

38424E
4D3938
4C4D38

Tetradic

38424E
4D384C
4D4338
384D39

Contrast Matrix WCAG 2.1 Contrast

38424E
50575F
974C53
FE5848
FE8443
1.4
Fail
1.7
Fail
3.3
AA Large
4.2
AA Large
1.4
Fail
1.2
Fail
2.3
Fail
3.0
Fail
1.7
Fail
1.2
Fail
1.9
Fail
2.5
Fail
3.3
AA Large
2.3
Fail
1.9
Fail
1.3
Fail
4.2
AA Large
3.0
Fail
2.5
Fail
1.3
Fail
White BG
10.2AAA
7.3AAA
6.0AA
3.1AA Large
2.4Fail
Black BG
2.1Fail
2.9Fail
3.5AA Large
6.7AA
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C4B
53535D
777651
B6B54C
C9C853

Deuteranopia

3C3B4A
53525D
7B8151
C0CC4D
D0D957

Tritanopia

384948
505C5B
935050
F64F50
F85F62

Achromatopsia

404040
565656
636363
888888
A1A1A1

Shades & Tints Shades & Tints

#38424E

Dark
Light

#50575F

Dark
Light

#974C53

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #38424e;
  --color-2: #50575f;
  --color-3: #974c53;
  --color-4: #fe5848;
  --color-5: #fe8443;
}

SCSS

$color-1: #38424e;
$color-2: #50575f;
$color-3: #974c53;
$color-4: #fe5848;
$color-5: #fe8443;

TAILWIND

colors: {
  'brand-1': '#38424e',
  'brand-2': '#50575f',
  'brand-3': '#974c53',
  'brand-4': '#fe5848',
  'brand-5': '#fe8443',
}

RGB Array

[56, 66, 78], [80, 87, 95], [151, 76, 83], [254, 88, 72], [254, 132, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #38424E, #50575F, #974C53, #FE5848, #FE8443 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: #38424e; --color-2: #50575f; --color-3: #974c53; --color-4: #fe5848; --color-5: #fe8443. 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