← Back to Editor

#3B3647 · #8B756B · #A4CFA7 · #ADA987 · #695060

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

Color Details Color Details

#3B3647

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3B3647
RGB
rgb(59, 54, 71)
HSL
hsl(258, 14%, 25%)
HSB
hsb(258, 24%, 28%)
CMYK
cmyk(17%, 24%, 0%, 72%)
Oklch
oklch(34.5% 0.030 298.3)

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

#8B756B

Tangerine · Gray · Amber Brown

HEX
#8B756B
RGB
rgb(139, 117, 107)
HSL
hsl(19, 13%, 48%)
HSB
hsb(19, 23%, 55%)
CMYK
cmyk(0%, 16%, 23%, 45%)
Oklch
oklch(58.0% 0.032 45.9)

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

#A4CFA7

Celadon · DarkSeaGreen · Apple Green

HEX
#A4CFA7
RGB
rgb(164, 207, 167)
HSL
hsl(124, 31%, 73%)
HSB
hsb(124, 21%, 81%)
CMYK
cmyk(21%, 0%, 19%, 19%)
Oklch
oklch(81.3% 0.072 146.7)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#ADA987

Autumn Sage · DarkGray · Sunflower

HEX
#ADA987
RGB
rgb(173, 169, 135)
HSL
hsl(54, 19%, 60%)
HSB
hsb(54, 22%, 68%)
CMYK
cmyk(0%, 2%, 22%, 32%)
Oklch
oklch(72.9% 0.047 101.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#695060

Rose Purple · DimGray · Camellia

HEX
#695060
RGB
rgb(105, 80, 96)
HSL
hsl(322, 14%, 36%)
HSB
hsb(322, 24%, 41%)
CMYK
cmyk(0%, 24%, 9%, 59%)
Oklch
oklch(46.3% 0.041 340.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B3647
434937

Analogous

373A49
3B3647
453749

Triadic

3B3647
493C37
37493C

Split-Comp.

3B3647
494537
3A4937

Tetradic

3B3647
49373A
434937
374945

Contrast Matrix WCAG 2.1 Contrast

3B3647
8B756B
A4CFA7
ADA987
695060
—
2.7
Fail
6.7
AA
4.9
AA
1.6
Fail
2.7
Fail
—
2.5
Fail
1.8
Fail
1.7
Fail
6.7
AA
2.5
Fail
—
1.4
Fail
4.1
AA Large
4.9
AA
1.8
Fail
1.4
Fail
—
3.0
AA Large
1.6
Fail
1.7
Fail
4.1
AA Large
3.0
AA Large
—
White BG
11.6AAA
4.3AA Large
1.7Fail
2.4Fail
7.2AAA
Black BG
1.8Fail
4.9AA
12.1AAA
8.8AAA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

393943
81816D
B7B7B1
ABAB8F
5E5E5C

Deuteranopia

393A42
83846E
B4B1B3
ACAC91
60625B

Tritanopia

3B403F
8A6F70
A6B8BA
AD9697
685958

Achromatopsia

393939
7A7A7A
BEBEBE
A6A6A6
595959

Shades & Tints Shades & Tints

#3B3647

Dark
Light

#8B756B

Dark
Light

#A4CFA7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b3647;
  --color-2: #8b756b;
  --color-3: #a4cfa7;
  --color-4: #ada987;
  --color-5: #695060;
}

SCSS

$color-1: #3b3647;
$color-2: #8b756b;
$color-3: #a4cfa7;
$color-4: #ada987;
$color-5: #695060;

TAILWIND

colors: {
  'brand-1': '#3b3647',
  'brand-2': '#8b756b',
  'brand-3': '#a4cfa7',
  'brand-4': '#ada987',
  'brand-5': '#695060',
}

RGB Array

[59, 54, 71], [139, 117, 107], [164, 207, 167], [173, 169, 135], [105, 80, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B3647, #8B756B, #A4CFA7, #ADA987, #695060 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #3b3647; --color-2: #8b756b; --color-3: #a4cfa7; --color-4: #ada987; --color-5: #695060. 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. Restrained colors convey professionalism and trust. 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