Functie contrast

De functie contrast wordt gebruikt om het contrast van een kleur aan te passen. Het vergroot of verkleint het verschil tussen de lichtste en donkerste delen van de kleur, waardoor deze expressiever wordt of juist meer gedempt. Een waarde van 100% laat de kleur onveranderd. Waarden onder 100% verlagen het contrast, waarden boven 100% - verhogen het. Een waarde van 0% creëert een volledig grijze kleur.

Syntaxis

contrast(amount)

Voorbeeld

Verschillende contrastniveaus voor de kleur blauw:

<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%);
}

Zie ook

de functie brightness,
die de helderheid van een kleur regelt
de functie invert,
die kleuren inverteert