Funktionskontrast

Funktionen contrast bruges til at justere kontrasten af en farve. Den øger eller reducerer forskellen mellem de lyseste og mørkeste dele af farven, hvilket gør den mere udtryksfuld eller omvendt mere dæmpet. Værdien 100% efterlader farven uændret. Værdier lavere end 100% reducerer kontrasten, værdier højere end 100% - øger den. Værdien 0% skaber en fuldstændig grå farve.

Syntaks

contrast(amount)

Eksempel

Forskellige grader af kontrast for blå farve:

<div class="box contrast-50">50% kontrast</div>
<div class="box contrast-100">100% kontrast</div>
<div class="box contrast-150">150% kontrast</div>
<div class="box contrast-200">200% kontrast</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%);
}

Se også

funktionen brightness,
som justerer farvens lysstyrke
funktionen invert,
som inverterer farver