← Back to Editor

#3C3A4F · #B7755F · #E1AF6C · #E1C470 · #6E7470

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

#3C3A4F

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3C3A4F
RGB
rgb(60, 58, 79)
HSL
hsl(246, 15%, 27%)
HSB
hsb(246, 27%, 31%)
CMYK
cmyk(24%, 27%, 0%, 69%)
Oklch
oklch(35.9% 0.036 288.8)

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

#B7755F

Tangerine · Gray · Warm Sun

HEX
#B7755F
RGB
rgb(183, 117, 95)
HSL
hsl(15, 38%, 55%)
HSB
hsb(15, 48%, 72%)
CMYK
cmyk(0%, 36%, 48%, 28%)
Oklch
oklch(62.7% 0.090 39.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#E1AF6C

Ginger · SandyBrown · Warm Sun

HEX
#E1AF6C
RGB
rgb(225, 175, 108)
HSL
hsl(34, 66%, 65%)
HSB
hsb(34, 52%, 88%)
CMYK
cmyk(0%, 22%, 52%, 12%)
Oklch
oklch(78.5% 0.103 73.5)

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

#E1C470

Ginger · BurlyWood · Sunflower

HEX
#E1C470
RGB
rgb(225, 196, 112)
HSL
hsl(45, 65%, 66%)
HSB
hsb(45, 50%, 88%)
CMYK
cmyk(0%, 13%, 50%, 12%)
Oklch
oklch(82.7% 0.109 90.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#6E7470

Ink Gray · DimGray · Warm Gray

HEX
#6E7470
RGB
rgb(110, 116, 112)
HSL
hsl(140, 3%, 44%)
HSB
hsb(140, 5%, 45%)
CMYK
cmyk(5%, 0%, 3%, 55%)
Oklch
oklch(55.3% 0.009 156.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C3A4F
4D4F3B

Analogous

3B434F
3C3A4F
473B4F

Triadic

3C3A4F
4F3D3B
3B4F3D

Split-Comp.

3C3A4F
4F473B
434F3B

Tetradic

3C3A4F
4F3B43
4D4F3B
3B4F47

Contrast Matrix WCAG 2.1 Contrast

3C3A4F
B7755F
E1AF6C
E1C470
6E7470
—
3.0
Fail
5.5
AA
6.5
AA
2.3
Fail
3.0
Fail
—
1.8
Fail
2.2
Fail
1.3
Fail
5.5
AA
1.8
Fail
—
1.2
Fail
2.4
Fail
6.5
AA
2.2
Fail
1.2
Fail
—
2.8
Fail
2.3
Fail
1.3
Fail
2.4
Fail
2.8
Fail
—
White BG
11.0AAA
3.7AA Large
2.0Fail
1.7Fail
4.8AA
Black BG
1.9Fail
5.7AA
10.6AAA
12.3AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B4A
9A9A64
CBCB7C
D4D484
717171

Deuteranopia

3B3B49
9EA366
CED280
D6D889
707071

Tritanopia

3C4645
B46969
DF898C
E09498
6E7272

Achromatopsia

3D3D3D
868686
B6B6B6
C3C3C3
727272

Shades & Tints Shades & Tints

#3C3A4F

Dark
Light

#B7755F

Dark
Light

#E1AF6C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c3a4f;
  --color-2: #b7755f;
  --color-3: #e1af6c;
  --color-4: #e1c470;
  --color-5: #6e7470;
}

SCSS

$color-1: #3c3a4f;
$color-2: #b7755f;
$color-3: #e1af6c;
$color-4: #e1c470;
$color-5: #6e7470;

TAILWIND

colors: {
  'brand-1': '#3c3a4f',
  'brand-2': '#b7755f',
  'brand-3': '#e1af6c',
  'brand-4': '#e1c470',
  'brand-5': '#6e7470',
}

RGB Array

[60, 58, 79], [183, 117, 95], [225, 175, 108], [225, 196, 112], [110, 116, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C3A4F, #B7755F, #E1AF6C, #E1C470, #6E7470 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: #3c3a4f; --color-2: #b7755f; --color-3: #e1af6c; --color-4: #e1c470; --color-5: #6e7470. 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