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.
Yellow screen
A yellow screen is a display filled edge to edge with yellow. It is produced by lighting the red and green subpixels together with no blue, which makes it a useful combined test for those two channels and a warm, low-blue light source.
Quick colors, then fill the screen
Or a gradient
Or let it move
#FFD60Argb(255, 214, 10) · hsl(50, 100%, 52%)
- Warm ambient light with no blue output
- Testing red and green channels together
- Photography and video color gels
- High-visibility backdrop
Yellow color codes
Every value for #FFD60A, ready to paste. Click any code to copy it.
| Channel | Decimal | Share | Hex | Octal | Binary |
|---|---|---|---|---|---|
| Red | 255 | 100% | FF | 377 | 11111111 |
| Green | 214 | 83.92% | D6 | 326 | 11010110 |
| Blue | 10 | 3.92% | 0A | 12 | 00001010 |
The nearest web-safe color is #FFCC00, from the 216-color palette browsers agreed on before displays could be trusted with more.
Shades, tints and tones
Every step is generated from #FFD60A. Click a swatch to copy its hex.
Shades of yellow
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 yellow
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 yellow
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 yellow scale
The same color as the 50 to 950 ladder every CSS framework uses, with #FFD60A at 500. Click a step to copy its hex, or take the whole scale as variables for a design system.
Color schemes built on yellow
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 #FFD60A
Near neighbours, for when this color is almost right. Each one shifts hue, saturation or lightness by a small step.
Yellow color palettes
Five-color palettes built around #FFD60A, 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 yellow 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.
Yellow text on white background
1.41: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
Yellow text on black background
14.88: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, #FFD60A 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.
Yellow 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 yellow
What this color does, where it works, and what it reveals about the screen showing it.
What yellow is
Red and green at full output with blue switched off. There is no yellow subpixel on your screen and never has been. Your eye combines the two into yellow, which is why it works as a simultaneous test of both channels.
Where it works
Evening light, because it emits essentially no blue. Warm gels for close-up photography. And anywhere that needs to be seen, which is why hazard signage, safety vests and warning markings have used it for a century.
How it reads
Yellow is the most attention-grabbing color at a distance and the most fatiguing up close. It reads as cheerful, cautionary or cheap depending entirely on saturation. Muted it feels warm. At full strength it feels like a warning.
On a display
Close to the brightest thing a panel can produce short of white, because two subpixels are at full output rather than one. A pixel with a failed red or green subpixel shifts visibly toward the survivor against an otherwise uniform field.
The low-blue advantage
Blue wavelengths suppress melatonin and shift your body clock, which is the whole premise behind night-shift modes and amber glasses. Yellow emits almost none, making it a sensible choice for any light you need late in the evening.
As a gel
A phone or tablet showing flat yellow is a controllable color gel that costs nothing. Held just out of frame it throws warm light onto a small subject, and you can dial the exact warmth in real time rather than swapping physical filters.
Common questions
- How does a screen make yellow?
- There is no yellow subpixel. Yellow is made by lighting the red and green subpixels at full output while leaving blue off. Your eye combines the two into yellow, which is why a yellow field is a good simultaneous test of the red and green channels.
- Is a yellow screen better for my eyes at night?
- It emits essentially no blue light, which is the wavelength most associated with suppressing melatonin, so it is a much better evening choice than a white or blue screen. Brightness still matters more than color, so turn it down as well.
- Can I use a yellow screen as a color gel?
- Yes, for small subjects. A tablet or phone showing yellow works as a soft warm light for close-up photography, and unlike a physical gel you can adjust the exact shade instantly.
- Why does yellow look so much brighter than other colors?
- Because two of the three subpixels are at full output rather than one. Yellow is close to the brightest color a display can produce short of white, which is also why it is used for hazard and high-visibility signage.
Share