← Back to Editor

#61806D · #968E7F · #B47108 · #D93D11 · #4F4F56

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

#61806D

Celadon · DimGray · Olive Green

HEX
#61806D
RGB
rgb(97, 128, 109)
HSL
hsl(143, 14%, 44%)
HSB
hsb(143, 24%, 50%)
CMYK
cmyk(24%, 0%, 15%, 50%)
Oklch
oklch(57.0% 0.046 157.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#968E7F

Ginger · Gray · Warm Sun

HEX
#968E7F
RGB
rgb(150, 142, 127)
HSL
hsl(39, 10%, 54%)
HSB
hsb(39, 15%, 59%)
CMYK
cmyk(0%, 5%, 15%, 41%)
Oklch
oklch(64.9% 0.024 83.2)

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

#B47108

Ochre · DarkGoldenRod · Amber Brown

HEX
#B47108
RGB
rgb(180, 113, 8)
HSL
hsl(37, 91%, 37%)
HSB
hsb(37, 96%, 71%)
CMYK
cmyk(0%, 37%, 96%, 29%)
Oklch
oklch(60.7% 0.131 68.6)

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

#D93D11

Vermilion · OrangeRed · Passion Red

HEX
#D93D11
RGB
rgb(217, 61, 17)
HSL
hsl(13, 85%, 46%)
HSB
hsb(13, 92%, 85%)
CMYK
cmyk(0%, 72%, 92%, 15%)
Oklch
oklch(58.8% 0.199 34.8)

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

#4F4F56

Ink Gray · DarkSlateGray · Charcoal

HEX
#4F4F56
RGB
rgb(79, 79, 86)
HSL
hsl(240, 4%, 32%)
HSB
hsb(240, 8%, 34%)
CMYK
cmyk(8%, 8%, 0%, 66%)
Oklch
oklch(43.0% 0.011 285.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

61806D
806074

Analogous

648060
61806D
60807C

Triadic

61806D
6D6080
806D60

Split-Comp.

61806D
7C6080
806064

Tetradic

61806D
606480
806074
807C60

Contrast Matrix WCAG 2.1 Contrast

61806D
968E7F
B47108
D93D11
4F4F56
—
1.3
Fail
1.1
Fail
1.0
Fail
1.9
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
2.5
Fail
1.1
Fail
1.2
Fail
—
1.1
Fail
2.1
Fail
1.0
Fail
1.4
Fail
1.1
Fail
—
1.8
Fail
1.9
Fail
2.5
Fail
2.1
Fail
1.8
Fail
—
White BG
4.4AA Large
3.2AA Large
4.0AA Large
4.5AA
8.1AAA
Black BG
4.8AA
6.5AA
5.3AA
4.6AA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6F72
939283
979621
95941C
4F4F54

Deuteranopia

6D6A73
939484
9BA028
9FAA1E
4F4F54

Tritanopia

637576
968586
B1353A
D12426
4F5353

Achromatopsia

757575
8F8F8F
797979
676767
505050

Shades & Tints Shades & Tints

#61806D

Dark
Light

#968E7F

Dark
Light

#B47108

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #61806d;
  --color-2: #968e7f;
  --color-3: #b47108;
  --color-4: #d93d11;
  --color-5: #4f4f56;
}

SCSS

$color-1: #61806d;
$color-2: #968e7f;
$color-3: #b47108;
$color-4: #d93d11;
$color-5: #4f4f56;

TAILWIND

colors: {
  'brand-1': '#61806d',
  'brand-2': '#968e7f',
  'brand-3': '#b47108',
  'brand-4': '#d93d11',
  'brand-5': '#4f4f56',
}

RGB Array

[97, 128, 109], [150, 142, 127], [180, 113, 8], [217, 61, 17], [79, 79, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #61806D, #968E7F, #B47108, #D93D11, #4F4F56 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: #61806d; --color-2: #968e7f; --color-3: #b47108; --color-4: #d93d11; --color-5: #4f4f56. 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