← Back to Editor

#7B8B82 · #65736B · #4F5953 · #39403C · #302424

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#7B8B82

Ash · Gray · Warm Gray

HEX
#7B8B82
RGB
rgb(123, 139, 130)
HSL
hsl(146, 6%, 51%)
HSB
hsb(146, 12%, 55%)
CMYK
cmyk(12%, 0%, 6%, 45%)
Oklch
oklch(62.1% 0.023 161.1)

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

#65736B

Ink Gray · DimGray · Warm Gray

HEX
#65736B
RGB
rgb(101, 115, 107)
HSL
hsl(146, 6%, 42%)
HSB
hsb(146, 12%, 45%)
CMYK
cmyk(12%, 0%, 7%, 55%)
Oklch
oklch(54.1% 0.021 160.6)

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

#4F5953

Ink Gray · DarkSlateGray · Charcoal

HEX
#4F5953
RGB
rgb(79, 89, 83)
HSL
hsl(144, 6%, 33%)
HSB
hsb(144, 11%, 35%)
CMYK
cmyk(11%, 0%, 7%, 65%)
Oklch
oklch(45.3% 0.016 159.4)

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

#39403C

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#39403C
RGB
rgb(57, 64, 60)
HSL
hsl(146, 6%, 24%)
HSB
hsb(146, 11%, 25%)
CMYK
cmyk(11%, 0%, 6%, 75%)
Oklch
oklch(36.4% 0.012 160.8)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#302424

Crimson · DarkSlateGray · Deep Berry

HEX
#302424
RGB
rgb(48, 36, 36)
HSL
hsl(0, 14%, 16%)
HSB
hsb(0, 25%, 19%)
CMYK
cmyk(0%, 25%, 25%, 81%)
Oklch
oklch(27.4% 0.018 18.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B8B82
8A7B83

Analogous

7C8A7B
7B8B82
7B8A89

Triadic

7B8B82
817B8A
8A817B

Split-Comp.

7B8B82
897B8A
8A7B7C

Tetradic

7B8B82
7B7C8A
8A7B83
8A897B

Contrast Matrix WCAG 2.1 Contrast

7B8B82
65736B
4F5953
39403C
302424
—
1.4
Fail
2.0
Fail
3.0
Fail
4.2
AA Large
1.4
Fail
—
1.5
Fail
2.1
Fail
3.0
AA Large
2.0
Fail
1.5
Fail
—
1.5
Fail
2.1
Fail
3.0
Fail
2.1
Fail
1.5
Fail
—
1.4
Fail
4.2
AA Large
3.0
AA Large
2.1
Fail
1.4
Fail
—
White BG
3.6AA Large
5.0AA
7.3AAA
10.6AAA
15.0AAA
Black BG
5.9AA
4.2AA Large
2.9Fail
2.0Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

828284
6B6B6D
535354
3C3C3D
2B2B24

Deuteranopia

818085
6A696D
535255
3C3B3D
2C2C24

Tritanopia

7C8686
666E6F
505656
393E3E
2F2424

Achromatopsia

858585
6E6E6E
555555
3D3D3D
282828

Shades & Tints Shades & Tints

#7B8B82

Dark
Light

#65736B

Dark
Light

#4F5953

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b8b82;
  --color-2: #65736b;
  --color-3: #4f5953;
  --color-4: #39403c;
  --color-5: #302424;
}

SCSS

$color-1: #7b8b82;
$color-2: #65736b;
$color-3: #4f5953;
$color-4: #39403c;
$color-5: #302424;

TAILWIND

colors: {
  'brand-1': '#7b8b82',
  'brand-2': '#65736b',
  'brand-3': '#4f5953',
  'brand-4': '#39403c',
  'brand-5': '#302424',
}

RGB Array

[123, 139, 130], [101, 115, 107], [79, 89, 83], [57, 64, 60], [48, 36, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7B8B82, #65736B, #4F5953, #39403C, #302424 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. 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: #7b8b82; --color-2: #65736b; --color-3: #4f5953; --color-4: #39403c; --color-5: #302424. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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