Selettore colori e convertitore di codici colore

Che cosa vogliono dire HEX, RGB e HSL

Ogni colore sullo schermo è una miscela di luce rossa, verde e blu. Il codice RGB riporta queste tre quantità così come sono: rgb(29, 78, 216) vuol dire poco rosso, un po’ di verde e molto blu, con ogni canale da 0 a 255. Il codice HEX riporta gli stessi tre numeri in base 16: 29, 78 e 216 diventano 1d, 4e e d8, quindi #1d4ed8. Un codice breve come #777 equivale a #777777, mentre uno a otto cifre aggiunge una quarta coppia per l’opacità.

L’HSL descrive lo stesso colore in un modo più comodo da regolare a mano: la tinta come angolo sulla ruota dei colori (0 è rosso, 120 verde, 240 blu), la saturazione come vivacità e la luminosità dal nero al bianco. hsl(224, 76%, 48%) è lo stesso blu di prima. L’HSV, che Photoshop e molte app di grafica chiamano HSB, usa il valore (o brillantezza) al posto della luminosità: un colore pieno sta al 100% e non al 50%.

L’OKLCH è il formato più recente del CSS. La sua luminosità è misurata come la percepisce l’occhio, per cui due colori con la stessa luminosità OKLCH sembrano davvero chiari allo stesso modo, cosa che con l’HSL non succede. È utile nei design system, quando un’intera palette deve passare dal chiaro allo scuro con passi regolari.

Quale formato usare e quando

• HEX per CSS, programmi di grafica e linee guida del marchio: è breve e lo accettano quasi tutte le app.
• RGB o rgba() quando ti serve la trasparenza in un codice datato o quando un programma chiede tre numeri.
• HSL per ritoccare un colore a mano: alzare la luminosità per l’effetto hover o abbassare la saturazione per una variante più spenta.
• HSV/HSB per ritrovare i valori del selettore di Photoshop, Figma o editor simili.
• OKLCH per palette e temi in CSS moderno.
• CMYK solo come riferimento indicativo per la stampa, come spiegato sotto.

Perché i colori a schermo e in stampa sono diversi

Lo schermo somma luce: rosso, verde e blu al massimo danno il bianco. La stampante invece la sottrae con inchiostri ciano, magenta, giallo e nero su una carta che è già bianca. Molti colori brillanti a video, soprattutto blu e verdi molto saturi, semplicemente non si possono stampare. I valori CMYK di questo strumento vengono da una formula di base che non tiene conto della tua carta né della stampante, perciò una tipografia che lavora con un vero profilo colore può usare numeri diversi. Per un lavoro importante chiedi una prova colore prima della tiratura.

Contrasto e accessibilità: le basi

Un testo con una luminosità troppo simile a quella dello sfondo si legge a fatica, soprattutto sullo smartphone sotto il sole o per chi ha una vista ridotta. Le linee guida WCAG misurano questa differenza con un rapporto di contrasto che va da 1:1 (nessuna differenza) a 21:1 (nero su bianco). Il grigio #777777 su bianco dà 4,47:1, appena sotto il 4,5:1 richiesto dal livello AA per il testo normale, ma sufficiente per i titoli grandi. La verifica non arrotonda mai per eccesso, quindi un 4,49 non passa. Inoltre il colore non deve essere l’unico segnale: quando rosso e verde indicano uno stato, affianca loro una parola o un’icona.

Tinte, tonalità scure e colori abbinati

Le tinte mescolano il colore con il bianco e le tonalità scure con il nero, a passi uguali: così ottieni subito varianti per hover, bordi e sfondi. Il colore complementare si trova dal lato opposto della ruota e risalta molto; gli analoghi stanno a 30° da una parte e dall’altra e insieme risultano armoniosi. Per vedere un colore a tutto schermo prova lo schermo bianco con un colore personalizzato. E se stai preparando le immagini per un sito con questa palette, puoi comprimere le immagini per alleggerire le pagine.