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.
Red screen
A red screen is a display filled edge to edge with pure red. It is used to test a monitor's red subpixels, to hunt stuck pixels that a white field would hide, and as a night-vision-safe light for astronomy, darkrooms and night navigation.
Quick colors, then fill the screen
Or a gradient
Or let it move
#FF3B30rgb(255, 59, 48) · hsl(3, 100%, 59%)
- Testing red subpixels on a display
- Stuck pixel detection
- Preserving night vision for astronomy
- Darkroom safelight
Red color codes
Every value for #FF3B30, ready to paste. Click any code to copy it.
| Channel | Decimal | Share | Hex | Octal | Binary |
|---|---|---|---|---|---|
| Red | 255 | 100% | FF | 377 | 11111111 |
| Green | 59 | 23.14% | 3B | 73 | 00111011 |
| Blue | 48 | 18.82% | 30 | 60 | 00110000 |
The nearest web-safe color is #FF3333, from the 216-color palette browsers agreed on before displays could be trusted with more.
Shades, tints and tones
Every step is generated from #FF3B30. Click a swatch to copy its hex.
Shades of red
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 red
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 red
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 red scale
The same color as the 50 to 950 ladder every CSS framework uses, with #FF3B30 at 500. Click a step to copy its hex, or take the whole scale as variables for a design system.
Color schemes built on red
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 #FF3B30
Near neighbours, for when this color is almost right. Each one shifts hue, saturation or lightness by a small step.
Red color palettes
Five-color palettes built around #FF3B30, 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 red 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.
Red text on white background
3.55: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
Red text on black background
5.92: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, #FF3B30 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.
Red 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 red
What this color does, where it works, and what it reveals about the screen showing it.
What red is
The longest wavelength the eye reliably sees, and the first primary in every additive display. Showing pure red drives only the red subpixel of every pixel, leaving the other two dark.
Where it works
Display testing, and any task done in the dark. Astronomy, darkrooms, night navigation, a theatre pit, reading a chart on a night walk. Anywhere dark-adapted eyes need to stay that way.
How it reads
Red is the most urgent color there is. It signals stop, error, heat and danger in almost every culture, and it raises attention whether you want it to or not. That makes it powerful in small doses and exhausting in large ones.
On a display
A pixel with a failed red subpixel looks completely healthy on white and shows as a dark speck on red. Large flat areas of saturated red are also demanding to render, so cheap panels and heavy video compression reveal themselves here as banding or blotching.
Red light and night vision
Dark adaptation takes twenty to thirty minutes to build and one glance at a white screen to lose. The rod cells responsible are far less sensitive to long-wavelength red, which is why astronomers use red torches and why cockpits and submarine control rooms are lit in red.
Getting it right
For night use, drop the brightness before you go outside rather than after. Red helps, but a bright red screen is still bright. For testing, do the opposite and run at full brightness in a dim room, where faults are easiest to see.
Common questions
- Why would I need a red screen?
- Two main reasons. Displaying pure red drives only the red subpixel of every pixel, which exposes faults that white hides. And red light barely disturbs dark-adapted eyes, so a red screen is the standard choice for astronomy and any other work done in the dark.
- How does a red screen help find a dead pixel?
- A pixel with a failed red subpixel will show as a dark or off-color dot on a pure red field while looking completely normal on white. Checking red, green and blue in turn is the only way to catch single-subpixel faults.
- Does red light really protect night vision?
- Largely, yes. Your eyes adapt to darkness through rod cells, which are far less sensitive to long-wavelength red light than to blue or white. A dim red display lets you read a chart or a phone without throwing away the twenty to thirty minutes of adaptation you have built up.
- Is this the same as a red screen error?
- No. Some devices and games show a red error screen when something has failed at a low level. This page is a plain red fill you control, not a diagnostic message from your hardware.
Share