contrast-funksie

Die contrast funksie word gebruik om die kontras van 'n kleur aan te pas. Dit verhoog of verlaag die verskil tussen die ligste en donkerste dele van die kleur, wat dit meer uitdruklik of, andersins, meer gedemp maak. 'n Waarde van 100% laat die kleur onveranderd. Waardes minder as 100% verminder kontras, waardes meer as 100% - verhoog dit. 'n Waarde van 0% skep 'n heeltemal grys kleur.

Sintaksis

contrast(amount)

Voorbeeld

Verskillende grade van kontras vir 'n blou kleur:

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

Sien ook

die brightness funksie,
wat die helderheid van 'n kleur aanpas
die invert funksie,
wat kleure omkeer