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.
Orange screen
An orange screen is a display filled edge to edge with warm orange. Because it emits almost no blue light, it works well as an evening ambient glow, as a warm fill light for photography, and for simulating firelight or sunset.
Quick colors, then fill the screen
Or a gradient
Or let it move
#FF9500rgb(255, 149, 0) · hsl(35, 100%, 50%)
- Warm evening ambient light
- Firelight and sunset effects on camera
- Low-blue reading light
- Cosy accent lighting
Orange color codes
Every value for #FF9500, ready to paste. Click any code to copy it.
| Channel | Decimal | Share | Hex | Octal | Binary |
|---|---|---|---|---|---|
| Red | 255 | 100% | FF | 377 | 11111111 |
| Green | 149 | 58.43% | 95 | 225 | 10010101 |
| Blue | 0 | 0% | 00 | 0 | 00000000 |
The nearest web-safe color is #FF9900, from the 216-color palette browsers agreed on before displays could be trusted with more.
Shades, tints and tones
Every step is generated from #FF9500. Click a swatch to copy its hex.
Shades of orange
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 orange
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 orange
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 orange scale
The same color as the 50 to 950 ladder every CSS framework uses, with #FF9500 at 500. Click a step to copy its hex, or take the whole scale as variables for a design system.
Color schemes built on orange
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 #FF9500
Near neighbours, for when this color is almost right. Each one shifts hue, saturation or lightness by a small step.
Orange color palettes
Five-color palettes built around #FF9500, 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 orange 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.
Orange text on white background
2.2:1 · PoorLarge 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
Orange text on black background
9.55:1 · ExcellentLarge 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, #FF9500 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.
Orange 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 orange
What this color does, where it works, and what it reveals about the screen showing it.
What orange is
Red at full output with green partway up and blue absent. It sits where most of the light we find emotionally warm actually lives, close to firelight, tungsten bulbs and low sun.
Where it works
Evening ambient light behind a desk or television, and any camera work that wants warmth. Firelight, candlelight, sunset, street lamps and the inside of a tent at dusk are all orange to a lens.
How it reads
Orange is where a screen stops feeling like a screen. It reads as warm, sociable and cheap in roughly equal measure, which is why it is used for both hospitality and discount signage. Kept dim it feels like lamplight.
On a display
Less diagnostic value than the pure primaries, because it mixes red with a partial green rather than isolating one channel. It is still a good test of how a panel handles two subpixels at different levels, which is what skies and skin tones demand.
Firelight on camera
Two refinements sell the effect. Put the light low and to one side, since fire and low sun almost never come from directly in front. And vary it, because real firelight flickers. Changing the brightness by hand while filming sells it better than a steady field ever will.
Getting it right
Keep the brightness low. At full output orange is intense and does not read as cosy at all. The effect you are usually after arrives at around a fifth of what the panel can do.
Common questions
- Is an orange screen good for evenings?
- Yes. Orange sits at the warm end of the spectrum and emits very little blue light, so it is much less alerting than a white or blue screen. It is the closest a display gets to the quality of lamplight.
- Can I use an orange screen as a fire effect?
- For film and photography, a phone or tablet showing orange makes a convincing stand-in for firelight or candlelight on a face or a small set, especially with the brightness varied by hand. It is a standard low-budget trick.
- What is the difference between orange and warm white?
- Warm white is white with a slight amber tint and still reads as a neutral light. Orange is a fully saturated color, so it visibly tints everything it falls on. Use warm white when you want the light to look natural and orange when you want the color itself.
- Does orange light help with sleep?
- It is a better choice than blue or white late at night because it barely affects melatonin. It is not a sleep aid on its own, and a bright orange screen is still bright, so keep the level low.
Share