← Back to Editor

#4E3432 · #4A8984 · #BDA54C · #DC674E · #D03B67

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

#4E3432

Crimson · DarkSlateGray · Wine Red

HEX
#4E3432
RGB
rgb(78, 52, 50)
HSL
hsl(4, 22%, 25%)
HSB
hsb(4, 36%, 31%)
CMYK
cmyk(0%, 33%, 36%, 69%)
Oklch
oklch(35.5% 0.038 24.1)

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

#4A8984

Mineral Blue · CadetBlue · Mint Ice

HEX
#4A8984
RGB
rgb(74, 137, 132)
HSL
hsl(175, 30%, 41%)
HSB
hsb(175, 46%, 54%)
CMYK
cmyk(46%, 0%, 4%, 46%)
Oklch
oklch(58.6% 0.066 188.9)

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

#BDA54C

Ginger · GoldenRod · Sunflower

HEX
#BDA54C
RGB
rgb(189, 165, 76)
HSL
hsl(47, 46%, 52%)
HSB
hsb(47, 60%, 74%)
CMYK
cmyk(0%, 13%, 60%, 26%)
Oklch
oklch(72.5% 0.112 94.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#DC674E

Vermilion · Tomato · Passion Red

HEX
#DC674E
RGB
rgb(220, 103, 78)
HSL
hsl(11, 67%, 58%)
HSB
hsb(11, 65%, 86%)
CMYK
cmyk(0%, 53%, 65%, 14%)
Oklch
oklch(65.1% 0.152 33.5)

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

#D03B67

Dark Violet · MediumVioletRed · Rose Pink

HEX
#D03B67
RGB
rgb(208, 59, 103)
HSL
hsl(342, 61%, 52%)
HSB
hsb(342, 72%, 82%)
CMYK
cmyk(0%, 72%, 50%, 18%)
Oklch
oklch(58.4% 0.187 7.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4E3432
324C4E

Analogous

4E323E
4E3432
4E4232

Triadic

4E3432
324E34
34324E

Split-Comp.

4E3432
324E42
323E4E

Tetradic

4E3432
3E4E32
324C4E
42324E

Contrast Matrix WCAG 2.1 Contrast

4E3432
4A8984
BDA54C
DC674E
D03B67
—
2.8
Fail
4.6
AA
3.3
AA Large
2.4
Fail
2.8
Fail
—
1.7
Fail
1.2
Fail
1.2
Fail
4.6
AA
1.7
Fail
—
1.4
Fail
1.9
Fail
3.3
AA Large
1.2
Fail
1.4
Fail
—
1.4
Fail
2.4
Fail
1.2
Fail
1.9
Fail
1.4
Fail
—
White BG
11.3AAA
4.0AA Large
2.4Fail
3.4AA Large
4.7AA
Black BG
1.9Fail
5.2AA
8.7AAA
6.1AA
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

434332
656685
B3B262
A9A854
8F8E5C

Deuteranopia

444633
625D86
B4B667
B0B956
98A35A

Tritanopia

4D3333
4D8686
BC7376
D6595A
C95452

Achromatopsia

3C3C3C
767676
A2A2A2
878787
6D6D6D

Shades & Tints Shades & Tints

#4E3432

Dark
Light

#4A8984

Dark
Light

#BDA54C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4e3432;
  --color-2: #4a8984;
  --color-3: #bda54c;
  --color-4: #dc674e;
  --color-5: #d03b67;
}

SCSS

$color-1: #4e3432;
$color-2: #4a8984;
$color-3: #bda54c;
$color-4: #dc674e;
$color-5: #d03b67;

TAILWIND

colors: {
  'brand-1': '#4e3432',
  'brand-2': '#4a8984',
  'brand-3': '#bda54c',
  'brand-4': '#dc674e',
  'brand-5': '#d03b67',
}

RGB Array

[78, 52, 50], [74, 137, 132], [189, 165, 76], [220, 103, 78], [208, 59, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4E3432, #4A8984, #BDA54C, #DC674E, #D03B67 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: #4e3432; --color-2: #4a8984; --color-3: #bda54c; --color-4: #dc674e; --color-5: #d03b67. 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