← Back to Editor

#3E444F · #58606E · #FF9B21 · #FF7921 · #EDEFF1

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

#3E444F

Indigo · DarkSlateGray · Prussian Blue

HEX
#3E444F
RGB
rgb(62, 68, 79)
HSL
hsl(219, 12%, 28%)
HSB
hsb(219, 22%, 31%)
CMYK
cmyk(22%, 14%, 0%, 69%)
Oklch
oklch(38.5% 0.020 262.6)

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

#58606E

Indigo · DimGray · Prussian Blue

HEX
#58606E
RGB
rgb(88, 96, 110)
HSL
hsl(218, 11%, 39%)
HSB
hsb(218, 20%, 43%)
CMYK
cmyk(20%, 13%, 0%, 57%)
Oklch
oklch(48.7% 0.025 261.7)

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

#FF9B21

Ginger · Orange · Warm Sun

HEX
#FF9B21
RGB
rgb(255, 155, 33)
HSL
hsl(33, 100%, 56%)
HSB
hsb(33, 87%, 100%)
CMYK
cmyk(0%, 39%, 87%, 0%)
Oklch
oklch(77.6% 0.168 63.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#FF7921

Tangerine · Tomato · Warm Sun

HEX
#FF7921
RGB
rgb(255, 121, 33)
HSL
hsl(24, 100%, 56%)
HSB
hsb(24, 87%, 100%)
CMYK
cmyk(0%, 53%, 87%, 0%)
Oklch
oklch(72.2% 0.186 47.7)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#EDEFF1

Azure · Lavender · Sky Blue

HEX
#EDEFF1
RGB
rgb(237, 239, 241)
HSL
hsl(210, 12%, 94%)
HSB
hsb(210, 2%, 95%)
CMYK
cmyk(2%, 1%, 0%, 5%)
Oklch
oklch(95.1% 0.003 247.9)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3E444F
504A3F

Analogous

3F4D50
3E444F
413F50

Triadic

3E444F
503F45
45503F

Split-Comp.

3E444F
50413F
4D503F

Tetradic

3E444F
503F4D
504A3F
3F5041

Contrast Matrix WCAG 2.1 Contrast

3E444F
58606E
FF9B21
FF7921
EDEFF1
—
1.5
Fail
4.6
AA
3.7
AA Large
8.5
AAA
1.5
Fail
—
3.0
AA Large
2.4
Fail
5.5
AA
4.6
AA
3.0
AA Large
—
1.2
Fail
1.8
Fail
3.7
AA Large
2.4
Fail
1.2
Fail
—
2.3
Fail
8.5
AAA
5.5
AA
1.8
Fail
2.3
Fail
—
White BG
9.8AAA
6.3AA
2.1Fail
2.6Fail
1.2Fail
Black BG
2.1Fail
3.3AA Large
10.0AAA
8.0AAA
18.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

41414C
5B5C6B
D4D33F
C5C436
EEEEF1

Deuteranopia

40404C
5B5A6A
DAE146
CDD73B
EEEEF0

Tritanopia

3E4A4A
586867
FA565B
F8474B
EDF0F0

Achromatopsia

434343
5F5F5F
ABABAB
979797
EFEFEF

Shades & Tints Shades & Tints

#3E444F

Dark
Light

#58606E

Dark
Light

#FF9B21

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3e444f;
  --color-2: #58606e;
  --color-3: #ff9b21;
  --color-4: #ff7921;
  --color-5: #edeff1;
}

SCSS

$color-1: #3e444f;
$color-2: #58606e;
$color-3: #ff9b21;
$color-4: #ff7921;
$color-5: #edeff1;

TAILWIND

colors: {
  'brand-1': '#3e444f',
  'brand-2': '#58606e',
  'brand-3': '#ff9b21',
  'brand-4': '#ff7921',
  'brand-5': '#edeff1',
}

RGB Array

[62, 68, 79], [88, 96, 110], [255, 155, 33], [255, 121, 33], [237, 239, 241]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3E444F, #58606E, #FF9B21, #FF7921, #EDEFF1 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #3e444f; --color-2: #58606e; --color-3: #ff9b21; --color-4: #ff7921; --color-5: #edeff1. 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. 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