FileFlipColor Picker

Color Picker

Scegli e converti colori tra HEX, RGB, HSL, CMYK. Genera armonie e controlla il contrasto WCAG.

Anteprima

su bianco 3.7:1AA Failsu nero 5.7:1AA Pass

Rapporto di contrasto

#3b82f6
rgb(59, 130, 246)
rgba(59, 130, 246, 1)
hsl(217, 91%, 60%)
hsla(217, 91%, 60%, 1)
cmyk(76%, 47%, 0%, 4%)
--color-primary: #3b82f6

Armonie di colore

Complementare

Analoghi

Triade

Complementare diviso

Tetrade

Tinte e sfumature

Come usare

  • Clicca il selettore colore o inserisci un valore HEX/RGB/HSL
  • Tutti i formati si aggiornano automaticamente
  • Clicca un valore per copiarlo negli appunti

tools.colorPicker.editorialTitle

tools.colorPicker.editorialBody

Tool correlati

Generatore favicon
Immagine a Testo (OCR)
Contatore Parole

Domande frequenti

Cos'è un color picker e come funziona?
Un color picker è uno strumento che permette di scegliere un colore visivamente o inserendo valori e di vederlo in diversi formati (HEX, RGB, HSL, CMYK). Questo sincronizza tutti gli input in tempo reale e permette di copiare qualsiasi formato, generare armonie e controllare il contrasto per l'accessibilità.
Qual è la differenza tra HEX, RGB e HSL?
HEX è un modo compatto di scrivere l'RGB (es. #ff0000 per il rosso). RGB usa tre numeri da 0 a 255 per rosso, verde e blu. HSL descrive il colore con Tonalità (0–360), Saturazione (0–100%) e Luminosità (0–100%). Tutti e tre rappresentano lo stesso colore; questo strumento converte istantaneamente.
Cos'è il CMYK e quando si usa?
CMYK sta per Ciano, Magenta, Giallo e Nero. Si usa soprattutto per la stampa. Questo strumento mostra l'equivalente CMYK di qualsiasi colore per uniformare il branding tra web e stampa.
Cos'è il rapporto di contrasto WCAG?
Le linee guida WCAG definiscono rapporti di contrasto minimi tra testo e sfondo. AA richiede 4,5:1 per testo normale; AAA 7:1. Questo strumento mostra il rapporto su bianco e su nero e indica se passa AA o AAA.
Cosa sono le armonie di colore?
Sono insiemi di colori che stanno bene insieme: complementare, analoghi, triade, complementare diviso e tetrade. Lo strumento le genera dal colore scelto. Clicca uno swatch per impostarlo come colore principale.
Cosa sono tinte e sfumature?
Le tinte sono un colore con più bianco (luminosità alta); le sfumature con più nero (luminosità bassa). Lo strumento genera nove passi dal 10% al 90%, simili alle scale di Tailwind CSS.
Posso usare questo color picker per il web e il CSS?
Sì. Ottieni HEX, RGB, RGBA, HSL, HSLA e un snippet di variabile CSS. Copia qualsiasi valore nel tuo foglio di stile. Il controllo contrasto aiuta a scegliere colori di testo accessibili.
Cos'è una variabile CSS (custom property) per i colori?
Le custom property CSS permettono di definire un colore una volta e riusarlo (es. --color-primary: #1a2b3c; poi var(--color-primary)). Lo strumento mostra la forma variabile da incollare in :root.