The contrast function

The contrast function is used to adjust color contrast. It increases or decreases the difference between the lightest and darkest parts of the color, making it more expressive or, conversely, more muted. A value of 100% leaves the color unchanged. Values less than 100% decrease contrast, values greater than 100% increase it. A value of 0% creates a completely gray color.

Syntax

contrast(amount)

Example

Different contrast levels for blue color:

<div class="box contrast-50">50% contrast</div>
<div class="box contrast-100">100% contrast</div>
<div class="box contrast-150">150% contrast</div>
<div class="box contrast-200">200% contrast</div>

.box {
	width: 100px;
	height: 100px;
	margin: 10px;
	display: inline-block;
	color: white;
	text-align: center;
	line-height: 100px;
}

.contrast-50 {
	background: contrast(#3498db, 50%);
}

.contrast-100 {
	background: contrast(#3498db, 100%);
}

.contrast-150 {
	background: contrast(#3498db, 150%);
}

.contrast-200 {
	background: contrast(#3498db, 200%);
}

The contrast function

Syntax

Example

See also