Lay a transparent colour over your photo
Cover a photo with one transparent colour. Choose the colour and how strong it is, add text if you want, and save the result at its original size.
Local browser processing · No upload · No account required
Choose a photo to start. Text boxes and layers are drawn on your device.
How to add a colour overlay to an image
- Choose a JPEG, PNG, WebP, AVIF or HEIC photo. The page opens with a deep blue overlay at 40 % so you see the effect straight away.
- Click the Colour overlay swatch and pick any colour. Drag Overlay opacity until the photo looks the way you want.
- If the picture needs words, press Add text box, type the caption and read the contrast line that appears.
- Press Save image and download the file in JPEG, PNG or WebP.
What a flat overlay does to three of my photos
A colour overlay is the plainest layer there is: one colour, laid over every pixel with the same strength. That makes it easy to predict, and it also makes it blunt. A 50 % black overlay turns a pure white pixel into mid grey, and every other pixel moves by the same fraction towards black.
I wanted to see how blunt it is on real pictures, so I put the same white caption, "Lake Jasna", at the top left of three of my photos and raised a black overlay in three steps. The Lake Jasna sky is the hard case. The Metelkova red bicycle is easy, because the wall behind my caption is already dark.
Black overlay at 20, 40 and 60 % under a white caption
| Photo | No overlay | 20 % | 40 % | 60 % |
|---|---|---|---|---|
| Lake Jasna, 960 × 1200 px | 1.1 / 1.3 | 1.8 / 2.1 | 3.1 / 3.7 | 6.2 / 7.0 |
| Clay figure, Metelkova, 1200 × 800 px | 1.0 / 4.4 | 1.7 / 5.5 | 2.9 / 7.4 | 5.9 / 10.8 |
| Red bicycle, Metelkova, 1200 × 800 px | 1.1 / 8.7 | 1.8 / 10.5 | 3.2 / 12.6 | 6.3 / 15.3 |
Each cell gives the contrast of the worst letter pixel and the average over all letter pixels. The sky needed 60 % before its average passed 4.5. The clay figure passed at 40 %. The bicycle passed with no overlay at all, but its worst letter pixel only cleared 4.5 at 60 %.
Picking the colour
Black is the safe choice for white text, because it only lowers the brightness and leaves the hues alone. A coloured overlay shifts the whole mood. A deep blue makes a lake photo cooler, and a warm orange suits a street scene. The catch is that a colour is never fully dark: a warm orange overlay at 30 % pulled the average contrast of the clay figure caption down from 4.4 to 3.5, because orange is lighter than the dark areas it covers.
So pick the colour for the look, then choose the opacity for the text. If the two goals clash, keep the colour at a low opacity and put the readability work on a gradient or a box behind the text.
Overlay or darken?
Black at a chosen opacity is exactly what the darken page uses, and its numbers match this table. The difference is the starting point: that page opens with the Darken slider ready and this one opens with a colour swatch. Use this page when the colour is part of the design, and tinting when you want a gentle wash instead of a heavy cover.
Tips for colour overlays
- Start at 30 to 40 % and move in small steps; most photos look flat above 60 %.
- Use black or a very dark colour under white text, and white or a pale colour under dark text.
- Check the worst-spot number as well as the average, since one bright patch can still swallow a letter.
- Save a JPEG for sharing. A dark overlay usually makes that file smaller.
Privacy
Your photo never leaves your device. Opening, drawing and saving all happen in your browser, and the fonts are served from this site. Nothing is uploaded and no account is needed.
Frequently asked questions
How do I add a color overlay to an image online?
Choose your photo above, click the Colour overlay swatch and pick a colour, then drag Overlay opacity. When the preview looks right, press Save image and download the file in JPEG, PNG or WebP.
Is an overlay the same as the CSS version on a web page?
The idea is the same: a semi-transparent colour laid over the picture. Here the colour is baked into the saved file, so it shows everywhere, including places where you cannot write CSS.
Is colour spelled color or colour in the tool?
The tool labels say colour, and the page answers both spellings. Every colour picker works the same, and the saved file only contains the pixels of your photo with the chosen colour blended in.
Can I put an overlay on only part of the photo?
Not with the overlay, which covers the whole picture evenly. For one side or one strip, use the gradient control on the main page, which fades the colour out towards the middle of the photo.
How is an overlay different from a colour filter?
An overlay blends one chosen colour over every pixel by a fixed amount. A filter usually changes tones and colours with its own rules. Here you control the colour and the amount directly.
Related tools and guides
- Add text to your photo and keep it readable: Put captions on a photo with a gradient, tint or box behind them and a live contrast check.
- Darken a photo or lighten it: Make a whole photo darker, or lighter, with one slider. Add a caption on top and see at once whether it has become readable.
- Give a photo a colour tint: Wash a photo in one colour, from a hint of warmth to a strong blue. Choose the colour and the strength, then save the result on your device.
- Image Resizer: Resize images by pixels, percentage or longest side.
- Image Cropper: Crop images to exact ratios or popular preset sizes.
- Put your photos together in one image: Join photos side by side, stacked or in a grid, with adjustable gaps and borders.
- Metelkova Ljubljana: My Photos and Complete Visitor Guide: Where I photographed the clay figure and the red bicycle from the table.
- Lake Jasna, Slovenia: My Photography and Visitor Guide: The lake photo with the sky that needs 60 %.