← Back to Editor

#3F0435 · #554463 · #B4A68E · #E5DE8A · #77593F

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 LibraryData Visualization

Color Details Color Details

#3F0435

Rose Purple · MidnightBlue · Dark Purple

HEX
#3F0435
RGB
rgb(63, 4, 53)
HSL
hsl(310, 88%, 13%)
HSB
hsb(310, 94%, 25%)
CMYK
cmyk(0%, 94%, 16%, 75%)
Oklch
oklch(25.5% 0.105 336.5)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#554463

Dark Plum · DimGray · Eggplant

HEX
#554463
RGB
rgb(85, 68, 99)
HSL
hsl(273, 19%, 33%)
HSB
hsb(273, 31%, 39%)
CMYK
cmyk(14%, 31%, 0%, 61%)
Oklch
oklch(41.7% 0.055 309.1)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#B4A68E

Ginger · DarkGray · Warm Sun

HEX
#B4A68E
RGB
rgb(180, 166, 142)
HSL
hsl(38, 20%, 63%)
HSB
hsb(38, 21%, 71%)
CMYK
cmyk(0%, 8%, 21%, 29%)
Oklch
oklch(73.1% 0.037 81.2)

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

#E5DE8A

Fresh Green · Khaki · Sunflower

HEX
#E5DE8A
RGB
rgb(229, 222, 138)
HSL
hsl(55, 64%, 72%)
HSB
hsb(55, 40%, 90%)
CMYK
cmyk(0%, 3%, 40%, 10%)
Oklch
oklch(88.8% 0.106 104.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#77593F

Tangerine · DarkOliveGreen · Amber Brown

HEX
#77593F
RGB
rgb(119, 89, 63)
HSL
hsl(28, 31%, 36%)
HSB
hsb(28, 47%, 47%)
CMYK
cmyk(0%, 25%, 47%, 53%)
Oklch
oklch(48.9% 0.055 61.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3F0435
043E0E

Analogous

2B043E
3F0435
3E0417

Triadic

3F0435
353E04
04353E

Split-Comp.

3F0435
173E04
043E2B

Tetradic

3F0435
3E2B04
043E0E
04173E

Contrast Matrix WCAG 2.1 Contrast

3F0435
554463
B4A68E
E5DE8A
77593F
—
1.9
Fail
6.9
AA
11.8
AAA
2.6
Fail
1.9
Fail
—
3.7
AA Large
6.3
AA
1.4
Fail
6.9
AA
3.7
AA Large
—
1.7
Fail
2.7
Fail
11.8
AAA
6.3
AA
1.7
Fail
—
4.6
AA
2.6
Fail
1.4
Fail
2.7
Fail
4.6
AA
—
White BG
16.4AAA
8.8AAA
2.4Fail
1.4Fail
6.4AA
Black BG
1.3Fail
2.4Fail
8.8AAA
15.1AAA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

252529
4E4D5B
AEAE94
E2E29E
6A6A45

Deuteranopia

292D26
4F505A
AFB095
E2E3A3
6C6E47

Tritanopia

3C201E
545654
B39899
E5AEB2
764A4B

Achromatopsia

1B1B1B
4D4D4D
A7A7A7
D7D7D7
5F5F5F

Shades & Tints Shades & Tints

#3F0435

Dark
Light

#554463

Dark
Light

#B4A68E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3f0435;
  --color-2: #554463;
  --color-3: #b4a68e;
  --color-4: #e5de8a;
  --color-5: #77593f;
}

SCSS

$color-1: #3f0435;
$color-2: #554463;
$color-3: #b4a68e;
$color-4: #e5de8a;
$color-5: #77593f;

TAILWIND

colors: {
  'brand-1': '#3f0435',
  'brand-2': '#554463',
  'brand-3': '#b4a68e',
  'brand-4': '#e5de8a',
  'brand-5': '#77593f',
}

RGB Array

[63, 4, 53], [85, 68, 99], [180, 166, 142], [229, 222, 138], [119, 89, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3F0435, #554463, #B4A68E, #E5DE8A, #77593F 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: #3f0435; --color-2: #554463; --color-3: #b4a68e; --color-4: #e5de8a; --color-5: #77593f. 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