← Back to Editor

#51718A · #948C47 · #77362A · #3F2A26 · #BBB786

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

#51718A

Slate Blue · SlateGray · Navy Blue

HEX
#51718A
RGB
rgb(81, 113, 138)
HSL
hsl(206, 26%, 43%)
HSB
hsb(206, 41%, 54%)
CMYK
cmyk(41%, 18%, 0%, 46%)
Oklch
oklch(53.4% 0.054 242.5)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#948C47

Autumn Sage · Gray · Honey Gold

HEX
#948C47
RGB
rgb(148, 140, 71)
HSL
hsl(54, 35%, 43%)
HSB
hsb(54, 52%, 58%)
CMYK
cmyk(0%, 5%, 52%, 42%)
Oklch
oklch(63.2% 0.091 102.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#77362A

Crimson · Brown · Wine Red

HEX
#77362A
RGB
rgb(119, 54, 42)
HSL
hsl(9, 48%, 32%)
HSB
hsb(9, 65%, 47%)
CMYK
cmyk(0%, 55%, 65%, 53%)
Oklch
oklch(41.7% 0.094 32.0)

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

#3F2A26

Crimson · DarkSlateGray · Deep Berry

HEX
#3F2A26
RGB
rgb(63, 42, 38)
HSL
hsl(10, 25%, 20%)
HSB
hsb(10, 40%, 25%)
CMYK
cmyk(0%, 33%, 40%, 75%)
Oklch
oklch(30.9% 0.032 31.0)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#BBB786

Fresh Green · Tan · Sunflower

HEX
#BBB786
RGB
rgb(187, 183, 134)
HSL
hsl(55, 28%, 63%)
HSB
hsb(55, 28%, 73%)
CMYK
cmyk(0%, 2%, 28%, 27%)
Oklch
oklch(77.1% 0.066 103.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

51718A
8A6A51

Analogous

518A86
51718A
51558A

Triadic

51718A
8A5171
718A51

Split-Comp.

51718A
8A5155
8A8651

Tetradic

51718A
86518A
8A6A51
558A51

Contrast Matrix WCAG 2.1 Contrast

51718A
948C47
77362A
3F2A26
BBB786
—
1.5
Fail
1.7
Fail
2.6
Fail
2.5
Fail
1.5
Fail
—
2.6
Fail
3.9
AA Large
1.7
Fail
1.7
Fail
2.6
Fail
—
1.5
Fail
4.4
AA Large
2.6
Fail
3.9
AA Large
1.5
Fail
—
6.5
AA
2.5
Fail
1.7
Fail
4.4
AA Large
6.5
AA
—
White BG
5.1AA
3.4AA Large
9.0AAA
13.4AAA
2.1Fail
Black BG
4.1AA Large
6.1AA
2.3Fail
1.6Fail
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5F84
919058
5B5A2D
363627
B9B992

Deuteranopia

5D5B83
91925C
5F642E
373927
BABA95

Tritanopia

537F7E
946568
742F30
3E2828
BB9B9D

Achromatopsia

6A6A6A
878787
484848
303030
B3B3B3

Shades & Tints Shades & Tints

#51718A

Dark
Light

#948C47

Dark
Light

#77362A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #51718a;
  --color-2: #948c47;
  --color-3: #77362a;
  --color-4: #3f2a26;
  --color-5: #bbb786;
}

SCSS

$color-1: #51718a;
$color-2: #948c47;
$color-3: #77362a;
$color-4: #3f2a26;
$color-5: #bbb786;

TAILWIND

colors: {
  'brand-1': '#51718a',
  'brand-2': '#948c47',
  'brand-3': '#77362a',
  'brand-4': '#3f2a26',
  'brand-5': '#bbb786',
}

RGB Array

[81, 113, 138], [148, 140, 71], [119, 54, 42], [63, 42, 38], [187, 183, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #51718A, #948C47, #77362A, #3F2A26, #BBB786 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: #51718a; --color-2: #948c47; --color-3: #77362a; --color-4: #3f2a26; --color-5: #bbb786. 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