nicetool.dev logo

Convertitore colori

Inserisci qualsiasi colore CSS (HEX, rgb(), hsl(), oklch(), cmyk() o un nome di colore).

#3B82F6
Formati
  • HEX#3B82F6
  • RGBrgb(59 130 246)
  • RGB (legacy)rgb(59, 130, 246)
  • HSLhsl(217 91.2% 59.8%)
  • HSVhsv(217 76% 96.5%)
  • HWBhwb(217 23.1% 3.5%)
  • OKLCHoklch(62.31% 0.188 259.81)
  • CMYKcmyk(76% 47% 0% 4%)

Contrasto WCAG

Aa 123

Testo su bianco

3.68:1

AAAA grandeAAA
Aa 123

Testo su nero

5.71:1

AAAA grandeAAA

Sfumature

Fai clic su una sfumatura per usarla.

Perché convertire i formati colore?

Designer e sviluppatori lavorano con i colori in molti formati: HEX negli strumenti di design, rgb() e hsl() in CSS, OKLCH nei design system moderni come Tailwind CSS v4 e CMYK per la stampa. Questo strumento li converte istantaneamente tra loro.

Funzionalità

  • • Output in HEX, RGB, HSL, HSV, HWB, OKLCH e CMYK
  • • Selettore colore nativo e cursore di opacità
  • • Rapporto di contrasto WCAG 2 su bianco e nero
  • • Palette automatica di tinte chiare e scure

Istantaneo e locale

Tutte le conversioni vengono calcolate nel browser senza richieste di rete.

Colori accessibili, zero tracciamento.

Come usare: Convertitore colori

  1. 1

    Inserisci un colore in qualsiasi formato CSS: #3B82F6, rgb(59 130 246), hsl(217 91% 60%), oklch(...), cmyk(...) o un nome come tomato. Puoi anche sceglierlo con il selettore.

  2. 2

    Regola l'opacità se ti serve trasparenza. Tutti i formati si aggiornano insieme, compresi HEX a 8 cifre e rgba.

  3. 3

    Copia il formato che ti serve: HEX per il passaggio dal design, rgb() o hsl() per il CSS, OKLCH per i design token moderni e CMYK come punto di partenza per la stampa.

  4. 4

    Controlla il contrasto WCAG con testo bianco e nero e clicca una tonalità della palette per esplorare varianti più chiare o più scure.

Esempi pratici

Dal design al codice

Il designer ti passa #0EA5E9 da Figma. Convertilo in hsl() per creare gli stati hover e active cambiando solo la luminosità.

Verifiche di accessibilità

Il testo corrente richiede un contrasto di almeno 4,5:1 secondo WCAG AA. Verifica un colore del brand prima di usarlo come sfondo di un pulsante con testo bianco.

Creare una scala di colori

Usa le tonalità generate come base per una palette da 50 a 900 in Tailwind CSS o nel tuo design system.

Materiale stampato

Converti un colore dello schermo in CMYK per parlare con la tipografia. È un'approssimazione: il colore esatto dipende da carta e profilo di stampa.

Domande frequenti

Differenza tra RGB e HSL?+

Entrambi descrivono gli stessi colori. RGB mescola luce rossa, verde e blu; HSL usa tonalità, saturazione e luminosità, più facili da regolare per le persone, per esempio schiarire un colore del 10%.

Perché usare OKLCH?+

OKLCH è percettivamente uniforme: variazioni uguali di luminosità appaiono ugualmente diverse all'occhio, a differenza di HSL. Tutti i browser moderni lo supportano e semplifica scale coerenti e temi scuri.

Che contrasto serve?+

WCAG AA chiede 4,5:1 per il testo normale e 3:1 per il testo grande (circa 24 px, o 19 px in grassetto). AAA alza i valori a 7:1 e 4,5:1.

Il valore CMYK è esatto?+

No. Convertire l'RGB dello schermo in CMYK senza profilo colore dà un'approssimazione matematica. Per stampe importanti per il brand chiedi una prova colore o usa riferimenti Pantone.