Strumenti per i colori

Selettore: il grande quadrato è una mappa saturazione-valore alla tonalità corrente — da sinistra a destra aumenta la saturazione, dall'alto in basso diminuisce la luminosità. Faccia clic in un punto qualsiasi per scegliere un colore. La sottile barra verticale a destra è il cursore della tonalità (da 0° a 360°) — lo faccia scorrere per cambiare la tonalità di base e il quadrato si ridisegna di conseguenza. Il lato destro mostra il colore scelto nei formati HEX, RGB e HSL — faccia clic su un valore qualsiasi per copiarlo.

Tavolozza: il selettore di colori a sinistra e la casella di modifica a destra memorizzano lo stesso colore base — sono sincronizzati nei due sensi (scelga un colore oppure digiti un valore hex, entrambi si aggiornano a vicenda). Le cinque righe della tavolozza sono tutte derivate da questo colore base ruotandone la tonalità sulla ruota dei colori: Complementare (tonalità +180°, contrasto massimo), Triadico (+120° / +240°, triade equilibrata), Tetradico (+90° / +180° / +270°, quattro colori rettangolari), Analogo (-30° / base / +30° / +60°, vicini armoniosi) e Complementare diviso (+150° / +210°, più morbido del complementare puro). Il primo campione di ogni riga è sempre il colore base stesso, e gli altri sono le sue varianti con la tonalità ruotata.

Converti: inserisca un colore valido — HEX (#3b82f6), funzione CSS (rgb(59,130,246) / hsl(217,90%,60%)) o nome del colore (dodgerblue) — e ottenga la conversione immediata in tutti i formati principali. Il menu dei formati suggerisce facoltativamente al parser il formato corretto se il rilevamento automatico ne sceglie uno sbagliato. L'output mostra HEX, RGB (0-255), HSL (gradi, %, %), HSV e CMYK. Faccia clic su un valore qualsiasi per copiarlo.

Daltonismo: carichi un'immagine e scelga un tipo di deficit della visione dei colori da simulare. Lo strumento applica una trasformazione con matrice della risposta dei coni a ogni pixel, rimappando i valori RGB per approssimare il modo in cui le persone con diverse forme di daltonismo percepiscono l'immagine. Il canvas a sinistra mostra l'originale, quello a destra la vista simulata. Il menu copre tre tipi di dicromazia (assenza di un pigmento dei coni: protanopia, deuteranopia, tritanopia), l'acromatopsia completa (nessuna visione dei colori) e tre tipi di tricromazia anomala (risposta debole dei coni). Le immagini a bassa risoluzione si caricano più velocemente.

Gradiente: questo è un costruttore visivo di gradienti CSS. Scelga un gradiente lineare (direzionale) o radiale (dal centro verso l'esterno), imposti l'angolo (0° = dal basso verso l'alto, 90° = da sinistra a destra) e definisca i punti di arresto dei colori. Ogni punto ha un selettore di colore ed è distribuito uniformemente (0%, 50%, 100% per tre punti). Faccia clic su + Punto per aggiungere punti di colore intermedi e gradienti più complessi. L'anteprima si aggiorna in tempo reale e il CSS generato è pronto da copiare qui sotto.

Contrasto: calcola il rapporto di contrasto WCAG 2.1 tra il testo in primo piano e il colore dello sfondo usando la formula della luminanza relativa dai valori sRGB (con correzione gamma). Il rapporto va da 1:1 (colori identici) a 21:1 (nero contro bianco). I risultati mostrano superato/non superato a tre livelli di conformità: AA Testo normale (rapporto ≥ 4,5:1), AAA Testo grande (rapporto ≥ 4,5:1 per testo ≥ 18 pt o grassetto ≥ 14 pt) e AAA Testo normale (rapporto ≥ 7:1). L'anteprima del testo di esempio si aggiorna in tempo reale mentre regola i colori.

Estrai: carichi un'immagine qualsiasi e lo strumento ne identifica la tavolozza di colori dominanti usando la quantizzazione dei colori. L'immagine viene ridotta a 100×100 px, poi ogni pixel viene inserito in un istogramma a 4 bit per canale (16 livelli per R/G/B = 4096 classi). I pixel trasparenti vengono saltati. Le classi più frequenti vengono ordinate per numero di pixel, e il colore centrale di ogni classe diventa un campione. Ogni campione mostra il suo valore HEX e la percentuale di pixel dell'immagine che rappresenta. Regoli il cursore del numero (2-12) per controllare quanti colori dominanti estrarre.

Miscela: miscela due colori nello spazio colore RGB per interpolazione lineare. Il cursore del rapporto determina la miscela: 0% è puro Colore 1, 100% è puro Colore 2, e 50% è una miscela uniforme. Ogni canale R, G, B viene interpolato indipendentemente (per es. rosso + blu al 50% dà viola). L'anteprima del risultato e i valori HEX/RGB si aggiornano in tempo reale mentre trascina il cursore o cambia uno dei due colori.

Temp: converte la temperatura di colore del corpo nero in kelvin nel colore visibile corrispondente usando l'algoritmo di approssimazione di Tanner Helland. Le temperature basse (1000-3000 K) producono toni caldi arancio/rosso come la luce di una candela e delle lampadine a incandescenza; l'intervallo medio (4000-6500 K) va dal bianco neutro alla luce del giorno; le temperature più alte (8000-40000 K) passano a un blu freddo come il cielo coperto e l'acqua profonda. L'etichetta sotto identifica la sorgente luminosa reale più vicina per ogni temperatura.

Nomi: sfoglia una raccolta combinata di 80 colori tradizionali cinesi (胭脂, 朱砂, 黛蓝 ecc. — nomi tratti dalla letteratura, dalla pittura e dalle tradizioni tintorie cinesi classiche) e di oltre 140 colori con nome CSS (la tavolozza web standard). Usi la casella di ricerca per filtrare per nome o valore HEX, oppure passi da una categoria all'altra con il menu a tendina. Faccia clic su un campione di colore per vedere un'anteprima grande con nome e codice HEX — faccia clic sul codice per copiarlo.