Funktionen contrast
Funktionen contrast används för att justera kontrasten hos en färg.
Den ökar eller minskar skillnaden mellan de ljusaste och mörkaste delarna av en färg,
gör den mer uttrycksfull eller tvärtom, mer dämpad.
Värdet 100% lämnar färgen oförändrad.
Värden mindre än 100% minskar kontrasten, värden större än 100% - ökar den.
Värdet 0% skapar en helt grå färg.
Syntax
contrast(amount)
Exempel
Olika grader av kontrast för blå färg:
<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%);
}
:
Se även
-
funktionen
brightness,
som reglerar ljusstyrkan hos en färg -
funktionen
invert,
som inverterar färger