Complementary
Two colors from opposite sides of the wheel. They make each other look more vivid, which is why the pairing is used for anything that needs to stand out.
Gray screen
A gray screen is a display filled with a neutral mid-tone gray. It is the most revealing field for checking display uniformity, because unevenness and color casts that hide in white or black become obvious against flat mid gray.
Quick colors, then fill the screen
Or a gradient
Or let it move
#808080rgb(128, 128, 128) · hsl(0, 0%, 50%)
- Checking panel uniformity and mura
- Spotting color casts and tinting
- Neutral reference for photo work
- Low-glare reading backdrop
Gray color codes
Every value for #808080, ready to paste. Click any code to copy it.
| Channel | Decimal | Share | Hex | Octal | Binary |
|---|---|---|---|---|---|
| Red | 128 | 50.2% | 80 | 200 | 10000000 |
| Green | 128 | 50.2% | 80 | 200 | 10000000 |
| Blue | 128 | 50.2% | 80 | 200 | 10000000 |
The nearest web-safe color is #999999, from the 216-color palette browsers agreed on before displays could be trusted with more.
Gray against your project
Shades, tints and tones
Every step is generated from #808080. Click a swatch to copy its hex.
Shades of gray
A shade is the base color with black mixed in. Shades read as deeper and more dramatic, and they are what you reach for when a color needs to recede or carry weight.
Tints of gray
A tint is the base color with white mixed in. Tints turn pastel as they lighten, which makes them useful for backgrounds and for anything that has to sit behind text.
Tones of gray
A tone is the base color with gray mixed in. Tones lose the shout without losing the hue, and they are usually what separates a considered palette from a loud one.
The gray scale
The same color as the 50 to 950 ladder every CSS framework uses, with #808080 at 500. Click a step to copy its hex, or take the whole scale as variables for a design system.
Color schemes built on gray
Harmonies are positions on the color wheel rather than matters of taste, which is why they keep working across very different designs.
Analogous
Three neighbors on the wheel. Nothing competes, so the result reads calm and settled, closer to how color behaves in nature.
Split complementary
The base plus the two colors either side of its complement. It keeps most of the contrast while being much easier to balance.
Triadic
Three colors spaced evenly around the wheel. Strong and lively, and usually best with one dominant color and two accents.
Tetradic
Two complementary pairs, forming a rectangle on the wheel. The richest scheme available, and the hardest to keep from shouting.
Monochromatic
One hue at different lightness levels. Effortlessly cohesive, and the safest way to build a palette around a brand color.
Colors close to #808080
Near neighbors, for when this color is almost right. Each one shifts hue, saturation or lightness by a small step.
Gray color palettes
Five-color palettes built around #808080, each following a different scheme. Click any swatch to copy it, or open the generator to build your own.
Analogous
Complementary
Triadic
Monochromatic
Open the palette generator to lock the colors you like and regenerate the rest.
Contrast and readability
Whether gray works as text, and what to put on top of it when it is the background. Ratios follow WCAG 2.1, where 4.5 is the bar for body text and 3 for large text.
Gray text on white background
3.95:1 · Large text onlyLarge text at 24 pixels
Body text at 16 pixels. A flat field of color removes every variable, which is what makes it useful for judging a display.
- Body AA
- Body AAA
- Large AA
- Large AAA
Gray text on black background
5.32:1 · GoodLarge text at 24 pixels
Body text at 16 pixels. A flat field of color removes every variable, which is what makes it useful for judging a display.
- Body AA
- Body AAA
- Large AA
- Large AAA
Used the other way round, #808080 as a background takes #000000 text. That is the higher-contrast of the two, and it is what the tool picks automatically for any chrome sitting on your color.
Gray reads better on a black background of the two. Contrast is a property of the pair, not of one color, so a color that fails here can still be perfectly usable against a different partner.
About gray
What this color does, where it works, and what it reveals about the screen showing it.
What gray is
All three channels at equal strength, sitting halfway between the extremes. That middle position is exactly where a panel has the most freedom to be inconsistent, which is what makes gray the most honest test field there is.
The hex code
Gray is #808080, which is 80 in hexadecimal in all three channels, or 128 in decimal. That is the midpoint of the 0 to 255 range, but it is not the midpoint of what you see. Perceived lightness does not track the byte value, so #808080 reads noticeably darker than halfway between black and white. CSS accepts both gray and gray as keywords for it, which is one of the few places the language spells anything twice.
The darkgray problem
CSS darkgray is #A9A9A9 and CSS gray is #808080, which makes darkgray the lighter of the two. The names came from two different historical palettes that were merged without being reconciled, and the web has been stuck with the contradiction ever since. If a shade of gray is behaving unexpectedly in a stylesheet, this is usually why.
Where it works
Judging a display, and working on images. Photo and video editors have used mid gray as a working background for decades, and print proofing is done against gray surrounds for the same reason.
How it reads
Gray is the only color that does not argue. It reads as neutral, restrained and slightly corporate, and it recedes so completely that whatever sits on it takes all the attention. In a dim room it is far kinder to look at than white.
On a display
White pushes every subpixel to maximum and black switches them off, and both extremes flatten out what you are looking for. Mid gray reveals mura, the industry term for uneven brightness, as faint clouds, streaks or patches.
Color casts
A neutral gray should look neutral everywhere. If one corner leans warm and the opposite leans cool, or the edges tint pink while the middle stays clean, that is a color uniformity problem. It is extremely common on large LCDs and nearly invisible on any other content.
Why editors work on gray
Your judgement of color and brightness is heavily influenced by what surrounds it. The same photograph looks darker and more saturated on white than on black. Neutral gray biases you least, which is why editing applications default to it.
List of gray shades
Every named gray in the library, 4 of them CSS keywords whose values are normative rather than conventional. Codes are rounded to whole numbers for HSL.
| Swatch | Name | Hex | RGB | HSL |
|---|---|---|---|---|
| Silver is a CSS keyword | #C0C0C0 | 192, 192, 192 | 0, 0%, 75% | |
| Charcoal | #36454F | 54, 69, 79 | 204, 19%, 26% | |
| Slate gray is a CSS keyword | #708090 | 112, 128, 144 | 210, 13%, 50% | |
| Platinum | #E5E4E2 | 229, 228, 226 | 40, 5%, 89% | |
| Stone | #928E85 | 146, 142, 133 | 42, 6%, 55% | |
| Pearl | #EAE0C8 | 234, 224, 200 | 42, 45%, 85% | |
| Graphite | #4B4E53 | 75, 78, 83 | 217, 5%, 31% | |
| Gainsboro is a CSS keyword | #DCDCDC | 220, 220, 220 | 0, 0%, 86% | |
| Dim gray is a CSS keyword | #696969 | 105, 105, 105 | 0, 0%, 41% |
Common questions
- What is the hex code for gray?
- The hex code for gray is
- What is gray in RGB?
- Gray is 128, 128, 128 in RGB. The rule for any neutral gray is that the three channels hold the same value, and the value sets how light it is. If they drift apart even slightly, the color picks up a tint, which is exactly what a uniformity test on a gray screen is looking for.
- What is the hex code for dark gray?
- CSS darkgray is
- Why is gray better than white for checking a monitor?
- White drives every subpixel to maximum, which hides small differences between them. Mid gray sits where a panel has the most room to be uneven, so blotches, tinted corners and cloudy patches show up far more clearly.
- What is mura?
- Mura is the display industry term for uneven brightness or color across a panel, from the Japanese word for unevenness. It looks like faint clouds, streaks or patches. Mid gray is the standard field for spotting it because the effect is most visible in the mid tones.
- Why does one side of my screen look warmer than the other?
- That is a uniformity problem in the backlight or the panel itself, and mid gray is exactly the test that reveals it. Mild variation is common and normal. A strong, obvious split between warm and cool halves is a defect.
- Is gray easier on the eyes than white?
- Usually yes, particularly in a dim room. A full-brightness white screen in a dark space is a large glare source. Mid gray gives you a usable, even background at a fraction of the light output.
Share