Trouver “l'équivalent” de la couleur avec l'opacité
Dire que j'ai une couleur de fond avec un "ruban" en cours d'exécution dans une autre couleur. Maintenant, je veux le ruban à être partiellement transparente pour laisser certains détails mélange à travers, mais toujours garder le ruban de la même couleur" sur l'arrière-plan.
Est-il un moyen de (facilement) déterminer, pour une opacité/alpha < 100% de la couleur du ruban, quelles valeurs RGB, il doit être identique à sa couleur avec 100% d'opacité sur l'arrière-plan?
Voici une photo. Arrière-plan est rgb(72, 28, 97)
, ruban rgb(45, 34, 70)
. Je veux un rgba(r, g, b, a)
pour le ruban de sorte qu'il apparaît identique à celle de la couleur.
- Une question très semblable peut être trouvée ici: stackoverflow.com/questions/6672374/convert-rgb-rgba mais la principale différence est que cette question spécifie une couleur de base de blanc, tandis que celui-ci est arbitraire.
Vous devez vous connecter pour publier un commentaire.
Le mélange des couleurs est juste une interpolation linéaire par canal, à droite? Donc le calcul est assez simple. Si vous avez RGBA1 sur RGB2, le résultat visuel RGB3 sera:
...où le canal alpha est de 0.0 à 1.0.
Sanity check: si l'alpha est 0, est RGB3 le même que RGB2? Oui. Si l'alpha est 1, est RGB3 le même que RGB1? Oui.
Si vous avez verrouillé seulement la couleur d'arrière-plan et la couleur finale, il y a un grand nombre de couleurs RGBA (infini, en floating-point de l'espace) qui pourrait satisfaire aux exigences. Donc, vous avez à choisir soit la couleur de la barre ou le niveau d'opacité que vous voulez, et de trouver la valeur de l'autre.
La cueillette de la Couleur en Fonction de Alpha
Si vous connaissez RGB3 (le final de la couleur désirée), RGB2 (la couleur d'arrière-plan), et A1 (combien d'opacité que vous voulez), et vous êtes tout simplement à la recherche pour RGB1, alors nous pouvons ré-arranger les équations ainsi:
Il y a certaines combinaisons de couleurs qui sont théoriquement possibles, mais impossible compte tenu de la norme RGBA gamme. Par exemple, si le fond est noir pur, le désiré perception de la couleur est d'un blanc pur, et le choix d'une alpha est de 1%, vous devez:
...une super lumineux blanc 100 x plus lumineux que n'importe quel disponibles.
De la cueillette de l'Alpha Basé sur les Couleurs
Si vous connaissez RGB3 (le final de la couleur désirée), RGB2 (la couleur d'arrière-plan), et RGB1 (la couleur que vous avez ce que vous voulez faire varier l'opacité de l'), et vous êtes tout simplement à la recherche pour A1, alors nous pouvons ré-arranger les équations ainsi:
Si ceux-ci donnent des valeurs différentes, alors vous ne pouvez pas le faire correspondre exactement, mais vous pouvez en moyenne, les alphas de se rapprocher le plus possible. Par exemple, il n'y a pas d'opacité dans le monde qui vous permettra de les mettre en vert sur le rouge pour obtenir du bleu.
r1
,g1
, etb1
également inconnu?j'ai fait un MOINS mixin à l'aide de Phrogz de réponse. vous entrée:
Voici le code:
D'utilisation comme suit:
De toute évidence ne fonctionne pas impossible de combinaisons (comme mentionné par Phrogz), ce qui signifie que des niveaux de transparence sont pris en charge. Voir comment vous allez avec elle.
Grâce à Phrogz's et ephemer's de grandes réponses, voici une SASS fonction qui automatiquement calcule le meilleur équivalent de couleur RVBA.
Vous l'appelez, avec la couleur et l'arrière-plan, et il va calculer le meilleur (le sens le plus transparent) équivalent RGBA couleur qui donne le résultat souhaité à l'intérieur de ±1/256 de chaque composant RVB (en raison des erreurs d'arrondi):
Je l'ai juste testé contre un certain nombre de combinaisons (tous les Bootswatch thèmes) et il fonctionne un régal, à la fois pour dark-sur-léger-sur-sombre résultats.
PS: Si vous avez besoin de plus de ±1/256 de précision dans le résultat de la couleur, vous aurez besoin de savoir quel type d'algorithme arrondi navigateurs s'appliquent lorsque le mélange des couleurs rgba (je ne sais pas si c'est normalisés ou non) et d'ajouter un état de l'existant
@while
, de sorte qu'elle continue à augmenter$alpha
pour atteindre la précision souhaitée.transparentify()
: stylus-lang.com/docs/bifs.html#transparentifytop-bottom-alpha ... que j'ai découvert après le portage de cette opération manuellement avec le Stylet ...De @Phrogz' réponse:
Donc:
Donc:
Remarque vous pouvez choisir n'importe quelle valeur de
a1
, et ce sera de trouver les valeurs correspondantes der1
,g1
, etb1
nécessaire. Par exemple, la sélection d'une alpha de 1 indique que vous devez RGB1 = RGB3, mais le choix d'un alpha de 0 donne pas de solution (évidemment).Étendre sur @Tobia réponse et permettent de spécifier l'opacité plus comme transparentify: