Vai al contenuto principale
Bethemesh
Immagini e grafica

Generatore di palette di colori

Scegli un colore di base e un’armonia: la tavolozza compare in campioni HEX e HSL da copiare, con le variabili CSS.

  • Appunti

Integra questo widget

Personalizza il risultato, controlla l’anteprima e copia il codice.

Anteprima

Tipo di codice di integrazione

Codice da copiare

Responsive e ridimensionato automaticamente da Bethemesh.

Colore di base

Codice HEX, rgb() o hsl(); la trasparenza viene ignorata.

Tavolozza

    Variabili CSS

    Questo strumento ti è stato utile?

    Come funziona questo strumento?

    Una tavolozza armonica si basa su colori posti ad angoli precisi del cerchio cromatico: opposti per un contrasto forte, vicini per un’atmosfera morbida, distribuiti a triangolo per un insieme equilibrato. Questo generatore parte da un colore di base, il tuo o quello di un marchio, e calcola sei armonie classiche pronte da copiare in HEX, in HSL o come variabili CSS.

    Inserisci il colore di base in HEX, rgb() o hsl(), oppure sceglilo nel selettore. Viene convertito in tonalità, saturazione e luminosità (HSL); l’eventuale trasparenza viene ignorata.

    Nelle armonie di tonalità, saturazione e luminosità restano quelle della base e ruota solo la tonalità: Complementare aggiunge il colore a 180°, Analoga i vicini a −30° e +30°, Triadica i colori a 120° e 240°, Complementare divisa quelli a 150° e 210°, Tetradica (quadrato) quelli a 90°, 180° e 270°. Monocromatica mantiene tonalità e saturazione e crea cinque luminosità, da −30 a +30 punti, limitate tra il 5 e il 95 %.

    Ogni campione mostra il suo codice HEX e il valore HSL, con testo nero o bianco scelto in base alla luminanza per restare leggibile. Un clic copia il codice HEX; il blocco Variabili CSS riporta tutta la tavolozza come --color-1, --color-2…

    Come usare questo strumento

    1. Scegli il colore di base

      Digita un codice come #3366FF o usa il selettore di colore.

    2. Seleziona l’armonia

      Complementare, analoga, triadica, complementare divisa, tetradica o monocromatica: la tavolozza si aggiorna subito.

    3. Copia i colori

      Fai clic su un campione per copiarne il codice HEX, oppure copia il blocco di variabili CSS.

    Calcolo delle armonie

    Il colore di base è convertito in HSL; le armonie spostano la tonalità di un angolo fisso oppure spostano la luminosità.

    Rotazione della tonalità

    H_k = (H + δ_k) mod 360

    δ vale 180° (complementare), ±30° (analoga), 120° e 240° (triadica), 150° e 210° (complementare divisa), 90°, 180° e 270° (tetradica).

    Luminosità monocromatiche

    L_k = min(95, max(5, L + λ_k))

    λ vale −30, −15, 0, +15 e +30 punti percentuali.

    H, L
    tonalità (in gradi) e luminosità (in %) del colore di base
    δ_k
    spostamento di tonalità del k-esimo colore
    λ_k
    spostamento di luminosità del k-esimo colore monocromatico

    Casi d’uso

    Ampliare un colore di marca

    Trova un accento complementare o tonalità vicine attorno al blu di un logo.

    Creare sfumature per l’interfaccia

    Genera cinque luminosità della stessa tonalità per sfondi, bordi e stati al passaggio del mouse.

    Colorare un grafico

    Ottieni tre o quattro colori ben distinti per le serie di un grafico o di una mappa.

    Esempi

    Armonia complementare e triadica di un blu

    225 + 180 = 405, cioè 45°: un giallo dorato. In triadica, 225 + 120 = 345° (rosa lampone) e 225 + 240 = 465, cioè 105° (verde). Saturazione e luminosità restano al 100 % e al 60 %.

    Input

    Colore di base #3366FF (hsl(225, 100%, 60%)), armonia Complementare e poi Triadica

    Risultato

    Complementare: #3366FF e #FFCC33; triadica: #3366FF, #FF3366 e #66FF33

    Tavolozza monocromatica dello stesso blu

    La luminosità del 60 % diventa 30, 45, 60, 75 e 90 %: due toni scuri per testo o pulsanti, due chiari per gli sfondi.

    Input

    Colore di base #3366FF, armonia Monocromatica

    Risultato

    #002699, #0039E6, #3366FF, #809FFF, #CCD9FF

    Consigli e buone pratiche

    • Una tavolozza complementare molto satura vibra parecchio: riserva il secondo colore agli accenti (pulsanti, link) e non alle grandi superfici.
    • Parti da un colore poco saturo per una tavolozza più sobria: tutte le armonie di tonalità ne ereditano la saturazione.
    • Verifica il contrasto del testo su ogni colore prima di usarlo per i contenuti e prova la tavolozza con il simulatore di daltonismo.
    • Le armonie sono calcolate sul cerchio HSL: due colori con la stessa luminosità HSL possono sembrare più o meno chiari all’occhio (un giallo sembra più luminoso di un blu).

    Fonti e riferimenti

    Domande frequenti

    Quanti colori contiene ogni tavolozza?

    Due in complementare, tre in analoga, triadica e complementare divisa, quattro in tetradica e cinque in monocromatica. Il colore di base è sempre incluso.

    Quale armonia scegliere?

    Complementare per un contrasto marcato, analoga per un’atmosfera omogenea, triadica o tetradica per più colori distinti, monocromatica per un’interfaccia sobria.

    Perché tutti i colori hanno la stessa saturazione?

    Le armonie di tonalità ruotano solo la tonalità; saturazione e luminosità vengono dal colore di base, così l’insieme resta coerente.

    I codici copiati sono esatti?

    Sì. Ogni colore è calcolato in HSL e convertito in HEX con canali arrotondati all’intero, in un formato accettato da tutti i browser.

    Come uso le variabili CSS?

    Incolla il blocco :root nel tuo foglio di stile, poi usa var(--color-1), var(--color-2)… nelle tue regole.

    Il mio colore viene salvato o inviato?

    No. La tavolozza è calcolata nel tuo browser e non resta nulla dopo la chiusura della pagina.

    Strumenti correlati

    Continua con questi strumenti

    Strumenti simili o complementari a questo.

    Strumenti simili

    Convertitore di colori

    Converti un colore tra HEX, RGB e HSL con i valori equivalenti.

    Immagini e graficaUsa questo strumento

    Simulatore di daltonismo

    Visualizza un’immagine come può essere percepita con diversi tipi di daltonismo.

    Immagini e graficaUsa questo strumento

    Leggi anche