contrast Fonksiyonu

contrast fonksiyonu, rengin kontrastını ayarlamak için kullanılır. Rengin en açık ve en koyu kısımları arasındaki farkı artırarak veya azaltarak, rengi daha ifadeli veya tam tersine daha soluk hale getirir. 100% değeri rengi olduğu gibi bırakır. 100%'den küçük değerler kontrastı azaltır, 100%'den büyük değerler - artırır. 0% değeri tamamen gri bir renk oluşturur.

Sözdizimi

contrast(amount)

Örnek

Mavi renk için farklı kontrast seviyeleri:

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

Ayrıca Bakınız

rengin parlaklığını ayarlayan brightness
fonksiyonu
renkleri tersine çeviren invert
fonksiyonu