CSS color-adjust Property

The Color-adjust property has proved itself to be useful when it comes to printing documents. The browsers can change the colors and the appearance of the element so as to prevent that color-adjust property is used.

Syntax:

color-adjust: economy | exact

Property values:

economy: In this, the browser may leave the images in order to adjust the colors of the text such that making it more readable.

Syntax:

color-adjust: economy

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width,  
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
  #box{ 
  width: 300px; 
  height: auto; 
  border-radius: 50% 50%; 
  background-color: black; 
  background-image: linear-gradient( 
rgba(17, 199, 0, 0.5), rgb(255, 255, 255)); 
  color: rgb(0, 0, 0); 
  text-align: center; 
  font: 24px "Helvetica", sans-serif; 
  display: grid; 
  justify-content: center; 
  color-adjust: economy; 
} 
</style> 
<body> 
  <h1>color-adjust: economy</h1> 
  <div id="box"> 
    <p>Beginner for Beginner</p> 
  </div> 
</body> 
</html>

Output:

exact: In this, the appearance of the page must not change without the user’s request.

Syntax:

color-adjust: exact

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width, 
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
  #box{ 
  width: 300px; 
  height: auto; 
  border-radius: 50% 50%; 
  background-color: black; 
  background-image: linear-gradient( 
rgba(17, 199, 0, 0.5), rgb(255, 255, 255)); 
  color:#fff; 
  text-align: center; 
  font: 24px "Helvetica", sans-serif; 
  display: grid; 
  justify-content: center; 
  color-adjust: exact; 
} 
</style> 
<body> 
  <h1>color-adjust: exact</h1> 
  <div id="box"> 
    <p>Beginner for Beginner</p> 
  </div> 
</body> 
</html>

Output:

Browsers Supported:

Firefox
Opera
Mozilla firefox
Safari
Edge

Contact Us