Miscelatore di colori
Inserisci due colori HEX, scegli il numero di passaggi e il miscelatore mostra il colore iniziale, quello finale e i colori distribuiti in modo uniforme tra i due. È utile per scale rapide di interfaccia, pianificare gradienti, stati delle icone e verificare gli stop HEX esatti prima di passare a CSS o a un file di design.
Come viene calcolata la miscela HEX
-
1
Inserisci due colori HEX
Usa HEX a 3 o 6 cifre, con o senza #. Esempi: #FF6B35, #1E3A8A, F60.
-
2
Scegli 2-20 passaggi
Il primo campione è il primo colore e l’ultimo è il secondo; i campioni centrali vengono calcolati tra i due.
-
3
Interpola i canali RGB
Lo strumento converte HEX nei canali rosso, verde e blu, interpola ogni canale in modo lineare e arrotonda all’intero più vicino.
-
4
Leggi gli stop HEX
Ogni campione è mostrato con un codice HEX maiuscolo a 6 cifre che puoi selezionare e riutilizzare nel design o nel foglio di stile.
Cosa fa questo strumento
Il miscelatore lavora solo con la notazione colore HEX standard. Accetta HEX breve come #F60 e HEX completo come #FF6B35, normalizza i valori internamente e restituisce ogni risultato come codice HEX maiuscolo a 6 cifre.
La miscela è una semplice interpolazione lineare nei canali RGB/sRGB:
- Convertire ogni colore HEX in valori
R,GeBda 0 a 255. - Per ogni passaggio, calcolare
tda0a1. - Per ogni canale, usare
inizio + (fine - inizio) * t. - Arrotondare ogni canale all’intero più vicino e riconvertire il risultato in HEX.
Poiché gli estremi sono inclusi, 2 passaggi significa “solo inizio e fine”. Con 7 passaggi da #FF6B35 a #1E3A8A, l’output è:
| Passaggio | Posizione | HEX |
|---|---|---|
| 1 | 0% | #FF6B35 |
| 2 | 16,67% | #DA6343 |
| 3 | 33,33% | #B45B51 |
| 4 | 50% | #8F5360 |
| 5 | 66,67% | #694A6E |
| 6 | 83,33% | #44427C |
| 7 | 100% | #1E3A8A |
Usi consigliati
- Scale per stati UI: crea colori intermedi per hover, attivo, selezionato o disabilitato.
- Pianificazione dei gradienti: decidi gli stop HEX esatti prima di scrivere un gradiente CSS in un altro strumento.
- Varianti di icone e illustrazioni: mantieni coerente un piccolo set di colori collegati.
- Controllo design: confronta il punto medio calcolato per canale invece di stimarlo a occhio.
Limiti da ricordare
Questo miscelatore non accetta rgb(), hsl(), nomi di colori, valori alpha o HEX a 8 cifre. Non esporta RGB, HSL, LAB, LCH, snippet CSS, controlli di contrasto o valutazioni di accessibilità. Se ti servono, usa un convertitore, un verificatore di contrasto o un generatore di gradienti dopo aver ottenuto gli stop HEX.
Domande frequenti
Solo HEX: 3 o 6 cifre, con o senza # iniziale. Lo strumento non legge rgb(), hsl(), canali alpha o nomi di colori.
Sì. Il primo passaggio è il primo colore e l’ultimo passaggio è il secondo. Tutti gli altri passaggi sono i colori interpolati tra i due.
La miscela viene calcolata canale per canale in RGB/sRGB. È prevedibile e facile da riusare nel codice, ma non equivale a un’interpolazione percettiva LAB o LCH.
No. Mostra solo campioni e codici HEX. Usa i valori HEX generati nel tuo CSS o passali a un verificatore di contrasto se i rapporti di accessibilità sono importanti.
Strumenti correlati
Riferimento Tabella ASCII
Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.
Generatore di lettere casuali
Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.
Riferimento ai caratteri HTML
Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.
Riferimento scorciatoie da tastiera
Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.
Semplificatore di Algebra Booleana
Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.
Generatore di Palette di Colori
Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.