← Back to Editor

#7E1437 · #7E3447 · #7E5457 · #7E7467 · #7E9477

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7E1437

Dark Violet · Brown · Camellia

HEX
#7E1437
RGB
rgb(126, 20, 55)
HSL
hsl(340, 73%, 29%)
HSB
hsb(340, 84%, 49%)
CMYK
cmyk(0%, 84%, 56%, 51%)
Oklch
oklch(39.2% 0.140 7.9)

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

#7E3447

Crimson · Brown · Wine Red

HEX
#7E3447
RGB
rgb(126, 52, 71)
HSL
hsl(345, 42%, 35%)
HSB
hsb(345, 59%, 49%)
CMYK
cmyk(0%, 59%, 44%, 51%)
Oklch
oklch(43.2% 0.104 6.5)

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

#7E5457

Crimson · DimGray · Passion Red

HEX
#7E5457
RGB
rgb(126, 84, 87)
HSL
hsl(356, 20%, 41%)
HSB
hsb(356, 33%, 49%)
CMYK
cmyk(0%, 33%, 31%, 51%)
Oklch
oklch(49.3% 0.056 14.6)

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

#7E7467

Ochre · DimGray · Amber Brown

HEX
#7E7467
RGB
rgb(126, 116, 103)
HSL
hsl(34, 10%, 45%)
HSB
hsb(34, 18%, 49%)
CMYK
cmyk(0%, 8%, 18%, 51%)
Oklch
oklch(56.4% 0.023 74.5)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#7E9477

Celadon · Gray · Olive Green

HEX
#7E9477
RGB
rgb(126, 148, 119)
HSL
hsl(106, 12%, 52%)
HSB
hsb(106, 20%, 58%)
CMYK
cmyk(15%, 0%, 20%, 42%)
Oklch
oklch(64.1% 0.049 138.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7E1437
14805C

Analogous

80146E
7E1437
802614

Triadic

7E1437
388014
143880

Split-Comp.

7E1437
148026
146E80

Tetradic

7E1437
6E8014
14805C
261480

Contrast Matrix WCAG 2.1 Contrast

7E1437
7E3447
7E5457
7E7467
7E9477
—
1.2
Fail
1.6
Fail
2.2
Fail
3.1
AA Large
1.2
Fail
—
1.3
Fail
1.9
Fail
2.6
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
1.9
Fail
2.2
Fail
1.9
Fail
1.4
Fail
—
1.4
Fail
3.1
AA Large
2.6
Fail
1.9
Fail
1.4
Fail
—
White BG
10.3AAA
8.5AAA
6.4AA
4.6AA
3.3AA Large
Black BG
2.0Fail
2.5Fail
3.3AA Large
4.6AA
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

504F2F
5E5D42
6C6B56
7A7A6A
88887E

Deuteranopia

565E2D
626841
6E7156
7A7B6B
868580

Tritanopia

792826
7A3F3E
7C5656
7D6D6D
7F8485

Achromatopsia

383838
4C4C4C
616161
767676
8A8A8A

Shades & Tints Shades & Tints

#7E1437

Dark
Light

#7E3447

Dark
Light

#7E5457

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7e1437;
  --color-2: #7e3447;
  --color-3: #7e5457;
  --color-4: #7e7467;
  --color-5: #7e9477;
}

SCSS

$color-1: #7e1437;
$color-2: #7e3447;
$color-3: #7e5457;
$color-4: #7e7467;
$color-5: #7e9477;

TAILWIND

colors: {
  'brand-1': '#7e1437',
  'brand-2': '#7e3447',
  'brand-3': '#7e5457',
  'brand-4': '#7e7467',
  'brand-5': '#7e9477',
}

RGB Array

[126, 20, 55], [126, 52, 71], [126, 84, 87], [126, 116, 103], [126, 148, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7E1437, #7E3447, #7E5457, #7E7467, #7E9477 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: #7e1437; --color-2: #7e3447; --color-3: #7e5457; --color-4: #7e7467; --color-5: #7e9477. 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