← Back to Editor

#755A59 · #4557AA · #1F3E70 · #AD9A97 · #E8154A

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

#755A59

Crimson · DimGray · Wine Red

HEX
#755A59
RGB
rgb(117, 90, 89)
HSL
hsl(2, 14%, 40%)
HSB
hsb(2, 24%, 46%)
CMYK
cmyk(0%, 23%, 24%, 54%)
Oklch
oklch(49.5% 0.036 20.9)

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

#4557AA

Indigo · DarkSlateBlue · Navy Blue

HEX
#4557AA
RGB
rgb(69, 87, 170)
HSL
hsl(229, 42%, 47%)
HSB
hsb(229, 59%, 67%)
CMYK
cmyk(59%, 49%, 0%, 33%)
Oklch
oklch(48.6% 0.134 271.4)

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

#1F3E70

Indigo · MidnightBlue · Prussian Blue

HEX
#1F3E70
RGB
rgb(31, 62, 112)
HSL
hsl(217, 57%, 28%)
HSB
hsb(217, 72%, 44%)
CMYK
cmyk(72%, 45%, 0%, 56%)
Oklch
oklch(36.8% 0.094 259.5)

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

#AD9A97

Peach Pink · DarkGray · Coral Red

HEX
#AD9A97
RGB
rgb(173, 154, 151)
HSL
hsl(8, 12%, 64%)
HSB
hsb(8, 13%, 68%)
CMYK
cmyk(0%, 11%, 13%, 32%)
Oklch
oklch(70.2% 0.023 28.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E8154A

Vermilion · Crimson · Passion Red

HEX
#E8154A
RGB
rgb(232, 21, 74)
HSL
hsl(345, 83%, 50%)
HSB
hsb(345, 91%, 91%)
CMYK
cmyk(0%, 91%, 68%, 9%)
Oklch
oklch(59.6% 0.231 17.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

755A59
587374

Analogous

745865
755A59
746758

Triadic

755A59
587459
595874

Split-Comp.

755A59
587467
586574

Tetradic

755A59
657458
587374
675874

Contrast Matrix WCAG 2.1 Contrast

755A59
4557AA
1F3E70
AD9A97
E8154A
—
1.1
Fail
1.7
Fail
2.3
Fail
1.4
Fail
1.1
Fail
—
1.6
Fail
2.5
Fail
1.5
Fail
1.7
Fail
1.6
Fail
—
4.0
AA Large
2.3
Fail
2.3
Fail
2.5
Fail
4.0
AA Large
—
1.7
Fail
1.4
Fail
1.5
Fail
2.3
Fail
1.7
Fail
—
White BG
6.2AA
6.6AA
10.6AAA
2.7Fail
4.5AA
Black BG
3.4AA Large
3.2AA Large
2.0Fail
7.8AAA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

696959
4D4D96
2C2D64
A5A598
8D8B3D

Deuteranopia

6B6D59
4C4A91
2B2861
A6A798
99A93A

Tritanopia

745959
468683
215A58
AC9898
DD3331

Achromatopsia

626262
5B5B5B
3A3A3A
9F9F9F
5A5A5A

Shades & Tints Shades & Tints

#755A59

Dark
Light

#4557AA

Dark
Light

#1F3E70

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #755a59;
  --color-2: #4557aa;
  --color-3: #1f3e70;
  --color-4: #ad9a97;
  --color-5: #e8154a;
}

SCSS

$color-1: #755a59;
$color-2: #4557aa;
$color-3: #1f3e70;
$color-4: #ad9a97;
$color-5: #e8154a;

TAILWIND

colors: {
  'brand-1': '#755a59',
  'brand-2': '#4557aa',
  'brand-3': '#1f3e70',
  'brand-4': '#ad9a97',
  'brand-5': '#e8154a',
}

RGB Array

[117, 90, 89], [69, 87, 170], [31, 62, 112], [173, 154, 151], [232, 21, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #755A59, #4557AA, #1F3E70, #AD9A97, #E8154A 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: #755a59; --color-2: #4557aa; --color-3: #1f3e70; --color-4: #ad9a97; --color-5: #e8154a. 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