Blue and White Mixed: What Color Do You Get?
Tinting blue with white walks saturation down while lifting lightness—ideal for backgrounds, cards, and “airy” tech aesthetics. Values below are linear mixes of #0000FF and #FFFFFF.
Color 1
#0000FF
Color 2
#FFFFFF
Mixed Result
HEX: #A3A3E5
RGB: 163, 163, 229
Closest name: Lavender
Blue + White = Lavender
Want more mixes? Explore the full Color Mixing Simulator.
Quick answer
Blue + White = Light blue / periwinkle family (#7F7FFF)
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
Because blue is already dark in luminance, small amounts of white change perceived hue very quickly on screens. Designers often bucket these tints into “sky”, “periwinkle”, and “ice” for tokens. For print, ink limits and paper color shift perceived temperature, so treat hex values as digital-first references and proof physical swatches separately.
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% blue + 20% white | Deep periwinkle | #3333FF | ||
| 60% blue + 40% white | Royal tint | #6666FF | ||
| 50% blue + 50% white | Balanced periwinkle | #7F7FFF | ||
| 40% blue + 60% white | Soft cornflower | #9999FF | ||
| 20% blue + 80% white | Ice lilac | #CCCCFF |
Using this combination in UI and brand design
Light blues excel as app backgrounds, table stripes, and map fills where white feels sterile. Pair with navy or slate for typography, and reserve saturated blues for links and primary buttons. Build systematic lighter steps in the palette generator, then validate every text-on-tint pair with the contrast checker—especially for small captions atop pale blues.
Build harmonious ramps and harmonies from any swatch above in the palette generator, then validate text, links, and buttons with the contrast checker.