ColorPicker converte i colori tra tutti i formati comuni e mostra tutti i valori che uno sviluppatore si aspetta: rapporti di contrasto, livelli WCAG, luminanza relativa, nomi CSS e codice pronto da copiare. Tutto avviene nel browser - nessun dato viene inviato a un server.
Il quadrato imposta saturazione e luminosità, lo slider della tonalità la famiglia di colori e lo slider alpha la trasparenza. Un clic su un campione, un preset o un colore recente lo carica. Il piccolo pulsante colore accanto al campo apre il selettore del sistema operativo.
Il campo comprende #4f8cff, #4f8c, #4f8cff80, rgb(79, 140, 255), rgba(79, 140, 255, 0.5), hsl(217, 100%, 65%), hsv(...), hwb(...), cmyk(...), lab(...), lch(...), oklab(...), oklch(...) e tutti i nomi CSS come rebeccapurple. Anche HEX breve a tre o quattro cifre funziona.
La tabella Formati elenca il colore in HEX, HEXA, RGB(A), HSL(A), HSV, HWB, CMYK, LAB, LCH, OKLAB, OKLCH più snippet per Tailwind, Swift e Android. Ogni riga ha un pulsante di copia e Copia tutto mette l'intero elenco negli appunti.
La sezione Contrasto mostra il rapporto WCAG 2.2 con bianco e nero puro, contrassegnato AAA (7:1), AA (4,5:1), AA18 (3:1, solo testo grande) o fail. I valori APCA (Lc) mostrano il modello percettivo moderno che dovrebbe sostituire i vecchi rapporti in WCAG 3. L'app indica anche il miglior colore di testo leggibile su uno sfondo.
Informazioni colore mostra HSL, HSV, OKLCH, la luminanza relativa in percentuale, il nome CSS esatto se il valore corrisponde a uno noto e il colore CSS con nome più vicino con la distanza Lab.
Armonie cromatiche deriva le varianti complementari, triadiche, analoghe, complementari divise, tetradiche e monocromatiche. Tonalità e sfumature costruisce una rampa di luminosità dal 95% allo 0%, e le varianti miscelate uniscono il colore con bianco o nero. Ogni campione è cliccabile.