Dato un valore RGB, come 168, 0, 255, come faccio a creare tinte (renderlo più chiaro) e sfumature (renderlo più scuro) del colore?
Dato un valore RGB, come 168, 0, 255, come faccio a creare tinte (renderlo più chiaro) e sfumature (renderlo più scuro) del colore?
Risposte:
Tra le diverse opzioni per l'ombreggiatura e la colorazione:
Per le sfumature, moltiplicare ogni componente per 1/4, 1/2, 3/4, ecc. Del suo valore precedente. Più piccolo è il fattore, più scura è l'ombra.
Per le tinte, calcolare (255 - valore precedente), moltiplicarlo per 1/4, 1/2, 3/4, ecc. (Maggiore è il fattore, più chiara è la tinta) e aggiungerlo al valore precedente (assumendo che .component è un numero intero a 8 bit).
Notare che le manipolazioni del colore (come tinte e altre ombreggiature) dovrebbero essere eseguite in RGB lineare . Tuttavia, è improbabile che i colori RGB specificati nei documenti o codificati in immagini e video siano in RGB lineare, nel qual caso è necessario applicare una cosiddetta funzione di trasferimento inverso a ciascuno dei componenti del colore RGB. Questa funzione varia con lo spazio colore RGB. Ad esempio, nello spazio colore sRGB (che può essere assunto se lo spazio colore RGB è sconosciuto), questa funzione è più o meno equivalente all'aumento di ogni componente colore sRGB (compreso tra 0 e 1) a una potenza di 2,2. (Notare che "RGB lineare" non è uno spazio colore RGB.)
Vedi anche il commento di Violet Giraffe sulla "correzione gamma".
A seconda del modello di colore, esistono diversi metodi per creare un colore più scuro (sfumato) o più chiaro (colorato):
RGB:
Per ombreggiare:
newR = currentR * (1 - shade_factor)
newG = currentG * (1 - shade_factor)
newB = currentB * (1 - shade_factor)
Per colorare:
newR = currentR + (255 - currentR) * tint_factor
newG = currentG + (255 - currentG) * tint_factor
newB = currentB + (255 - currentB) * tint_factor
Più in generale, il colore risultante nella stratificazione di un colore RGB(currentR,currentG,currentB)con un colore RGBA(aR,aG,aB,alpha)è:
newR = currentR + (aR - currentR) * alpha
newG = currentG + (aG - currentG) * alpha
newB = currentB + (aB - currentB) * alpha
dove (aR,aG,aB) = black = (0,0,0)per l'ombreggiatura e (aR,aG,aB) = white = (255,255,255)per la colorazione
HSVoppure HSB:
Value/ Brightnesso aumentare ilSaturationSaturationo aumentare il Value/BrightnessHSL:
LightnessLightnessEsistono formule per convertire da un modello di colore a un altro. Secondo la tua domanda iniziale, se ti trovi RGBe desideri utilizzare il HSVmodello per ombreggiare, ad esempio, puoi semplicemente convertirlo in HSV, eseguire l'ombreggiatura e riconvertirlo in RGB. Le formule per convertire non sono banali ma si possono trovare su internet. A seconda della tua lingua, potrebbe anche essere disponibile come funzione principale:
RGB ha il vantaggio di essere davvero semplice da implementare, ma:
HSVo HSBè un po 'complesso perché devi giocare con due parametri per ottenere quello che vuoi ( Saturation& Value/ Brightness)HSL è il migliore dal mio punto di vista:
50% indica una tonalità inalterata>50% significa che la tonalità è più chiara (tinta)<50% significa che la tonalità è più scura (ombra)Lightnessparte)Attualmente sto sperimentando con canvas e pixel ... Sto scoprendo che questa logica funziona meglio per me.
aggiungi per compensare il valore 'tinta'
var grey = (r + g + b) / 3;
var grey2 = (new_r + new_g + new_b) / 3;
var dr = grey - grey2 * 1;
var dg = grey - grey2 * 1
var db = grey - grey2 * 1;
tint_r = new_r + dr;
tint_g = new_g + dg;
tint_b = new_b _ db;
o qualcosa di simile...
rs = r * 0.25,gs = g * 0.25,bs = b * 0.25(vale a dire una tonalità scura abbastanza); Tint (rt, gt, bt):rt = r + (0.25 * (255 - r)),gt = g + (0.25 * (255 - g)),bt = b + (0.25 * (255 - b))(che è una tinta abbastanza luce). L'ho fatto come parte di una fantastica gamma che ha creato molte tonalità e ha funzionato alla grande. Spero che aiuti. Grazie Peter.