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.
Blue screen
A blue screen is a display filled edge to edge with blue. It is used to test the blue subpixels of a monitor, to check panel uniformity, and as an ambient or accent light. It is unrelated to the Windows stop error also known as a blue screen of death.
Quick colors, then fill the screen
Or a gradient
Or let it move
#0A84FFrgb(10, 132, 255) · hsl(210, 100%, 52%)
- Testing blue subpixels on a display
- Checking panel uniformity and banding
- Ambient and accent lighting
- Stuck pixel detection
Blue color codes
Every value for #0A84FF, ready to paste. Click any code to copy it.
| Channel | Decimal | Share | Hex | Octal | Binary |
|---|---|---|---|---|---|
| Red | 10 | 3.92% | 0A | 12 | 00001010 |
| Green | 132 | 51.76% | 84 | 204 | 10000100 |
| Blue | 255 | 100% | FF | 377 | 11111111 |
The nearest web-safe color is #0099FF, from the 216-color palette browsers agreed on before displays could be trusted with more.
Shades, tints and tones
Every step is generated from #0A84FF. Click a swatch to copy its hex.
Shades of blue
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 blue
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 blue
A tone is the base color with grey mixed in. Tones lose the shout without losing the hue, and they are usually what separates a considered palette from a loud one.
The blue scale
The same color as the 50 to 950 ladder every CSS framework uses, with #0A84FF at 500. Click a step to copy its hex, or take the whole scale as variables for a design system.
Color schemes built on blue
Harmonies are positions on the color wheel rather than matters of taste, which is why they keep working across very different designs.
Analogous
Three neighbours on the wheel. Nothing competes, so the result reads calm and settled, closer to how colour 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 #0A84FF
Near neighbours, for when this color is almost right. Each one shifts hue, saturation or lightness by a small step.
Blue color palettes
Five-color palettes built around #0A84FF, 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 blue 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.
Blue text on white background
3.65: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
Blue text on black background
5.76: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, #0A84FF 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.
Blue 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 blue
What this color does, where it works, and what it reveals about the screen showing it.
What blue is
The shortest wavelength of the three primaries, and the one human vision resolves the least detail in. Displays and video codecs both economise there, which makes blue the channel where shortcuts show up first.
Not the error screen
If a computer showed you a blue screen without being asked, you want a Windows stop error page. That kind always carries a message and a stop code. This page is a blank blue you asked for.
How it reads
Blue is the most universally liked color and the least appetising one. It reads as calm, trustworthy and cold, which is why it dominates banking, medicine and software, and why almost no food is sold in it.
On a display
The most demanding primary to render well. A large flat blue field is where banding, blotchy uniformity and subtle panel texture surface first. If a display looks clean on blue, it will usually look clean on everything.
As a light
A dimmed blue panel behind a desk or television works well as bias lighting, the soft glow that reduces the contrast between a bright screen and a dark room. It genuinely does reduce eye strain over a long evening.
Blue light and sleep
Blue wavelengths suppress melatonin more strongly than warmer light, which is the entire basis of night-shift modes. Bright blue late at night works against your sleep. Keep blue for daytime and use warm white in the evening.
Common questions
- Is this a blue screen of death?
- No. This is a blank blue fill that you control. The blue screen of death is a Windows stop error, shown when the operating system hits a fault it cannot recover from, and it always carries an error code and text. If your computer produced a blue screen on its own, this page is not what you are looking for.
- Why test with blue specifically?
- Blue drives only the blue subpixel of every pixel, exposing faults that white would mask. Blue is also the channel where cheap panels and heavy video compression most often show banding, so a flat blue field is a good uniformity test.
- Does blue light from my screen affect sleep?
- Blue wavelengths do suppress melatonin more than warmer light, so a bright blue screen late at night is a poor choice for winding down. If you want screen light in the evening, the warm white or candle presets are far kinder.
- Why does blue often look less smooth than other colors?
- Human vision is least sensitive to fine detail in blue, so both displays and video codecs allocate it the least resource. Large flat areas of blue are consequently where banding and blockiness show up first.
Share