Gray has no hue, only lightness. Black and white make it directly. Two opposite colors can also cancel into a grayish mix, which is why complementary mixes tend to look muddy.
Because gray has no hue, the color wheel rules do not apply to it. This page shows contrast figures instead.
CSS gray is the mid-point of each screen channel. Oddly, CSS darkgray is lighter than gray.
In paint
In our paint model, white with black gives a neutral gray. Opposite pairs such as red with green come out brownish or olive instead of a clean gray.
Closest two-paint mixes
- += 40% White + 60% Black #878787 · ΔE 2.6 from gray
- += 25% Red + 75% Cyan #427394 · ΔE 17.5 from gray
- += 65% Green + 35% Magenta #4E544A · ΔE 18.9 from gray
- += 35% Yellow + 65% Violet #91664A · ΔE 19.1 from gray
- += 65% Cyan + 35% Black #19859D · ΔE 19.9 from gray
Equal parts
- += White + Black #A4A4A3 · ΔE 12.0 from gray
- += Orange + Blue #5D7639 · ΔE 22.4 from gray
- += Red + Green #5E3F3B · ΔE 25.6 from gray
ΔE is the CIEDE2000 color difference between the mix and gray. Zero means the same color; the smaller the number, the closer the mix.
In light
A screen makes gray with all three lamps at the same level. Higher levels give lighter grays.
The three lamps at these levels give #818181. Levels are the amount of light each lamp gives out, which is not the same scale as the 0–255 numbers in a color code; the method page shows the conversion.
Contrast
The contrast table shows how readable each color is against this gray, using the formula from the web accessibility guidelines.
| Paint | Contrast with gray |
|---|---|
| Red | 1.35 : 1 |
| Yellow | 2.78 : 1 |
| Blue | 2.34 : 1 |
| Orange | 1.61 : 1 |
| Green | 1.17 : 1 |
| Violet | 2.49 : 1 |
| Magenta | 1.43 : 1 |
| Cyan | 1.19 : 1 |
| White | 3.61 : 1 |
| Black | 4.41 : 1 |
Gray mixed with each paint
Start from gray (#808080) and add one of our ten stand-in paints. Shares are by amount, in our paint model.
| Add | 75% gray + 25% | 50% gray + 50% | 25% gray + 75% |
|---|---|---|---|
| Red | #8A656F | #9B3D4B | #BB2934 |
| Yellow | #8A8D5D | #B2B03E | #E0CF28 |
| Blue | #6F7B81 | #426688 | #234A96 |
| Orange | #878360 | #A8893A | #D78C26 |
| Green | #6F8173 | #4A8455 | #338544 |
| Violet | #7F7781 | #755882 | #623783 |
| Magenta | #886581 | #983B7F | #B3227B |
| Cyan | #588485 | #308D9A | #0F96BB |
| White | #8E8E8E | #B9B9B8 | #E1E1DF |
| Black | #7A7A7A | #5E5E5E | #313131 |
Named grays in CSS
| CSS name | Swatch | Code | ΔE from this page's gray |
|---|---|---|---|
| gray | #808080 | 0.0 | |
| darkgray | #A9A9A9 | 13.5 | |
| dimgray | #696969 | 9.1 |
Paint results come from a pigment model and our ten stand-in paints, not from real tubes, which vary by brand and pigment. Try any pair in the color mixer, or read how each swatch is worked out.