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

csscontrast(amount)

Exemple

Divers degrés de contraste pour la couleur bleue :

html<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>

css.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