Recent Changes - Search:

Pagine di servizio

Gruppi

Pagine in allestimento

Strumenti

Domini correlati

PmWiki

pmwiki.org

edit SideBar

Convertitori per dati cromatici

Autore: P. Forster
a cura di Daniela Rüegg

Notazioni e conversioni cromatiche

Per il mio lavoro grafico devo spesso scegliere e variare dei colori / tinte. Il problema è:

  • la notazione astratta in numeri sul web di colori che mi immagino come tonalità concrete cromatiche.

Il seguente testo propone vari strumenti per arrangiarsi e superare i relativi grattacapi.A chi ha difficoltà nel ricordarsi la terminologia in merito, possono servire le nozioni sotto Terminogia o il capitolo sulle Teorie dei colori.


1.  Convertitore sofisticato

I formati più usati per il mio lavoro con i colori sono Hex #, RGB e HSL e delle conversioni tra di loro.

↓ provare, funzionante

Convertitore cromatico
Convertitore cromatico #, rgb, hsv, hsl, cmyk, hysk, puro, grigi
hsv cmyk
# rgb ↓puro
hsl
Hy K
       
Cc by P. Forster 3.0 1500419
=
Campioni cromatici
           
click luminosi click
click pigmentosi click
Il convertitore trasforma dei dati cromatici caratteristici a vicenda:
  • # Hex: tre dupli esadecimali rgb
  • R G B: Red- Green- Blue → rosso- verde- blu
  • H S L: Hue- Saturation- Luminosity → tonalità (luminosa- saturazione- luminosità (relativa a bianco)
  • H S V: Hue- Saturation -Value → tonalità (luminosa) - saturazione- valore luminosità (relativo a mass. satur.)
  • C M Y K: Cyan- Magenta -Yellow -Black → azzurro - viola - giallo - nero
  • Hy: tonalità pigmentosa
  • K: luminanza (assoluta)
  • abbinato al relativo colore visivo.
  • All'apertura appaiono delle caselle da riempire con denominazioni in rosso per Hex (p.es. oHex), Rgb e Hsl. Ogni modifica di un valore (doppio clic, digitare, tabulatore) cambia tutti valori dipendenti.
    In fondo appaiono delle caselle con le notazioni CSS (Cascading Style Sheets). Servono per copiare - incollare facilmente in altre applicazioni.
    Clic su X cancella tutti dati e colori.

    Clic sul tasto apre una serie di caselle con aggiunta ed entrata / uscite di diversi dati ausiliari corrispondenti. Sono da far visibili anche con i seguenti singoli tasti:
  • dati del colore puro cliccando in una casella di hsl
  • dati dei grigi azionando il tasto K
  • dati del colore pigmentoso azionando il tasto Y
  • dati di notazione hsv e cmyk azionando il tasto V
  • Clic sul pulsante = apre / chiude un primitiva calcolatrice.

    Clic sul pulsante C apre / chiude una finestrina con dei colori campioni basilari. Quest' ultimi possono essere trasferiti nel convertitore: clic sul colore desiderato e poi azionare il pulsante .

    La precisione delle conversioni è al solito di ca. 1%, in trasformazioni H⇄Hy⇄H intorno al 2%; impercepibile dall'occhio umano.

    A volte mi servono anche altri formati, specialmente Hsv(b) e Cmyk. Per questo motivo ho stilato un convertitore abbastanza completo. Permette la variazione di Hex/#, Rgb, Hsl, Hsv(b) e Cmyk simultanea e a vicenda e fornisce i risultati in formato CSS per copiare e incollare.

    Il motore è dotato di diverse funzioni ausiliarie che servono per un lavoro pratico: indica il colore puro: tasto Y, il valore grigio attuale: tasto K e per l'indicazione delle notazioni hsv / cmyk: tasto V.
    Inoltre si può servire di una piccola calcolatrice JavaScript: tasto = , di campioni di colori trasferibili (per modifiche nel convertitore stesso): tasto C e della seguente leggenda: tasto (per l'uso autonomo).

    Leggenda:
    il convertitore cui sopra (funzionante, subito provare!) trasforma dei dati cromatici caratteristici a vicenda:

  • # Hex: tre dupli esadecimali rgb
  • R G B: Red- Green- Blue → rosso- verde- blu
  • H S L: Hue- Saturation- Luminosity → tonalità (luminosa- saturazione- luminosità (relativa a bianco)
  • H S V: Hue- Saturation -Value → tonalità (luminosa) - saturazione- valore luminosità (relativo a mass. satur.)
  • C M Y K: Cyan- Magenta -Yellow -Black → azzurro - viola - giallo - nero
  • Hy: tonalità pigmentosa
  • K: luminanza (assoluta)
  • abbinato al relativo colore visivo.

  • All'apertura appaiono delle caselle da riempire con denominazioni in rosso per Hex (p.es. oHex), Rgb e Hsl. Ogni modifica di un valore (doppio clic, digitare, tabulatore) cambia tutti valori dipendenti.

    In fondo appaiono delle caselle con le notazioni CSS (Cascading Style Sheets). Servono per copiare - incollare facilmente in altre applicazioni. Clic su X cancella tutti dati e colori.

    Clic sul tasto apre una serie di caselle con aggiunta ed entrata / uscite di diversi dati ausiliari corrispondenti. Sono da far visibili anche con i seguenti singoli tasti:
  • dati del colore puro cliccando in una casella di hsl

  • dati dei grigi azionando il tasto K

  • dati del colore pigmentoso azionando il tasto Y

  • dati di notazione hsv e cmyk azionando il tasto V
  • Clic sul pulsante = apre / chiude un primitiva calcolatrice.

    Clic sul pulsante C apre / chiude una finestrina con dei colori campioni basilari. Quest' ultimi possono essere trasferiti nel convertitore: clic sul colore desiderato e poi azionare il pulsante .

    La precisione delle conversioni è al solito di ca. 1%, in trasformazioni H⇄Hy⇄H nonchè K→L intorno al 2%; impercepibile dall'occhio umano.


    2.  Convertitore basilare giocoso

    Mi sono fabbricato anche un altro motorino (solo per colori luminosi e senza accessori) per coordinare l'immaginazione con i dati cromatici: anche usabile in miei altri progetti come Miscele di tinte o Armonie cromatiche.
    Questo mi andava meglio partendo da un colore elementare (p.es. verde) per poi variare finemente tonalità (p.es. più verso giallo o blu), cromaticità risp. saturazione (più o meno grigiastro) e luminosità (più chiaro o più scuro).

    Istruzioni d'uso per variazioni:
    Per variare il colore apparso basta cambiare un numero in una delle caselle colorate : appare subito il colore variato e si adattano tutte le altre notazioni:

    • hsl (Hue→ tonalità; Saturation→ cromaticità; Luminosity→ luminosità)
      • prima casella <H> varia la tonalità del colore sul cerchio di colori standartizzato RGB da 0°...360° (rosso 0° → giallo 60° → verde 120° → blu 240° → rosso 360°)
      • seconda casella <S> varia la cromaticià del colore da 0%...100% (grigio...piena intensità cromatica)
      • terza casella <L> varia la luminosità del colore da 0%...100% (nero...bianco). La massima intensità cromatica è dato a 50% (assenza di "bianco 50...100%" o "nero 0...50%").
    • rgb (Red→ rosso; Green→ verde; Blue→ blu)
      • prima casella <R> varia il contenuto del colore in rosso da 0...255 parti.
      • seconda casella <G> varia il contenuto del colore in verde da 0...255 parti.
      • terza casella <B> variail contenuto del colore in blu da 0...255 parti.
      • (N.B.: rgb(255,255,255)→ bianco; rgb(0,0,0)→ nero).
    • Hex (notazione consistente in tre per 2 cifre esadecimali #RrGgBb).
    chi vuole approfondire → Wikipedia.en

    Alla fine ho bisogno il colore così determinato in una notazione usabile sul web. Le più frequentemente usate sono Hex #......, rgb(R,G,B) e hsl(H,S%,L%). Si trovano sulla scheda e si possono usare immediatamente (doppio clic, copia, incolla).
    Per cancellare il contenuto variabile della scheda si clicca su X e si può riiniziare con un altro colore.

    Come colori elementari ho scelto due scale a dodici tinte pure standartizzate, una luminosa (lum, additiva, RGB), l'altra pigmentosa (pig, sottrattiva, RYB).
    Nel motorino sono rappresentate in alto da piccole caselle colorate. Cliccando su una di loro appare in fondo una superficie ingrandita con il relativo colore nonché tra loro i dati corrispondenti nelle tre notazioni HSL, RGB e Hex.

    Cliccando sulla "superfice ingrandita" del colore (inizialmente grigio), appare invece con ogni clic un nuovo colore casuale con i relativi dati.

    Conoscendo i dati di un colore in notazione hex, rgb o hsl, si può anche digitare i numeri nelle apposite caselle per vedere il colore corrispondente e per variarlo poi.

    3.  Convertitore sintetico

    Il seguente convertitore è il mio preferito per i quotidiani lavori con colori e tinte: permette la variazione immediata di dati in notazioni HSL, HyK e Hex# in entrata, di dati e colori luminosi e pigmentosi (additivi e sottrativi), di colori puri (luminosi) e di toni acromatici.
    In uscita fornisce i relativi dati CSS in notazione RGB, HSV e CMYK.

    Osservazioni: Questa applicazione serve per convertire dei dati di colori (luminosi) e tinte (pigmentose) a vicenda (e di far vedere i risultati ottici), allo scopo di effettuare con loro delle operazioni luminose e pigmentose (come miscele e armonie).
    Digitando un valore per uno dei dati (seguito da tabulatore ⇥) si adattano immediatamente i dati correlati e i colori:
    • H S L (Hue°-Saturation%-Luminosity%)
    • yH K (tonalità pigmentosa° - luminanza%)
    • Hex (numero esadecimale del colore #)
    Inoltre al colore corrispondente ai dati, appaiono anche i colori puro luminoso puro e le luminanze degli acromatici K e pK.
    Una riga separata dimostra le tinte pigmentose correlate e i loro acromatici ypK e ycK: la tinta pura pigmentosa e la tinta corrispondente al colore di entrata.
    Digitando sul bottone d si apre una finestra con i corrispondenti dati del colore e degli acromatici in notazione CSS per Hex#, RGB, HSL, HSV e CMYK. Cliccando su un campo di un colore appaiono i relativi dati nelle diverse notazioni.
    Il colore apparente può essere trasferito nell'entrata, azionando il bottone .
    I dati non sono numericamente precisi causa di arrotondamenti e funzioni di approssimazione e iterazione coinvolti nei calcoli. Gli errori non sono al solito percepibili dall'occhio umano però.

    4.  Convertitori disponibili sul web

    Ci sono moltissimi convertitori rilevabili dal web o integrati in programmi tipo PhotoShop o come parte di sistemi operativi e ausiliari di computer. Non mi soffermo: con GoogleSearch si possono trovare innumerevoli soluzioni.

    ◦⦆─────⦅◦

    4.1  Convertitore Dematté

    ↓ provare, funzionante

    Una soluzione professionale è il geniale ColorPicker di Peter Dematté che riporto di fianco come casella. Un clic apre una finestra a "bottoni scorrevoli" che permette di scegliere qualsiasi colore. Tutti i dati appaiono di fianco nella finestrina e come "Hex" nella casella. Si fa sparire la finestrina cliccando di nuovo nella casella.
    A proposito: la funzione è facilmente integrabile sulle vostre pagine Web, aggiungendo nella sezione <body> le seguenti righe di programma:

    <script type="text/javascript" src="http://www.pforster.ch/Colori/ColorCalc/Mischi/cP_v0.9/colorPicker.js"></script>
    <input type="text" value="AB37EF" onclick="colorPicker(event)"/>

    ◦⦆─────⦅◦

    4.2  Convertitore Mathis

    Una simile soluzione è il ColorPicker di Brandon Mathis che riporto di fianco come PopUp. Funziona a "bottoni scorrevoli" per tonalità H, saturazione S, luminosità L e anche trasparenza "A". Tutti i dati appaiono e sono modificabili singolarmente in tempo reale.
    Brandon Mathis ha scritto anche un'ottima introduzione del tema (in inglese sotto What's HSL? sulla sua pagina).

    ◦⦆─────⦅◦

    4.3  Convertitore Grinstead

    ↓ provare, funzionante

    TinyColor

    Convertitore HSL TinyColor

    HSL: Rv V Vb B Bg G Gy  Y  Yo  O  Or R
     
     H= 326 279 254 222 180 120 80 60 50 40 27  0 
    Hy= 330 300 270 240 210 180 150 120 90 60 30  0 




    Quello che mi ispira e mi serve di più è il motore di TinyColor (developed by Brian Grinstead). Per questo motivo l'ho incluso di fianco.

    Esempio: esadecimale #abcdef in altre notazioni ?

    ° digitare nella casella #abcdef
    ° appaiono le notazioni in rgb, hsv, hsl, ev. nome html, e il colore come sfondo.

    Si può lavorare con copia → incolla oppure cliccando su un link di notazione in testa e poi modificando dei dati nella casella.

    In fondo alla calcolatrice ho aggiunto una tabellina con i dodici colori basilari puri di una scala pigmentosa con i relativi valori di angolazione H e Hy.

    ◦⦆─────⦅◦

    4.4  Convertitore WorkWithColor


    Il convertitore più completo che ho trovato in Web è il Color Converter di WorkWithColor. Contiene inoltre:

    Basta digitare un valore in una del caselle del modulo. Appaiono immediatamente e senza ulteriori operazioni nelle altre caselle tutti i relativi dati e colori.


    5.  Terminologia

    → anche Teorie di colori



    I programmatori del Web per descrivere dei colori si servono di vari modelli cromatici e di relative notazioni; tutti in scala Rgb luminosa. I più noti sono:
    Modello tridimensionale irregolare (luminoso, additivo)

    • Lab: notazione "scientifica" che serve maggiormente come base di conversioni da e in altri sistemi cromatici e per scopi illuminativi.

    Modello cubico (luminoso, additivo)

    • Rgb: classica notazione del Web: rosso R, verde G, blu B come mescolanza luminosa delle tre tonalità: 0...255.
    • Hex: notazione Rgb in cifre esadecimali: 0...9_a...f.

    Modelli polari cilindrici, conici, sferici (luminosi, additivi)

    • Hsl: tonalità H, saturazione (cromaticità) S, luminosità L; notazione polare in gradi° e percentuali%: tonalità° 0...360°, saturazione% e luminosità% 0...100%. Usato maggiormente per determinare relazioni tra colori nelle arti grafiche.
    • Hsv: Tonalità H, saturazione (cromaticità) S, chiarezza V o B; notazione polare in gradi° e percentuali%: tonalità° 0...360°, saturazione% e luminosità% 0...100%. Maggiormente usati nelle arti grafiche per via dell' "intuitivo" nesso colore / numero.
    • Hysk: notazione non ufficiale (da me usata) per svolgere dei lavori con relazioni tra tinte pigmentose. Ad eccezione della scala della tonalità Hy al posto di H e della luminanza K al posto della luminosità L simile a Hsl.

    Modello cubico (pigmentoso, sottrattivo)

    • Cmy: ciano C, magenta M, giallo Y in mescolanza pigmentosa di tinte (sottrattiva). Notazione delle tre tinte in percentuale %: 0...100%.
    • Cmyk: classica notazione per ls stampa. Come Cmy ma con l'aggiunta di una quarta tinta nero K: 0...100%.

    6.  Annessi

    6.1  Fonti

    ◦⦆─────⦅◦

    6.2  Commenti

    alla pagina: Convertitori cromatici. Se non c'è una relativa casella, cliccare sul titolo.

    Peter18 December 2014, 09:02

    Test

    Commento 
    Autore 
    Enter code 753



    Edit - History - Print - Recent Changes - Search
    Page last modified on July 01, 2015, at 08:23 PM