rendre la couleur 20% plus blanche

Question

J'ai une application Spring Boot et j'ai besoin de faire une couleur plus blanche. D'abord je l'ai essayé juste avec la transparence en CSS, mais ensuite j'ai remarqué que certains endroits se chevauchent et sont visibles.

Par exemple, j'ai cette couleur: # de0059

Maintenant, je veux ajouter environ 20% de blancs dans le: # e5337a

Comment puis-je faire en Java ou CSS pur (non SASS ou quelque chose autre)? Je ne veux pas rendre la couleur plus claire, je veux la rendre transparente sur un fond blanc sans transparence.

Answer 1

J'espère que cela vous aide.

h1 { 
 
    font-size: 72px; 
 
    background: -webkit-linear-gradient(#333, #fff); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<h1>Gradient text</h1>

Answer 2

En Java le vous pouvez faire Color.brighter(), mais vous ne pouvez pas définir la façon dont vous voulez beaucoup plus léger que la couleur soit. Alternativement, si vous pouvez faire quelque chose comme

Color col = new Color(222, 0, 89); //The RGB equivalent of #de0059 
Color lighter = new Color(col.getRed() * 0.8, col.getGreen() * 0.8, col.getBlue() * 0.8); 

Si vous voulez simplement augmenter la transparence, vous pouvez le faire

Color transparent = new Color(col.getRed(), col.getGreen(), col.getBlue, (255*0.8)); 

le quatrième argument dans le constructeur Java est le chanel alpha pour la transparence, où 255 = complètement opaque et 0 = complètement transparent.

Answer 3

Question assez intéressante. Je ne sais pas comment mesurer avec précision 20% whiter mais peut-être si vous connaissez la théorie derrière cela, vous pouvez atteindre le résultat que vous voulez avec brightness et contrast filtres css. Je donne un exemple:

.box { 
 
    display: inline-block; 
 
    width: 80px; 
 
    height:80px; 
 
    line-height: 80px; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    margin-right: 1px; 
 
} 
 

 
.box-1 { 
 
    background-color: #de0059; 
 
} 
 
    
 
.box-2 { 
 
    background-color: #e5337a; 
 
} 
 
    
 
.box-3 { 
 
    background-color: #de0059; 
 
    filter: brightness(120%) contrast(70%); 
 
}

<p>using pure colors</p> 
 
<div class="box box-1">#de0059</div> 
 
<div class="box box-2">#e5337a</div> 
 
<br> 
 
<p>using css filters</p> 
 
<div class="box box-1">#de0059</div> 
 
<div class="box box-3">calculated</div>

Mes sources:

• Dynamically change color to lighter or darker by percentage CSS (Javascript)
• MDN - CSS filter property