What color is #36393E?

A dark cool grey with a slight blue cast, gunmetal. It is a common background value for dark-mode interfaces, dark enough to rest the eye without the harshness of pure black.

Is gunmetal the same as charcoal?

Close but not identical. Charcoal (#36454F) is lighter and noticeably bluer. Gunmetal is darker and closer to neutral, which is why it works better as a background than as a surface.

Why not use pure black for dark mode?

White text on pure black hits 21:1 contrast, which causes halation, text appearing to bleed into the background. It also removes any room for elevation, since a raised surface can only go lighter.

Gunmetal color: hex codes, shades and palettes

Palettes built around gunmetal. Click any swatch to copy its hex code.

Gunmetal is the cool dark grey used as the background of most dark interfaces, #36393E is a widely used value, dark enough to rest the eye but far enough from black to keep depth. It carries a slight blue cast, which is what separates it from a neutral charcoal.

Gunmetal hex, RGB, HSL and OKLCH

#36393E

HEX: #36393E
RGB: rgb(54, 57, 62)
HSL: hsl(217, 7%, 23%)
OKLCH: oklch(34.4% 0.010 260.7)
On white: 11.59:1
On black: 1.81:1

Shades of gunmetal

9 steps from one base color, generated in OKLCH so each step is an equal perceived step rather than an equal numeric one. Click a swatch to copy it.

Gunmetal color values

#36393Ergb(54, 57, 62)

Color spaces of #36393e
RGB	54	57	62
HSL	217°	7%	23%
HSV	217°	13%	24%
CMYK	0.13	0.08	0.00	0.76
XYZ	3.8538	4.0583	5.1368
Yxy	4.0583	0.2953	0.3110
CIE-Lab	23.8632	-0.0522	-3.5375
Hunter Lab	20.1452	-1.1071	-1.0167
OKLCH	34.4%	0.010	260.7°

#36393E is 54 red, 57 green and 62 blue. No single channel dominates it. The nearest of the 216 web safe colors is #333333.

CIE-Lab, XYZ and Yxy are measured against D65, the white point sRGB itself is defined against. Hunter Lab uses the original illuminant C constants, which is what paint and plastics specifications quote, so the two Lab rows are not directly comparable. CMYK is the plain arithmetic conversion: real ink values depend on the press, the paper and the profile.

Base numbers
Base	Red	Green	Blue
Binary	00110110	00111001	00111110
Octal	66	71	76
Decimal	54	57	62
Hex	36	39	3E

#36393e mixed with black

Ten even steps of the classic shade ramp, worked out in RGB, which is how the term has always been defined and how other references list it. The OKLCH scale further down this page answers a different question: it steps by equal perceived amounts, so its values are not the same.

#36393E
#303337
#2B2D31
#25272B
#202225
#1B1C1F
#151618
#101112
#0A0B0C
#050506
#000000

#36393e mixed with white

The tint ramp, by the same rule in the other direction.

#36393E
#4A4C51
#5E6064
#727477
#86888B
#9A9C9E
#AEAFB1
#C2C3C5
#D6D7D8
#EAEBEB
#FFFFFF

Channel shares

Red31.2%
Green32.9%
Blue35.8%

Color schemes

Turned in OKLCH rather than HSL, so every member keeps the lightness and chroma of the original instead of one of them arriving washed out.

Complementary

#36393E
#3B3833

Triadic

#36393E
#3E3737
#363A35

Analogous

#36393E
#39383E
#343A3D

Monochromatic

#000102
#030406
#191C20
#36393E
#56595F
#787C81
#9CA0A6

#36393e on black and on white

The quick brown fox jumps over the lazy dog. 1.81:1

The quick brown fox jumps over the lazy dog. 11.59:1

Body text needs 4.5:1 to meet AA and large text needs 3:1, so a ratio tells you which of the two backgrounds this color can be read on, and at what size.

CSS for #36393e

color: #36393e;
background-color: #36393e;
border: 3px solid #36393e;
box-shadow: 1px 1px 3px 2px #36393e;
text-shadow: 4px 4px 2px rgba(54, 57, 62, 0.8);

/* Perceptually even, and what a modern stylesheet wants */
color: oklch(34.4% 0.010 260.7);

The OKLCH form is the same color stated so that lightening or darkening it moves by an amount the eye agrees with. Every current browser understands it.

Named shades and close relatives

Why dark interfaces avoid pure black

Pure black backgrounds are harsh: white text on #000000 produces the maximum possible contrast, 21:1, which causes halation, the text appears to bleed into the background, particularly for people with astigmatism. Lifting the background a few percent to something like #36393E takes the edge off while keeping the interface dark.

It also restores depth. On pure black a raised surface has nowhere to go except lighter, so elevation stops reading. A dark grey base leaves room to place cards and modals above it and dividers below.

Building on gunmetal

The practical set is three or four steps: a base around #36393E, a slightly lighter surface for cards, a darker step for wells and inputs, and a border that is a lift of the base rather than a grey from somewhere else. The scale below gives all of those from one value.

Keep the blue cast consistent. Mixing a cool grey base with warm grey surfaces is a common and very visible mistake, the surfaces look dirty rather than lighter.

Contrast and readability

Gunmetal on white measures 11.59:1 and on black 1.81:1. WCAG AA asks for 4.5:1 on normal text and 3:1 on large text and UI components, so the higher of those two decides which background it belongs on. In the scale above, 500 is the first to clear 4.5:1 on white, at 5.27:1.

The contrast checker reports every level for a given pair and suggests the nearest passing shade on the same hue. The color picker builds this same scale from any color you paste in.

Gunmetal color questions

What color is #36393E?: A dark cool grey with a slight blue cast, gunmetal. It is a common background value for dark-mode interfaces, dark enough to rest the eye without the harshness of pure black.
Is gunmetal the same as charcoal?: Close but not identical. Charcoal (#36454F) is lighter and noticeably bluer. Gunmetal is darker and closer to neutral, which is why it works better as a background than as a surface.
Why not use pure black for dark mode?: White text on pure black hits 21:1 contrast, which causes halation, text appearing to bleed into the background. It also removes any room for elevation, since a raised surface can only go lighter.

Related colors: charcoal, damson. See every shade on the colors index.

#003B49

#0A3545

#266068

#562B1D

#5D565C

#473C42

#2C2829

#161313

#151C26

#182D47

#243E61

#3D5169

#697177

#474A4C

#24272A

#07080A

#967535

#544A29

#896335

#557EB1

#6C7C59

#5C7D52

#577D64

#30705C

#684127

#533120

#36281F

#2D1404

#4E3336

#6D3432

#2B1009

#53311C

#646D62

#43483F

#21261E

#060805

#160E2E

#301F4F

#4D3565

#66536D

#4B3F4D

#432546

#321430

#1E0918

#002925

#06282C

#012630

#0B5981

#191215

#352A2D

#50464A

#6F6468

#21323C

#253040

#15182A

#26232E

#5F3B91

#BB99D6

#4A6600

#2F7A1D

#121312

#2B2D2B

#414D45

#606B67

#004E4B

#005C61

#0C433A

#4F333E

#28563F

#2C4438

#25352C

#002D1D

#2C1D32

#3B2839

#5C5171

#213625

#6F6A6F

#584952

#353233

#1D1719

#334868

#151A30

#254265

#514F10

#6D424D

#644040

#674A3F

#6D4E33

#523E72

#4D3D52

#5C4953

#6B2F3E

#45487A

#3A3C56

#2D2E3C

#1D1C3B