Fungsi contrast

Fungsi contrast digunakan untuk menyesuaikan kontras warna. Fungsi ini meningkatkan atau mengurangi perbedaan antara bagian terang dan gelap dari warna, membuatnya lebih ekspresif atau sebaliknya, lebih redup. Nilai 100% membiarkan warna tidak berubah. Nilai kurang dari 100% mengurangi kontras, nilai lebih dari 100% - meningkatkannya. Nilai 0% menciptakan warna abu-abu sepenuhnya.

Sintaksis

contrast(amount)

Contoh

Berbagai tingkat kontras untuk warna biru:

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

Lihat juga

fungsi brightness,
yang mengatur kecerahan warna
fungsi invert,
yang membalikkan warna