Skip to content
Related Articles

Related Articles

Improve Article
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:






<!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:




<!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>

Output:

Browsers Supported:

  • Firefox
  • Opera
  • Mozilla firefox
  • Safari
  • Edge



My Personal Notes arrow_drop_up
Recommended Articles
Page :