Runs in your browser with pdf.js and pdf-lib
PDF Color Overlay — tint pages, color-code chapters, add a colored band
Lay a color over whole pages or just a top, bottom or side band. Use several overlays, each on its own pages, see every page before you save, and keep the text selectable.
- PDF files aren't uploaded to our server
- Full page or a band
- Several overlays, each on its pages
- Text stays selectable
Add a color overlay to PDF pages
Add a PDF, set one or more color overlays, check every page, then save a new copy. Text stays selectable.
Drop your PDF here
or browse — one PDF, any number of pages
Overlays
Overlays are drawn in this order. Give each one its own pages to color-code chapters.
Good to know
Overlay 1
Your pages
Each page as it will look. Click a page to see it full size.
How it works
An overlay is a colored rectangle, not a filter
A color shape is drawn over the page. Its strength and blend decide how it mixes with what's underneath; the page itself isn't turned into a picture.
What you can do
- Tint whole pages, or add a colored band along the top, bottom or one side.
- Use several overlays, each with its own color and pages, to color-code chapters.
- Pick from eight blends, from a light tint that keeps text black to a full recolor.
- See every page with its overlays before you save; text, links and page size stay as they were.
What it doesn't do
- Change one color only, such as just the headings. The overlay covers everything in its area.
- Tint comments and form fields. They sit on top of the page and keep their colors.
- Hide content. A strong Normal overlay covers text visually, but the text is still in the file.
- Open password-protected PDFs. Unlock them first.
How to add a color overlay in four steps
Add, set, check, save.
Add your PDF
Drop the PDF onto the upload area, or click Select PDF. Every page appears below with a warm paper tint to start from.
Set the overlay
- Pick a color or type a hex code.
- Choose a blend and strength.
- Choose the whole page or a band.
Add more if you need
Click Add overlay or Duplicate, then give each overlay its own pages, for example 1-10 blue and 11-20 green.
Untick Show overlays to compare with the original.
Save and download
Click Add overlay to PDF. The preview is drawn from the saved file; rename it if you like and download it.
See a PDF before and after a color overlay
The original page and the same page with a color overlay.
What to set for your job
Common reasons to add a color overlay and the settings that work for each.
| Job | What matters | What to set |
|---|---|---|
| Gentler pages for long reading | Less bright white, text stays black. | Warm paper, Multiply, 100%, whole page. |
| Color-code chapters | Each section has its own color. | One overlay per chapter, each with Pages I type, for example 1-12 and 13-30. |
| Mark a draft or internal copy | Readers see it isn't final. | Gray or rose, Multiply, whole page; or a top band in Normal. |
| Brand a report | A consistent brand color. | Your hex code, Normal, 100%, top band about 8%. |
| Side tabs for a printed binder | Sections visible from the edge. | Right band 4%, Normal, a different color per section's pages. |
| A single-color look for images | Pictures in one hue. | Color blend, 100%, whole page. |
The details
What each blend actually does
The same color looks very different depending on the blend.
Multiply
Darkens only: white paper takes the color, black text stays black. The safe choice for tinting and highlighting.
Normal
Paints the color over the page at the strength you set. At 100% the area is solid color, which suits bands and tabs.
Screen
Lightens only: dark text takes on the color, white stays white. Useful for colored text on a white page.
Overlay, soft and hard light
Mix the color in while keeping light and dark areas. Soft light is gentle, Overlay stronger, Hard light boldest.
Color
Gives everything the overlay's hue while keeping its shading, for a one-color look. Black and white stay black and white.
Difference
Subtracts the colors. A white overlay inverts the page; other colors give a striking negative look.
When the overlay doesn't look right
Identify the problem, then use the matching fix.
The overlay hides the text
Normal blend at a high strength paints over everything.
Switch to Multiply, or lower the strength to 20-40%.
"Use a 6-digit hex code"
The color box needs a code like #1F4E79.
Type 6 hex digits, with or without #, or use the color picker.
The band is on the wrong side
Top, bottom, left and right follow the page as you see it, including turned pages.
Check the page list; if the page itself is the wrong way up, fix it with Rotate PDF first.
Highlights or form fields aren't tinted
They sit on top of the page, above the overlay.
Make them part of the page first with Flatten PDF.
One app shows the page without the blend
A few e-readers and older apps don't draw PDF blend modes.
Use Normal blend at a lower strength; every app shows it.
A password-protected PDF won't open
Encrypted PDFs can't be rewritten by the in-browser PDF libraries.
Remove the password with Unlock PDF, then add the unlocked copy.
A clean overlay without guessing twice
A working order that avoids the most common redo.
Start with Multiply
It tints the paper and keeps text black, so the page stays readable at any strength.
Use light colors for whole pages
Pale colors tint gently; save strong colors for bands and tabs.
Use Normal for brand bands
A top or side band at 100% Normal shows the exact brand color in every app.
Plan chapter colors first
Note the page ranges, then add one overlay per range with Duplicate so only the color changes.
Check small print full size
Open a page in the full-size view to make sure thin text is still clear under the color.
Keep the original
The overlay becomes part of the saved file. Keep the original to try other colors later.
PDF color overlay questions
If something's not covered here, the troubleshooting section above likely has it.
Does a color overlay lower the quality of my PDF?
No. The overlay is a vector color shape drawn over the page; the page isn't turned into a picture. Text stays selectable and searchable, and links, bookmarks and the page size are kept.
Which blend should I use to tint a page?
Multiply. It colors the white paper and keeps black text black, so the page stays readable. Normal paints over everything and suits solid bands; Color gives a one-color look.
Can I use different colors on different pages?
Yes. Add an overlay for each color and set its pages, such as 1-10 for one color and 11-20 for another. Overlays that share a page are drawn in list order.
Can I color only the header or a side of the page?
Yes. Under Where on the page, choose a top, bottom, left or right band and set its size. Sides follow the page as you see it, including turned pages.
Why aren't my highlights or form fields tinted?
Comments and form fields sit on top of the page, above the overlay, so they keep their colors. To tint them, make them part of the page first with Flatten PDF.
Will every PDF app show the overlay?
Normal blend shows in every app. The other blends use PDF blend modes, which browsers, Adobe Acrobat and most PDF apps show; a few e-readers and older apps don't.
Is my PDF uploaded?
No. The PDF is opened, colored and saved in your browser with pdf.js and pdf-lib; it is not uploaded to our server. Password-protected PDFs need to be unlocked first.
Build notes
The write-up on PDF color overlays in the browser
I wrote a tutorial on building a browser-based PDF color overlay tool with pdf.js, the Canvas API and pdf-lib, with no server involved.
How to Build a Browser-Based PDF Color Overlay Tool Using JavaScript
Covers rendering pages with pdf.js, previewing colored layers with the Canvas API, and exporting them with pdf-lib.