Vai al contenuto

Strumenti colore FREE

Scegli, converti e genera colori, tavolozze, scale e sfumature, con il contrasto WCAG, suggerimenti accessibili e la simulazione del daltonismo. Tutto viene calcolato nel tuo browser.

Uso gratuito Nessuna registrazione Privacy al primo posto

HEX, rgb(), hsl(), hwb(), oklch(), oklab(), lab(), lch(), color(display-p3 ...) o un nome di colore CSS.

Recenti

Selettore e conversioni

217°
100%

Tutte le notazioni

Dettagli tecnici

Contrasto

APCA (bozza, informazione aggiuntiva)

APCA è il modello di contrasto percettivo redatto per WCAG 3. Oggi non è un requisito di conformità e diverge da WCAG 2 in entrambe le direzioni, perciò è mostrato come informazione aggiuntiva e mai come esito positivo o negativo.

Come viene

Tavolozze

Quali coppie sono leggibili

Ogni colore come testo su ogni altro. Il numero è il rapporto di contrasto WCAG; AA è 4,5:1 per il testo normale e 3:1 per il testo grande e i componenti di interfaccia.

Copia la tavolozza

Scale

Undici passi costruiti in OKLCH, così gli scatti sembrano regolari e non sono solo numeri regolari. Il risultato ha la forma che un framework di utilità si aspetta al posto di una scala; è la scala di questo strumento e non la tavolozza di alcun framework.

Regola la scala

Sfumature

Da un'immagine

Trascina qui un'immagine, oppure scegline una

Viene letta in questa scheda e mai caricata. Non resta nulla una volta lasciata la pagina.

Visione dei colori

Un modello di ciò che una coppia di colori perde nelle forme comuni di daltonismo, calcolato con la proiezione di Vienot, Brettel e Mollon. È una simulazione e non una fotografia di ciò che vede una persona specifica.

Coppie che smettono di essere distinguibili

Prese dalla tavolozza. Sono elencate solo le coppie chiaramente diverse nella visione normale: due colori che già si somigliano sono una scelta di progetto, non un rilievo.

Ogni conversione, ogni tavolozza e ogni valore di contrasto di questa pagina è calcolato nel tuo browser. Un'immagine trascinata qui viene letta su un canvas in questa scheda e non viene mai caricata.

Ambito e limiti

Che cosa dicono questi numeri e che cosa non dicono

Calcolato qui, da formule pubblicate

Le conversioni seguono CSS Color Level 4, curva di trasferimento sRGB reale compresa anziché un'approssimazione, e il contrasto segue la definizione di WCAG 2.2. Una coppia di colori che soddisfa il requisito di contrasto non rende accessibile una pagina: il contrasto è un criterio di successo fra molti, e questo strumento misura quello. Tutto gira nel tuo browser e nulla viene inviato da nessuna parte.

Aiuto

FAQ

I miei colori o le mie immagini vengono inviati da qualche parte?

No. Ogni conversione, ogni tavolozza, ogni scala e ogni valore di contrasto viene calcolato in questa scheda. Un'immagine viene letta qui su un canvas e non viene mai caricata; i colori recenti e la tua tavolozza restano nella memoria propria di questo browser, e puoi cancellare entrambi.

Perché OKLCH e non HSL?

Perché la luminosità di HSL è una media dei canali, non qualcosa che l'occhio misura. Ruota una tinta di 120 gradi in HSL e uno dei tre risultati esce visibilmente più scuro degli altri; fallo in OKLCH e i tre si leggono come una famiglia. Lo stesso vale per una scala di tinte: passi uguali di luminosità HSL si addensano alle estremità. HSL resta comunque mostrato, perché è il modello in cui è scritto moltissimo codice.

Superare la verifica del contrasto rende accessibile la mia pagina?

No, e qui la formulazione è attenta su questo. Una coppia di colori soddisfa un requisito di contrasto. Il contrasto è un criterio di successo fra molti - ordine di focus, etichette, percorsi da tastiera, movimento e struttura sono altrettanti - e una pagina dal contrasto perfetto può restare inutilizzabile. Usalo per chiudere la questione del colore, non l'intera questione.

Che cos'è APCA e perché sta in un pannello a parte?

È il modello di contrasto percettivo redatto per WCAG 3. Modella come il contrasto si legge davvero a una data dimensione e a un dato peso, cosa che WCAG 2 non fa, ma è una bozza e oggi nulla viene misurato su di essa. Metterlo accanto ai verdetti WCAG come un pari travisrebbe entrambi, quindi sta dietro un pannello a scomparsa e dichiara che cos'è.

Quanto è fedele la simulazione del daltonismo?

È la proiezione di Vienot, Brettel e Mollon, applicata in luce lineare, il modo consueto di modellare la dicromia. Mostra che cosa perde una COPPIA di colori, che è la domanda che conta: se due cose restano distinguibili. È un modello di una forma della condizione, non una fotografia di ciò che vede una persona specifica, e il pannello lo dice.

La scala generata si può incollare nella configurazione del mio framework?

Sì: l'esportazione comprende una forma che entra dove un framework di utilità si aspetta una scala di colori, accanto a proprietà personalizzate CSS, variabili SCSS e JSON. La scala è propria di questo strumento, costruita in OKLCH a partire dal colore che le hai dato; non è la tavolozza di nessun framework e non viene presentata come tale.

Costruisci un web migliore, più in fretta.

Sviluppiamo software e soluzioni su misura per le tue esigenze.

Contattaci