What color do gray and white make?
Mixed as paint, gray and white make a light gray. Change the ratio, switch to light or CSS mixing, and copy the result.
Gray and white make light gray
Mixed as paint, gray and white make a light gray (#BFBFBF). As light on a screen, they make a white (#FFFFFF), and blended in CSS with OKLCH they give a light gray (#C3C3C3).
light gray
#BFBFBF
As paint
Pigments absorb light, so every color you add takes some away. This is what you get on a palette or canvas.
white
#FFFFFF
As light
Colored lights add up, as on a screen or stage. Mixes get brighter, not darker.
light gray
#C3C3C3
In CSS (OKLCH)
What color-mix(in oklch, …) returns for an even mix in the browser.
Mixing gray and white in different ratios
The ratio decides which color leads. These are paint mixes, measured in equal-sized parts.
3:1 · #A8A8A8
3 gray : 1 white, gray
2:1 · #B0B0B0
2 gray : 1 white, gray
1:1 · #BFBFBF
1 gray : 1 white, light gray
1:2 · #CDCDCD
1 gray : 2 white, light gray
1:3 · #D5D5D5
1 gray : 3 white, light gray
Making the mix lighter or darker
Add white for tints and black for shades. Each step adds 20% more of it to the even gray and white mix.
With white
#C9C9C9
20%
#D2D2D2
40%
#DCDCDC
60%
#E7E7E7
80%
With black
#A9A9A9
20%
#939393
40%
#7A7A7A
60%
#595959
80%
Need a full scale for a UI instead? The shade generator builds evenly spaced, accessible shades from any color.
More mixes with gray
More mixes with white
Mixing gray and white FAQ
Mixed as paint, gray and white make a light gray (#BFBFBF). As light on a screen, they make a white (#FFFFFF), and blended in CSS with OKLCH they give a light gray (#C3C3C3).
Light adds up instead of absorbing, so gray and white light make a white (#FFFFFF). That is why screens can show bright yellows from red and green light, while the same paints would turn brown.
Change the ratio. Three parts gray to one part white gives a gray (#A8A8A8), while one part gray to three parts white gives a light gray (#D5D5D5). To lighten the result add white, and to darken it add a little black.
Use color-mix(in oklch, #8A8A8A 50%, #FFFFFF 50%), which gives #C3C3C3. OKLCH keeps the middle of the mix bright, while mixing in sRGB tends to turn it gray.