What Color Does Black and White Make?
Mixing black (#000000) and white (#FFFFFF) only changes value—you stay on the neutral axis ideal for typography, borders, and dark mode surfaces.
Color 1
#000000
Color 2
#FFFFFF
Mixed Result
HEX: #ADA3A0
RGB: 173, 163, 160
Closest name: Gray
Black + White = Gray
Want more mixes? Explore the full Color Mixing Simulator.
Quick answer
Black + White = Gray (#808080)
Swatch shows the headline mix color—compare with the ratio table and adjust live in the simulator.
Why this mix looks the way it does
Unlike chromatic mixes, achromatic blending is mathematically simple in RGB: equal parts yield mid gray. Designers use these steps to scaffold neutral ramps (surface-0 through surface-900) before committing brand color. In print, ink density and dot gain shift perceived gray, so treat screen hexes as digital-first references.
Five mix ratios (hex previews)
Ratios describe how much of each primary contributes to the blend; hex values are reference stops for design tokens and mood boards.
| Mix | Name | Swatch | Hex | Copy |
|---|---|---|---|---|
| 80% black + 20% white | Charcoal | #333333 | ||
| 60% black + 40% white | Dim gray | #666666 | ||
| 50% black + 50% white | Medium gray | #808080 | ||
| 40% black + 60% white | Silver | #999999 | ||
| 20% black + 80% white | Light gray | #CCCCCC |
Using this combination in UI and brand design
Neutral ramps anchor typography, dividers, skeleton loaders, and elevation in both light and dark themes. Keep at least four distinguishable steps between background and border tokens. Generate extended cool or warm grays from these anchors in the palette generator, then prove legibility with the contrast checker on real content samples.
Build harmonious ramps and harmonies from any swatch above in the palette generator, then validate text, links, and buttons with the contrast checker.