← Back to Editor

#5A7073 · #3F5052 · #DE3737 · #EB7650 · #F5E5AE

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

#5A7073

Slate Blue · DimGray · Mint Ice

HEX
#5A7073
RGB
rgb(90, 112, 115)
HSL
hsl(187, 12%, 40%)
HSB
hsb(187, 22%, 45%)
CMYK
cmyk(22%, 3%, 0%, 55%)
Oklch
oklch(52.9% 0.026 206.6)

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

#3F5052

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3F5052
RGB
rgb(63, 80, 82)
HSL
hsl(186, 13%, 28%)
HSB
hsb(186, 23%, 32%)
CMYK
cmyk(23%, 2%, 0%, 68%)
Oklch
oklch(41.8% 0.022 205.2)

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

#DE3737

Vermilion · Crimson · Passion Red

HEX
#DE3737
RGB
rgb(222, 55, 55)
HSL
hsl(0, 72%, 54%)
HSB
hsb(0, 75%, 87%)
CMYK
cmyk(0%, 75%, 75%, 13%)
Oklch
oklch(59.5% 0.204 26.0)

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

#EB7650

Apricot · Coral · Warm Sun

HEX
#EB7650
RGB
rgb(235, 118, 80)
HSL
hsl(15, 79%, 62%)
HSB
hsb(15, 66%, 92%)
CMYK
cmyk(0%, 50%, 66%, 8%)
Oklch
oklch(69.4% 0.154 38.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F5E5AE

Goose Yellow · Wheat · Lemon Cream

HEX
#F5E5AE
RGB
rgb(245, 229, 174)
HSL
hsl(46, 78%, 82%)
HSB
hsb(46, 29%, 96%)
CMYK
cmyk(0%, 7%, 29%, 4%)
Oklch
oklch(92.2% 0.073 93.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A7073
725D5A

Analogous

5A7269
5A7073
5A6372

Triadic

5A7073
725A6F
6F725A

Split-Comp.

5A7073
725A63
72695A

Tetradic

5A7073
695A72
725D5A
63725A

Contrast Matrix WCAG 2.1 Contrast

5A7073
3F5052
DE3737
EB7650
F5E5AE
—
1.6
Fail
1.2
Fail
1.8
Fail
4.2
AA Large
1.6
Fail
—
1.9
Fail
2.9
Fail
6.7
AA
1.2
Fail
1.9
Fail
—
1.5
Fail
3.5
AA Large
1.8
Fail
2.9
Fail
1.5
Fail
—
2.3
Fail
4.2
AA Large
6.7
AA
3.5
AA Large
2.3
Fail
—
White BG
5.3AA
8.5AAA
4.5AA Large
2.9Fail
1.3Fail
Black BG
4.0AA Large
2.5Fail
4.7AA
7.2AAA
16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

646472
464752
969437
B8B759
EEEEBB

Deuteranopia

626172
454451
9FAC37
BFC85B
EFF0BF

Tritanopia

5B7272
405151
D63737
E56062
F4C6C8

Achromatopsia

6A6A6A
4B4B4B
696969
959595
E4E4E4

Shades & Tints Shades & Tints

#5A7073

Dark
Light

#3F5052

Dark
Light

#DE3737

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a7073;
  --color-2: #3f5052;
  --color-3: #de3737;
  --color-4: #eb7650;
  --color-5: #f5e5ae;
}

SCSS

$color-1: #5a7073;
$color-2: #3f5052;
$color-3: #de3737;
$color-4: #eb7650;
$color-5: #f5e5ae;

TAILWIND

colors: {
  'brand-1': '#5a7073',
  'brand-2': '#3f5052',
  'brand-3': '#de3737',
  'brand-4': '#eb7650',
  'brand-5': '#f5e5ae',
}

RGB Array

[90, 112, 115], [63, 80, 82], [222, 55, 55], [235, 118, 80], [245, 229, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A7073, #3F5052, #DE3737, #EB7650, #F5E5AE 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: #5a7073; --color-2: #3f5052; --color-3: #de3737; --color-4: #eb7650; --color-5: #f5e5ae. 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