Funktion contrast

Die Funktion contrast wird verwendet, um den Kontrast einer Farbe anzupassen. Sie erhöht oder verringert den Unterschied zwischen den hellsten und dunkelsten Teilen der Farbe, macht sie dadurch ausdrucksstärker oder im Gegenteil, gedämpfter. Ein Wert von 100% lässt die Farbe unverändert. Werte unter 100% verringern den Kontrast, Werte über 100% erhöhen ihn. Ein Wert von 0% erzeugt eine vollständig graue Farbe.

Syntax

contrast(amount)

Beispiel

Verschiedene Kontraststufen für die Farbe Blau:

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

Siehe auch

die Funktion brightness,
die die Helligkeit einer Farbe reguliert
die Funktion invert,
die Farben invertiert