it-swarm-eu.dev

Come ottenere un colore "percepito" coerente su una BG trasparente?

Sono in un sottaceto.

Devo effettuare controlli del modulo (pulsanti, caselle di controllo, input di testo, ecc.) Su uno sfondo nero semitrasparente (85% alfa).

Ecco come sembrano finora:

Le checkboxes

Notare la differenza tra i primi due e i due inferiori. La differenza è che il bordo inferiore e destro è appena abbastanza leggero da dare quell'aspetto fresco inserto. Il problema? Tutti tranne uno di quei bordi hanno lo stesso colore.

:(

Perché è su uno sfondo trasparente, le linee appaiono più chiare o più scure in base al colore dietro di esso! Quindi, quell'aspetto pulito dell'inserto andrà e verrà in base a ciò che c'è sotto. Voglio sempre che l'aspetto dell'inserzione sia lì, come posso farlo? Ci sono trucchi per la modalità di fusione per questo?

Post scriptum Ho dimenticato di dire che alla fine questo verrà visualizzato in Flash, quindi mi diverto un po 'con le modalità di fusione e cose.

Modifica: Ho creato un'altra immagine per chiarire meglio il problema (con "troppo scuro" e "troppo chiaro" mi riferisco ancora ai bordi destro e inferiore).

Another Example

6
Jonathan Dumaine

È possibile utilizzare una modalità di fusione schermo scherma o colore. In alternativa, è possibile utilizzare solo un colore bianco puro ma impostare la trasparenza dell'area del bordo sulla percentuale che si desidera schiarire. Sarà lo stesso che usare una modalità di fusione dello schermo con un colore grigio di quella luminosità.

Edit:
La luminosità percepita si basa sul colore BG contro il quale il colore FG viene retrocesso, come hai visto nelle tue immagini. In questo momento, ciò che sta accadendo è che le alte luci della casella di controllo sono visualizzate con lo stesso colore e la stessa tonalità, indipendentemente dallo sfondo. Quindi, se lo sfondo è luminoso, sta solo aumentando la luminosità di un po 'o niente, ma se lo sfondo è scuro, allora aumenta di molto la luminosità. Ciò conferisce all'evidenziatore un aspetto innaturale/incoerente.

La correzione consiste nel rendere le luci più luminose del BG di X%, in modo che sia sempre X% più luminosa dei pixel adiacenti. La luminosità "percepita" sarà quindi X%, indipendentemente dallo sfondo (a meno che lo sfondo non sia troppo luminoso, quindi non sarà in grado di aumentare la luminosità di X% pieno).

2
Lèse majesté