CODEWITHSUNDEEP
cssprinting
Andrew Davey
Andrew Davey

Reputation: 5451

Incorrect text colors when printing HTML page

Why do browsers change the color of text when printing?

For example, create a blank HTML document containing:

<span style="color: #80b831">test</span>
<button onclick="window.print()">Print</button>

Example here: http://jsfiddle.net/7z6c2/

The span has color: #80b831 on the screen, but when printed (even just print preview in Chrome) the color is different (lime greenish).

ScreenshotsfromPDFCreator

If I tick Chrome's "Background colors and images" option in Print Preview, the correct color is then used.

What's happening here? How can I get the right color to appear by default? Is this something to do with "web-safe" colors?

Upvotes: 13

Views: 15221

Answers (2)

Balalayka Balkanski
Balalayka Balkanski

Reputation: 3

A bit old topic but still this might have to do something with the web safe colors. Here is a list of them, but haven't test it if there will be any difference due to the lack of printer.

Upvotes: 0

Vikas Ghodke
Vikas Ghodke

Reputation: 6655

Check this Fiddle

You have to use -webkit-print-color-adjust on the element which you are going to print

Also check here to know more about print color adjust https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust

Upvotes: 12

Related Questions