Fonction contrast

La fonction contrast est utilisée pour ajuster le contraste d'une couleur. Elle augmente ou diminue la différence entre les parties les plus claires et les plus sombres de la couleur, la rendant plus expressive ou au contraire, plus atténuée. Une valeur de 100% laisse la couleur inchangée. Les valeurs inférieures à 100% réduisent le contraste, les valeurs supérieures à 100% l'augmentent. Une valeur de 0% crée une couleur entièrement grise.

Syntaxe

contrast(amount)

Exemple

Divers degrés de contraste pour la couleur bleue :

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

Voir aussi

la fonction brightness,
qui règle la luminosité d'une couleur
la fonction invert,
qui inverse les couleurs