CodeBlanks Logo Icon CodeBlanks
Login Register

Print color adjust

CSS course · Advanced · Lesson 40/52

Learn print color with print-color-adjust.

What is print-color-adjust?

By default, browsers skip background colors and images when printing to save ink. The print-color-adjust property changes that. Two values: economy (default, skips) and exact (forces).

For example, .report-header { print-color-adjust: exact; } prints the header background. Older browsers may also need the -webkit-print-color-adjust prefix.

The economy and exact values

economy is the browser's default: it skips backgrounds and images. exact forces them to print. Which one you pick depends on the report's purpose.

For a corporate report where the header band's color matters, use exact. If saving ink is the priority, stick with economy. Put the declaration on the element itself; it also inherits.

Exercise Force the header background to print

Write a print-color-adjust: exact declaration for the .report-header selector. The same block must also declare background: navy and color: white. Include all three declarations.

Show example solution 
/* force header background in print */
.report-header {
  background: navy;
  color: white;
  print-color-adjust: exact;
}

Test yourself

  1. Which property forces the background color in print?

    .report-header { print-color-adjust: exact; }
    • color-print
    • background-print
    • print-color-adjust: exact
    • color-adjust: yes
    Show answer

    print-color-adjust: exact — Correct. print-color-adjust: exact forces the background color onto paper.

  2. Force the header background to print

    .report-header {
  background: navy;
  color: white;
  ____;
}
    Show answer 
    .report-header {
  background: navy;
  color: white;
  print-color-adjust: exact;
}

  3. What does print-color-adjust: economy do?

    • Skips backgrounds and images, saving ink
    • Converts colors to black and white
    • Prints all colors, using more ink
    • Only changes the font
    Show answer

    Skips backgrounds and images, saving ink — Correct. economy skips backgrounds to save ink.

  4. Match each value to its effect

    print-color-adjust: exact
    Forces colors to print
    print-color-adjust: economy
    Skips backgrounds
    -webkit-print-color-adjust
    Old browser prefix

All lessons in Advanced

1 Animations

  1. What are keyframes?
  2. Animation-name and duration
  3. Animation timing function
  4. Animation iteration
  5. Animation direction and fill-mode
  6. Summary - Loader animation

2 Gradients

  1. Linear gradient
  2. Radial gradient
  3. Conic gradient
  4. Color stops
  5. Layered gradients
  6. Summary - Button variations

3 Filters and blend

  1. Filter property
  2. Grayscale and sepia
  3. Hue-rotate and saturate
  4. Drop-shadow
  5. Mix-blend-mode
  6. Summary - Image effects

4 Modern layout

  1. Subgrid
  2. Container queries
  3. Aspect-ratio
  4. Object-fit
  5. Gap multi-column
  6. Summary - Modern card grid

5 Writing modes and logical properties

  1. Writing-mode
  2. Logical properties
  3. Inset property
  4. Block and inline
  5. Direction and unicode-bidi
  6. Summary - Multi-direction card

6 Accessible CSS

  1. Sr-only technique
  2. Focus-visible
  3. Prefers color scheme
  4. Prefers reduced motion
  5. Prefers contrast
  6. Summary - Accessible theme

7 Print and paged media

  1. @page rule
  2. Page break
  3. Print media
  4. Print color adjust
  5. Page number
  6. Summary - Printable report

8 Project: Dashboard UI

  1. Project: Dashboard UI
  2. Sidebar and header
  3. KPI cards
  4. Data table
  5. Project final - Dashboard

9 Advanced final

  1. Challenge - Animated hero
  2. Challenge - Pseudo-element card
  3. Challenge - Advanced selectors
  4. Challenge - Modern layout
  5. Challenge - Advanced capstone