CSS color-adjust Property

Last Updated : 16 Jul, 2020

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:

html

<!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>Geeks for Geeks</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:

html

<!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>Geeks for Geeks</p>
  </div>
</body>
</html>