Softonic

Selettore Colore HEX

Fare un passo 1 / 4 Hex color

Designer e sviluppatori gestiscono lo stesso colore attraverso quattro notazioni centinaia di volte al giorno. Clicca ovunque nel campo di saturazione/valore 2D, trascina il cursore della tonalità o incolla un valore, e questo selettore mostra HEX, RGB, HSL, HSV e CMYK affiancati — con controlli di contrasto WCAG contro il nero e il bianco così sai subito se il colore è leggibile.

Come scegliere un colore

  1. 1

    Scegli una tonalità

    Trascina il cursore verticale della tonalità attraverso l'intero spettro 0-360°.

  2. 2

    Scegli saturazione e valore

    Clicca o trascina all'interno del quadrato 2D per impostare quanto è vivido e quanto è luminoso il colore.

  3. 3

    Affina con gli input

    Digita valori esatti in HEX, RGB, HSL, HSV o CMYK — tutti e cinque i campi rimangono sincronizzati.

  4. 4

    Controlla l'accessibilità e copia

    I rapporti di contrasto contro il nero e il bianco appaiono in linea; un clic copia la notazione di cui hai bisogno.

Notazioni di colore in pratica

Ogni modello di colore risponde a una domanda leggermente diversa.

Riferimento notazione

Notazione Componenti Dove viene utilizzato
HEX #RRGGBB CSS, strumenti di design, guide di marca
RGB rosso 0-255, verde 0-255, blu 0-255 CSS rgb(), editor di immagini
HSL tonalità 0-360°, saturazione %, luminosità % CSS hsl(), sistemi di design
HSV/HSB tonalità 0-360°, saturazione %, valore/luminosità % Photoshop, selettori di colore Figma
CMYK ciano %, magenta %, giallo %, nero % Stampa, pre-stampa
OKLCH luminosità %, croma, tonalità Palette del Modern CSS Color Module 4

Contrasto di accessibilità

WCAG 2.2 definisce i rapporti di contrasto minimi tra testo e sfondo:

Il selettore calcola il rapporto contro il bianco e contro il nero in tempo reale. Se un colore di primo piano personalizzato è critico, utilizza un controllore di contrasto dedicato per ogni coppia.

Suggerimenti

Domande frequenti

Photoshop applica un profilo colore (di solito sRGB per lo schermo, spesso diverso per la stampa). I browser rendono l’HEX non etichettato come sRGB. Se il tuo documento è impostato su Adobe RGB o ProPhoto, i valori dei pixel sono gli stessi ma il colore percepito cambia.

Sì — entrambi descrivono il rosso pieno, con rosso a 255 e verde e blu a 0. HEX è solo una notazione esadecimale a due cifre per ciascun valore del canale 0-255.

Scegli il tuo colore primario, passa a HSL, quindi varia la luminosità in passi del 10% mantenendo bloccati tonalità e saturazione. Otterrai una scala coerente di toni e ombre che si trovano sulla stessa tonalità.

I colori utilizzati di recente vengono conservati nella memoria locale del tuo browser in modo che sopravvivano a un aggiornamento. Niente viene inviato a un server e puoi cancellare la cronologia della palette in qualsiasi momento.

Strumenti correlati

Generatore di Palette di Colori

Genera una palette armoniosa di 4-8 colori da un colore di base utilizzando schemi complementari, analoghi, triadici e split-complement.

Generatore di Colori Casuali

Genera un colore RGB casuale, visualizza i valori hex, HSL e RGB, e copia qualsiasi formato con un clic.

Generatore di Palette di Colori Casuali

Genera palette di cinque colori basate su una tonalità di base casuale, con varianti complementari, analoghe e triadiche.

Formatter JSON

Formatta e stampa in modo elegante JSON con indentazione regolabile, chiavi ordinate e validazione in linea che evidenzia gli errori nella posizione esatta.

Generatore di Lettere Casuali

Genera lettere casuali dall'alfabeto inglese. Scegli il maiuscolo, includi duplicati o estrazioni uniche e imposta quanti.

Calcolatore di età

Calcola l'età esatta in anni, mesi e giorni a partire da una data di nascita, più giorni totali, ore e il conto alla rovescia per il prossimo compleanno.