La maggior parte delle tavolozze inizia con un colore che a qualcuno già piace: un blu di marca, il verde di un logo, un campione di tessuto per un matrimonio La parte difficile è tutto dopo quella prima scelta Quali colori vanno con esso, quanti ne hai bisogno e perché un set che sembra bilanciato in uno strumento di design va in pezzi una volta che il testo si trova sopra?
L'armonia dei colori risponde alle prime due domande con una geometria semplice su una ruota dei colori Contrasto risponde alla terza, ed è quella che le persone saltano Questa guida copre entrambe, con valori HEX reali che puoi controllare, e mostra come il libero generatore di tavolozza di colori trasforma un colore di base in sei tipi di tavolozza.
tl; dr: Un generatore di tavolozze di colori ruota una tonalità di colore di base & #39;s attorno alla ruota dei colori HSL con angoli fissi (180 gradi per complementare, 120 per triadico, 90 per tetradico, 30 e 60 per analogo) o sposta la sua leggerezza per creare sfumature, tinte e set monocromatici Il generatore di tavolozze di colori Toolz fa questo lato client, gratuito, senza registrazione: scegli una base, scegli una delle sei modalità, fai clic su un campione per copiare il suo codice HEX o copia l'intero set come proprietà personalizzate CSS. L'HSL non è percettivamente uniforme, quindi controlla qualsiasi coppia di testo e sfondo rispetto ai rapporti di contrasto WCAG prima di spedirlo.
Che cosa è un generatore di tavolozza di colore?
Un generatore di tavolozze di colori è uno strumento che prende un colore di partenza e calcola i colori correlati da esso utilizzando regole fisse, quindi il set sembra coordinato senza tentativi ed errori Le regole provengono dalla ruota dei colori: i colori uno di fronte all'altro contrastano, i colori uno accanto all'altro si fondono e i colori distanziati uniformemente attorno al bilanciamento delle ruote.
Il generatore Toolz funziona in HSL, che descrive un colore come tonalità, saturazione e leggerezza La tonalità è un angolo da 0 a 360 gradi attorno alla ruota (rosso a 0, verde a 120, blu a 240) La saturazione è quanto è vivido il colore, dallo 0% di grigio al 100% di colore pieno La leggerezza va dallo 0% di nero al 100% di bianco L'HSL è definito per il web nel Modulo colore CSS Livello 4 specifica, e ogni browser lo converte agli stessi valori RGB.
Lavorare in HSL rende le regole di armonia facili da esprimere Un colore complementare è la stessa saturazione e leggerezza con 180 aggiunti alla tonalità Che è un'aggiunta invece di un sacco di giocherellare con cursori RGB.
Quali sono le sei modalità di armonia?
Ogni modalità è una ricetta per allontanarsi dal colore di base Ecco esattamente cosa fa il generatore Toolz in ognuna, preso dal suo codice sorgente.
| modo | Cosa cambia | Retinico | Posizioni tonalità |
|---|---|---|---|
| Sfumature & amp; Tinte | Solo leggerezza, impostata su 90, 75, 60, il valore base, 35, 22 e 12 | 7 | Tonalità base |
| monocromatico | Leggerezza e saturazione insieme | 5 | Tonalità base |
| complementare | La tonalità si capovolge di 180 gradi, con una base più chiara e un complemento più scuro | 4 | Base, base + 180 |
| analogo | Tonalità passi 30 gradi a tratta | 5 | -60, -30, base, +30, +60 |
| triadico | Hue distanziava un terzo del cerchio | 3 | Base, +120, +240 |
| Tetradico | Hue distanziata di un quarto del cerchio | 4 | Base, +90, +180, +270 |
Due dettagli contano in pratica Analogo, triadico e tetradico mantengono il colore di base's saturazione e leggerezza su ogni campione, quindi cambiano solo tonalità Ombre & amp; Tinte e Monocromatico mantengono la tonalità e cambiano leggerezza, quindi producono versioni chiare e scure di un colore.
Un esempio funzionante: ogni modalità da #4466ee
Il generatore si apre con #4466ee, un blu medio Convertito in HSL è hue 228, saturazione 83%, leggerezza 60% Ecco cosa restituisce ogni modalità per quella base Questi sono i codici HEX che lo strumento stampa, e puoi riprodurli con la conversione standard da HSL a RGB nella specifica CSS.
triadico aggiunge 120 e 240 alla tonalità: 228, poi 348, poi 108 (468 si avvolge fino a 108).
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
Notate il pattern Alla stessa saturazione e leggerezza, ruotando esattamente di un terzo della ruota si rimescolano gli stessi tre valori di canale RGB: 44, 66 e e e e trade places.
complementare aggiunge 180, che atterra sulla tonalità 48, un giallo caldo La modalità include anche una versione più chiara della base e una versione più scura del complemento, in modo da ottenere quattro campioni: #8aa0f4, #4466ee, #eecc44 e #d2ac14.
analogo passi di 30 gradi alla volta da 168 a 288: #44eecc, #44bbee, #4466ee, #7744ee, #cc44ee Si legge come una fascia dall'alzavola al blu al viola.
Tetradico aggiunge 90, 180 e 270: #4466ee, #ee44bb, #eecc44, #44ee77.
monocromatico mantiene la tonalità 228 e scambia la saturazione con la leggerezza in entrambe le direzioni: #c4cded, #879ae8, #4466ee, #0936ec, #0225b1.
Sfumature & amp; Tinte imposta la leggerezza su 90, 75, 60, il valore base, 35, 22 e 12: #d0d9fb, #8aa0f4, #4466ee, #4466ee, #0f2da3, #0a1c67, #050f38.
L'ultimo mostra una stranezza che vale la pena conoscere La scala di tonalità utilizza passi di leggerezza fissi più la leggerezza propria di base' Quando la base si trova esattamente al 90, 75, 60, 35, 22 o 12% di leggerezza, come fa #4466ee a 60, due campioni escono identici Spingi la leggerezza di base di un passo se desideri sette colori distinti.
Come scegli la giusta armonia per un lavoro?
Scegli l'armonia in base al contrasto tra le esigenze di progettazione Gli schemi a basso contrasto sembrano calmi e sono facili da mantenere coerenti; gli schemi ad alto contrasto attirano l'attenzione e sono facili da esagerare.
| traguardo | Buona modalità di avviamento | perché |
|---|---|---|
| Una scala di colori dell'interfaccia utente (da 100 a 700) | Sfumature & amp; Tinte | Una tonalità, passi prevedibili da luce a buio |
| Un marchio minimale, coeso | monocromatico | Tutto condivide una tonalità, nulla si scontra |
| Una call-to-action che spicca | complementare | La tonalità opposta è il contrasto più forte |
| Un look morbido e naturale | analogo | Tonalità vicine si fondono |
| Un set giocoso ed equilibrato | triadico | Tre tonalità equidistanti, nessuna dominante |
| Grafici con diverse serie | Tetradico | Quattro tonalità distinte che si riferiscono ancora |
Una regola pratica comune per i layout è lasciare che un colore copra la maggior parte dell'area, un secondo prenda una quota minore e un accento appaia con parsimonia. Funziona bene con tavolozze complementari e triadiche, dove dare a tutti i colori lo stesso spazio tende a sembrare forte.
Perché una tavolozza sembra equilibrata ma legge male?
Una tavolozza può sembrare bilanciata in HSL e fallire comunque sullo schermo perché la leggerezza HSL non è quanto un colore appare luminoso a una persona HSL tratta ogni tonalità al 60% di leggerezza come altrettanto luce La visione umana no.
L'esempio complementare sopra rende questo concreto. #4466ee e #eecc44 hanno entrambi una leggerezza HSL del 60% La loro luminanza relativa, la misura utilizzata dalle Linee guida per l'accessibilità dei contenuti Web per la luminosità percepita, è molto diversa: circa 0,17 per il blu e circa 0,62 per il giallo Il giallo è più volte più luminoso alla vista.
Tale divario si presenta come contrasto Utilizzando la formula WCAG, rapporto di contrasto = (L1 + 0,05) /(L2 + 0,05), dove L1 è il colore più chiaro's luminanza:
| Coppia | Rapporto di contrasto | WCAG AA per testo normale (4.5:1) |
|---|---|---|
| Testo bianco su #4466ee | circa 4,77:1 | Passaggi |
| Testo bianco su #eecc44 | circa 1,57:1 | mancato |
| Testo nero su #eecc44 | circa 13:4:1 | Passaggi |
Il generatore stesso reagisce già a questo: ogni campione sceglie il testo dell'etichetta scura o bianca da una stima della luminosità, motivo per cui gli campioni gialli ottengono etichette scure Per i progetti reali, esegui le coppie di testo e sfondo che intendi utilizzare tramite un controllore di contrasto colore. Le soglie provengono da WCAG2.2: 4.5:1 per il testo normale e 3:1 per il testo di grandi dimensioni al livello AA. Il guida al contrasto dei colori cammina passo dopo passo attraverso la matematica della luminanza.
Come si esporta una tavolozza come variabili CSS?
Fai clic su Copia CSS e il generatore inserisce la tavolozza corrente negli appunti come proprietà personalizzate CSS :root. I nomi sono numerati in passi di 100 in ordine di campione Per l'esempio triadico:
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
Incollalo nella parte superiore di un foglio di stile e fai riferimento ai colori ovunque:
.button-primary {
background: var(--color-100);
color: #ffffff;
}
La numerazione segue l'ordine di swatch, non la leggerezza In Shades & amp; Tinte modalità che capita di eseguire da chiaro a scuro, quindi --color-100 è la tinta più leggera In modalità triadica o analoga i numeri sono solo posizioni Rinominare le variabili in qualcosa di significativo come --brand, --accent e --surface una volta scelto, perché --color-200 non significa nulla per la prossima persona che legge il tuo CSS.
Per copiare un singolo colore invece, fai clic sul suo campione Il codice HEX va negli appunti e lo swatch mostra & quot;Copied" per un momento.
Puoi fare un matrimonio o una tavolozza pastello con esso?
Sì, purché porti il colore di partenza Non ci sono preset di nozze o temi curati, quindi la tavolozza è buona solo come la base che scegli.
Per un matrimonio, prendi un colore da qualcosa di reale: i fiori, il calcio del biglietto d'invito, un tessuto per abiti da damigella d'onore Inserisci il suo codice HEX e prova ogni modalità A partire da un verde salvia, #9caf88, Complementary restituisce #c2ceb6, #9caf88, una lavanda polverosa #9b88af e un #755e8d più profondo Quella lavanda contro la salvia è un abbinamento classico, e la matematica l'ha trovata in un clic.
Per i pastelli, parti da una base pallida e leggermente saturata come #a7c7e7 Analogo, Triadico e Tetradico mantengono quella leggerezza e saturazione su ogni campione, quindi l'intero set rimane morbido. Tonalità e amp; Tinte e Monocromatico muovono deliberatamente la leggerezza, quindi aggiungono colori scuri, fino a #0d1f30 per quel blu. Non esiste un cursore di luminosità separato; il colore di base è il controllo.
I colori dello schermo e i colori stampati differiscono Un monitor mescola luce rossa, verde e blu, mentre una stampante deposita inchiostro ciano, magenta, giallo e nero su carta e alcuni colori dello schermo luminoso non hanno un esatto equivalente di inchiostro Se una tavolozza sta andando su cancelleria, ordina una prova stampata prima di una corsa completa.
Quali sono gli errori e i casi di errore comuni?
La maggior parte dei problemi di tavolozza derivano dall'input o dalla fiducia eccessiva nella matematica.
La tavolozza diventa blu mentre digiti. Fino a quando la casella di testo non contiene un codice HEX valido, il generatore ricade su #4466ee Un valore semi-digitato come #9c oppure #9caf8 mostra la tavolozza blu predefinita Il campo accetta tre o sei cifre esadecimali, con o senza il #, così #9ca nel suo cammino verso #9caf88 mostra brevemente una tavolozza per #99ccaa.
Il campione di base è a un passo. I colori vengono arrotondati a numeri HSL interi prima di essere riconvertiti, quindi alcune basi non effettuano esattamente il viaggio di andata e ritorno. #c08081, ad esempio, ritorna come #c18182. La differenza è di un'unità per canale e invisibile, ma è importante se si corrisponde esattamente al codice di un marchio: mantenere l'HEX ufficiale per la base e utilizzare quelli generati per il resto.
Utilizzando ogni colore ovunque. Una tavolozza analoga a cinque colori è una gamma tra cui scegliere, non cinque colori che necessitano tutti di un lavoro.
Saltare il contrasto. Come mostrato sopra, due colori alla stessa leggerezza HSL possono differire più di tre volte in luminanza Controllare le coppie di testo.
Aspettandosi l'uniformità percettiva. I passi di ombreggiatura sono anche nella leggerezza HSL, non nella luce che hanno Se hai bisogno di una scala che sembra uniforme, regola i singoli passi a occhio o lavora in uno spazio percettivo come OKLCH, che CSS Color 4 definisce anche.
Come si confronta questo con altri strumenti di colore?
La generazione di tavolozze è un passo in un flusso di lavoro più lungo La tabella mostra quale strumento si adatta a ogni passaggio.
| Compito | strumento | Quello che ti dà |
|---|---|---|
| Trova o campiona un colore di partenza | Raccoglitore di colori | HEX, RGB e HSL per qualsiasi colore |
| Costruisci un insieme coordinato | Generatore di tavolozze di colori | Sei modalità di armonia, esportazione CSS |
| Realizza una scala a grana fine di un colore | Generatore di sfumature di colore | Una rampa dedicata per tinta e ombra |
| Frulla due colori | Miscelatore colore | Colori intermedi tra due ingressi |
| Verifica leggibilità del testo | Controcorrente di contrasto colore | Rapporto WCAG e passaggio o fallimento |
Se la scala conta più dell'armonia, il guida alla generazione di sfumature e tinte va più in profondità sulla costruzione di 50 a 900 rampe Ogni strumento di colore è elencato sul hub strumenti colore.
Il generatore è privato e funziona offline?
Sì. tutta la matematica HSL e il rendering vengono eseguiti nel browser con JavaScript. Non viene caricato nulla di digitato e dopo il caricamento della pagina generatore palette continua a funzionare senza connessione di rete Copia di uno swatch o il CSS conta per un limite di utilizzo giornaliero, che registra la modalità in cui ti trovavi, non i tuoi colori.
