Che cosa è un generatore di sfumature di colore?
Un generatore di sfumature di colore prende un colore di base e costruisce una scala monocromatica di versioni più chiare e scure di esso Da un singolo input come #4466EE, produce una fila di tinte che passo verso il bianco, una fila di sfumature che passo verso il nero, e una fila di toni che passo verso il grigio Ogni campione è un colore reale è possibile copiare come HEX, RGB, o HSL e cadere direttamente in CSS, un file di progettazione, o una configurazione di tema.
Le tre scale provengono dalle definizioni classiche usate nella teoria dei colori Una tinta è il colore di base mescolato con il bianco, che ne alza la leggerezza mantenendo la stessa tonalità Una tonalità è la base mescolata con il nero, che lo scurisce Un tono è la base mescolata con il grigio, che riduce la sua intensità e dà una versione del colore tenue e più sofisticata Avere tutti e tre da un input è ciò che ti consente di costruire una tavolozza coerente: un pulsante e il suo stato di hover, un insieme di serie di grafici o le superfici chiare e scure di un'interfaccia, tutte derivate da un unico colore di marca.
Il generatore viene eseguito interamente nel browser Il colore inserito viene analizzato e le scale vengono calcolate con JavaScript lato client, quindi non viene caricato nulla, non è presente alcun account e il tuo lavoro non viene mai tracciato Accetta i nomi dei colori HEX, rgb (), hsl () e CSS comuni, consente di impostare quanti passaggi contiene ciascuna scala e aggiorna ogni swatch istantaneamente Una volta caricata la pagina funziona offline.
Come utilizzare il generatore di sfumature di colore?
Inserisci un colore di base
Digitare o incollare un colore in qualsiasi sintassi comune: un codice HEX come #4466EE, un valore rgb () o hsl () o un nome di colore CSS come teal.
Imposta il numero di passi
Scegli quante varianti deve contenere ogni scala Più passi danno una sfumatura più fine dalla base verso il bianco, il nero o il grigio.
Rivedi le tinte, le sfumature e i toni
Lo strumento mostra tre scale affiancate, ciascuna campionessa etichettata con il suo valore HEX e la percentuale miscelata verso il colore target.
Copia il colore che ti serve
Fai clic su qualsiasi swatch per copiarne il valore Passa il formato di copia tra HEX, RGB e HSL per corrispondere alla sintassi prevista dal tuo progetto.
Caratteristiche principali
Tinte, sfumature e toni
Un colore di base produce tre scale complete contemporaneamente: tinte più chiare, tonalità più scure e toni tenui verso il grigio.
Ogni valore copiabile
Ogni swatch è disponibile come HEX, RGB e HSL, quindi puoi incollarlo direttamente in CSS, uno strumento di progettazione o un file tema.
Passaggi regolabili
Imposta da 2 a 20 passi per scala per controllare quanto è fine il gradiente tra il colore di base e il bianco, il nero o il grigio.
input perdonare
Accetta valori HEX, rgb () e hsl () a 3 e 6 cifre e nomi di colori CSS comuni, tutti normalizzati agli stessi campioni.
Frequently Asked Questions
Related Tools
Color Contrast Checker
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Color Mixer
Blend two colors with adjustable ratio and blend modes, and build a gradient between them
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Comments
0 comments
No comments yet. Be the first to share your thoughts!