titolo: & quot; Color Converter: Convertire HEX, RGB, HSL, HWB e CMYK nel modo giusto" slug: strumento di guida del convertitore di colore: categoria del convertitore di colore: tipo di colore: cluster
Convertitore di colore: Convertire HEX, RGB, HSL, HWB e CMYK nel modo giusto
La prima volta che un colore mi ha morso era in tiratura Avevo costruito una pagina di destinazione per uno dei miei prodotti WordPress, firmato sul marchio blu nel browser, e poi inviato lo stesso & quot; blue" a una tipografia per un lotto di adesivi Ciò che è tornato è stato un blu scuro piatto, leggermente ingrigito che non assomigliava per niente allo schermo Nessuno aveva convertito il colore dello schermo RGB in CMYK, quindi la stampante ha indovinato, e l'ipotesi era sbagliata Quello è stato il giorno in cui ho smesso di trattare un colore come una singola stringa e ho iniziato a trattarlo come un valore che deve essere parlato in diverse lingue contemporaneamente.
Questo è esattamente lo scopo di un convertitore di colore Gli dai un colore in una sintassi e ti restituisce ogni altra sintassi, quindi il blu nel tuo CSS, il blu nel tuo file di progettazione e il blu che riceve la tua stampante sono tutti dimostrabilmente dello stesso colore Ho costruito il convertitore di colore su Toolz.dev perché ero stanco di incollare i codici esadecimali in tre siti diversi per ottenere RGB, HSL e CMYK separatamente.
tl; dr: Un convertitore di colore prende un colore e lo riesprime in HEX, RGB, HSL, HWB e CMYK contemporaneamente, oltre al nome di colore CSS più vicino Usa RGB e HEX per schermi, HSL o HWB quando vuoi spingere un colore a mano e CMYK per la stampa Il convertitore Toolz.dev funziona interamente nel tuo browser, mantiene intatto il canale alfa e non carica mai ciò che incolli.
Che cosa è un convertitore di colore?
Un convertitore di colore analizza un colore scritto in qualsiasi sintassi CSS comune e calcola il suo equivalente nelle altre. Quali sintassi esistono ed esattamente come ciascuna converte è definita da Modulo colore CSS Livello 4. I calcoli non sono complicati, ma farlo a mano è noioso e soggetto a errori Conversione #4466EE per RGB significa dividere le sei cifre esadecimali in tre coppie e leggere ciascuna coppia come un numero in base 16: 44 ha 68 anni, 66 ha 102 anni e EE fa 238, dando rgb(68, 102, 238). Andare dall'altra parte significa dividere ogni canale in una stringa esagonale a due cifre e unirli Arrivare a HSL significa normalizzare i canali, trovare il minimo e il massimo e calcolare tonalità, saturazione e leggerezza da quelli Non vuoi farlo nella tua testa alle 2 del mattino.
Il valore di un convertitore non è solo salvare l'aritmetica Sta garantendo la coerenza Quando uno strumento produce tutti i formati da un singolo colore analizzato, non c'è alcuna possibilità che l'RGB che hai copiato e l'HSL che hai copiato descrivano colori leggermente diversi perché hai arrotondato in modo diverso tra i passaggi Una fonte, una verità, ogni formato.
Perché esistono anche i formati colore?
Ogni formato di colore sopravvive perché è veramente buono in un lavoro.
RGB è il modo in cui funzionano gli schermi Un display emette luce rossa, verde e blu e mescolando questi tre a diverse intensità si produce ogni colore che si vede Ciò rende RGB la lingua madre del browser: qualunque sia la sintassi che si scrive in CSS, il motore di rendering lo risolve in RGB prima che illumini un pixel.
HEX è RGB in stenografia. #4466EE è uguale a rgb(68, 102, 238), appena imballato in una stringa compatta che è facile da incollare in un foglio di stile o in uno strumento di progettazione È popolare perché è breve e inequivocabile, non perché è più capace.
HSL descrive un colore per tonalità, saturazione e leggerezza È il formato che raggiungo quando sto sintonizzando manualmente un'interfaccia utente Per rendere un pulsante più scuro al passaggio del mouse, faccio cadere la leggerezza di alcuni punti e lascio perdere tonalità e saturazione. Cercare di farlo in RGB grezzo significa cambiare tutti e tre i canali in quantità disuguali e sperare che la tonalità non vada alla deriva.
HWB, definito nella specifica CSS Color Module Level 4 (Modulo colore CSS Livello 4)https://www.w3.org/TR/css-color-4/), descrive la stessa tonalità da quanto bianco e quanto nero sono mescolati in Si mappa in modo pulito a come le persone pensano effettivamente a tinte e sfumature: aggiungere bianco per schiarire, aggiungere nero per scurire È più recente, quindi lo uso soprattutto quando la leggibilità del codice conta più della portata del browser.
CMYK è il modello di stampa Le stampanti depongono inchiostro ciano, magenta, giallo e nero su carta bianca e ogni inchiostro sottrae la luce anziché aggiungerla Ecco perché un colore dello schermo vivido può sembrare più opaco su carta: le gamme di colori che i due modelli possono produrre, chiamate gamut, sono diverse Un convertitore ti dà l'approssimazione CMYK, ma non può inventare inchiostro che non esiste.
Come faccio a convertire HEX in RGB e viceversa?
La conversione più comune, con un ampio margine, è HEX in RGB e RGB in HEX. Ecco il metodo manuale in modo da poter controllare la sanità mentale di qualsiasi strumento, incluso il mio.
Per convertire HEX in RGB, dividi le sei cifre in tre coppie e leggi ciascuna come un numero esadecimale da 0 a 255. abbreviazione di tre cifre come #46E si espande raddoppiando ogni cifra a #4466EE primo. Per convertire RGB in HEX, prendi il valore di ciascun canale, convertilo in una stringa esadecimale a due cifre con uno zero iniziale, se necessario, e uniscili dietro un hash.
Piuttosto che farlo ripetutamente, incolla il valore nel convertitore colore e leggi ogni formato in una volta Se hai anche bisogno di scegliere un colore visivamente e vederlo aggiornare dal vivo, il raccoglitore colore è il punto di partenza migliore e i due strumenti condividono lo stesso nucleo di conversione in modo che i loro numeri siano d'accordo.
Quando devo usare CMYK invece di RGB?
Usare CMYK solo quando l'output è inchiostro su carta Biglietti da visita, adesivi, imballaggi e qualsiasi lavoro di stampa commerciale si aspettano valori CMYK, e l'invio di RGB a una stampante significa che la stampante o il suo software converte per voi, spesso con risultati che non si è firmato su Quello è stato il mio errore adesivo in una frase.
Usa RGB, e la sua stenografia HEX, per qualsiasi cosa verrà visualizzata su uno schermo: siti web, app, grafica social, video Se un progetto si estende su entrambi i mondi, mantieni RGB o HEX come fonte di verità e genera l'approssimazione CMYK con un convertitore nel momento in cui lo distribuisci per stampare, così puoi osservare i valori CMYK e contrassegnare qualsiasi colore che si sposterà male prima che ti costi una tiratura.
Come si confrontano i formati colore?
| formato | Meglio per | Supporto alfa | esempio |
|---|---|---|---|
| stregato | CSS compatto, trasferimento del design | Solo modulo a 8 cifre | #4466EE |
| RGB/RGBA | Schermi, colore programmatico | Sì (RGBA) | rgb(68, 102, 238) |
| HSL/HSLA | Tonalità e leggerezza della messa a punto a mano | Sì (HSLA) | hsl(228, 83%, 60%) |
| HWB | Tinte e sfumature leggibili | Sì (con barra alfa) | hwb(228 27% 7%) |
| cmyk | Stampa, inchiostro su carta | no | cmyk(71%, 57%, 0%, 7%) |
Vale la pena tenere presente la tabella perché si mappa perfettamente su un flusso di lavoro: progettazione in HEX o pick visivamente, sintonizzazione in HSL o HWB, ship to screens in RGB o HEX e conversione in CMYK solo al limite di stampa.
Come viaggia la trasparenza tra i formati?
Alpha è dove molte conversioni vanno silenziosamente male Il canale alfa controlla l'opacità, da 0 (completamente trasparente) a 1 (completamente opaco) RGBA e HSLA lo portano come quarto valore, e un HEX a 8 cifre lo porta come quarta coppia: #4466EECC è blu con circa l'80% di opacità, perché CC è 204 su 255. esadecimale semplice e cmyk() non avere alcun canale alfa.
Il convertitore Toolz.dev preserva l'alfa attraverso ogni formato che lo supporta Se incolli rgba(0, 0, 0, 0.5) tu ottieni #00000080 nella riga HEXA e hsla(0, 0%, 0%, 0.5) nella riga HSLA, tutti descrivono lo stesso nero semitrasparente Quando si copia invece la riga HEX o CMYK semplice, si sta copiando il colore completamente opaco, che è una scelta deliberata, non un bug: quei formati non possono esprimere opacità, quindi mostrano il colore come se fosse solido Quando la trasparenza è importante, copia da una riga alfa-aware.
Posso convertire un nome di colore CSS?
Sì, e funziona in entrambe le direzioni Digitare una parola chiave come tomato, rebeccapurple, o slategray e il convertitore lo risolve in HEX, RGB, HSL, HWB e CMYK. Il set completo di 148 colori con nome proviene dalla specifica CSS Color Module Level 4, quindi i valori corrispondono esattamente a ciò che risolve un browser.
Andare dall'altra parte è dove diventa veramente utile Incolla un colore numerico e il convertitore riporta il nome CSS esatto se uno corrisponde, e mostra sempre il colore con nome più vicino per distanza RGB quando non lo fa Quella corrispondenza più vicina è utile per denominare le variabili e scrivere documenti di progettazione leggibili: #663399 torna come rebeccapurple, e qualcosa di vicino ad esso ritorna come & quot; il più vicino: rebeccapurple" così sai in che quartiere ti trovi.
In che modo questo si adatta a un flusso di lavoro di progettazione reale?
Ecco come utilizzo effettivamente il colore in un progetto e dove si adatta ogni strumento.
Inizio scegliendo un colore primario, di solito visivamente con il raccoglitore colore. Una volta che ho il mio marchio blu, lo eseguo attraverso il convertitore colore per bloccare i valori HEX, RGB, HSL e CMYK in un unico posto, incollo quelli nel documento del sistema di progettazione in modo che ogni compagno di squadra e ogni fornitore lavori con gli stessi numeri.
Poi costruisco la palette Le tonalità di supporto provengono dalla leggerezza di spinta in HSL, e controllo ogni coppia di testo su sfondo con il controllore di contrasto colore quindi la tavolozza è accessibile prima della spedizione, non dopo un reclamo Quando ho bisogno di uno sfondo fiorire, inserisco due di quei colori nel generatore gradiente.
Infine, per una spaziatura e una tipografia reattive attorno a tutto quel colore, abbino la tavolozza con il Generatore di morsetti CSS quindi le dimensioni si adattano in modo uniforme quanto i colori sono coerenti. Colore e layout sono due metà dello stesso smalto.
Se ti interessa dove vanno i tuoi dati mentre lavori, vale la pena leggere come questi strumenti lo gestiscono Tutto nel convertitore di colore funziona lato client, una scelta di design di cui ho scritto nel guida alla privacy dei dati negli strumenti online, e si trova accanto al resto del mio kit quotidiano nel Toolkit per sviluppatori web.
È abbastanza preciso per la produzione?
Per il lavoro sullo schermo, sì, senza qualificazione HEX, RGB, HSL e HWB sono tutte rappresentazioni esatte dello stesso colore sRGB, quindi convertendo tra loro i viaggi di andata e ritorno in modo pulito: converti un colore in HSL e ritorno e atterri sulla stessa tripla RGB, dai o prendi un'unità di arrotondamento su un canale. Quell'arrotondamento è inerente alla rappresentazione di un colore continuo nei canali interi, non è un difetto in nessuno strumento.
Per CMYK, tratta l'output come un'approssimazione solida e standard piuttosto che come una prova gestita dal colore Il vero colore di stampa dipende dalla carta specifica, dagli inchiostri e dal profilo ICC utilizzato dalla stampante, che nessuno strumento basato su browser può conoscere Il convertitore utilizza la formula CMYK standard ingenua, che è esattamente ciò che la maggior parte degli strumenti di progettazione mostra per impostazione predefinita ed è un punto di partenza affidabile Quando un lavoro è critico per il colore, ottieni una prova fisica dalla stampante prima della corsa completa Questa è la lezione che i miei adesivi greyed-navy mi hanno insegnato, ed è più economico imparare da questo paragrafo che da una scatola di adesivi sbagliati.
E gli spazi colore più recenti come LAB e OKLCH?
Se segui da vicino i CSS hai visto lab(), lch(), oklab(), e oklch() appaiono nei fogli di stile e negli strumenti di progettazione Questi provengono dalla specifica CSS Color Module Level 4 e risolvono un vero problema: RGB, HSL e HWB sono tutti legati al modello di schermo sRGB, quindi due colori che sembrano ugualmente diversi all'occhio possono essere distanze numeriche molto diverse, e un display ad ampio gamut può mostrare colori che sRGB semplicemente non può descrivere Gli spazi colore OK sono percettivamente uniformi, il che li rende eccellenti per generare tavolozze a gradini uniformi e per interpolare gradienti che non si confondono nel mezzo.
Ho deliberatamente mantenuto questo convertitore focalizzato sui formati che incolli nei CSS di produzione quotidiana e passa alle stampanti: HEX, RGB, HSL, HWB e CMYK. Questo è l'insieme che copre la stragrande maggioranza delle attività reali e ognuna di esse si mappa in modo pulito sullo stesso colore sRGB, quindi le conversioni tra loro sono esatte e reversibili. Gli spazi di gamma più ampi implicano decisioni di mappatura dei gamut che sono facili da sbagliare, e mescolarle in un semplice convertitore scambierebbe chiarezza per la copertura di cui la maggior parte delle persone non ha bisogno.
La regola pratica che seguo: raggiungi OKLCH quando stai generando algoritmicamente una tavolozza o un gradiente e desideri passi percettivamente uniformi e rimani con HEX, RGB e HSL per il lavoro quotidiano di scrittura dei componenti Quando progetti in OKLCH, converti i colori di ancoraggio risultanti in HEX o RGB con il tuo strumento di progettazione prima del trasferimento, quindi i valori nel tuo foglio di stile sono gli stessi che questo convertitore e i tuoi compagni di squadra possono leggere.
Domande frequenti
Come faccio a convertire HEX in RGB?
Dividere il codice HEX a sei cifre in tre coppie e leggere ciascuna come un numero esadecimale da 0 a 255. in #4466EE, 44 fa 68 (rosso), 66 è 102 (verde) e EE fa 238 (blu), dando rgb(68, 102, 238). Incolla il codice HEX nel convertitore e il valore RGB viene visualizzato immediatamente accanto a ogni altro formato.
Come faccio a convertire RGB in HEX?
Converti ciascuno dei valori rosso, verde e blu (da 0 a 255) in un numero esadecimale a due cifre e uniscili dopo un hash. rgb(68, 102, 238) diventa #4466EE. Il convertitore lo fa istantaneamente e ti dà anche il modulo HEXA a 8 cifre quando è presente un valore alfa.
Qual è la differenza tra HSL e HWB?
HSL descrive un colore per tonalità, saturazione e leggerezza, mentre HWB descrive la stessa tonalità per quanto bianco e quanto nero sono mescolati in esso HWB è spesso più intuitivo per tinte e sfumature: l'aumento del bianco schiarisce il colore e l'aumento del nero lo oscura Entrambi si mappano allo stesso identico valore RGB, in modo da poter passare da uno all'altro liberamente.
Quando devo usare CMYK invece di RGB?
Usa CMYK per la stampa e RGB per gli schermi CMYK è un modello sottrattivo basato su inchiostri ciano, magenta, giallo e nero, quindi è ciò che si aspettano le stampanti commerciali RGB è additivo e descrive la luce emessa dai display Un colore dello schermo ha un'approssimazione CMYK, ma le due gamme differiscono, quindi i colori dello schermo vividi possono sembrare più opachi nella stampa.
Il convertitore supporta la trasparenza?
Sì. Fornire un valore alfa attraverso rgba(), hsla(), o un HEX a 8 cifre e l'opacità è preservata in ogni uscita alfa-aware Formati senza canale alfa, come HEX semplice e cmyk(), mostra il colore completamente opaco, quindi controlla l'uscita RGBA o HEXA quando la trasparenza è importante.
Posso convertire un nome di colore CSS?
Sì. Digitare una parola chiave CSS come tomato, rebeccapurple, o slategray e il convertitore lo risolve in HEX, RGB, HSL, HWB e CMYK. Funziona anche al contrario: incolla un colore numerico e riporta il nome CSS esatto se uno corrisponde, più il colore con nome più vicino come riferimento.
Il convertitore di colore è gratuito e privato?
Sì. Il convertitore è completamente gratuito senza iscrizione, senza limiti e senza filigrane. Tutto l'analisi e la conversione vengono eseguite nel browser utilizzando JavaScript lato client, quindi i colori immessi non lasciano mai il dispositivo e lo strumento continua a funzionare offline una volta caricata la pagina.
