Conversione del colore
#ca4e4e
≈ Chestnut Rose
Variazioni
Lo scopo di questa sezione è quello di produrre accuratamente tinte (aggiunta di bianco puro) e sfumature (aggiunta di nero puro) del colore selezionato con incrementi del 10%.
Un consiglio da professionista: Usa le sfumature per gli stati hover e le ombre, le tinte per le luci e gli sfondi.
Sfumature
Variazioni più scure create aggiungendo il nero al colore di base.
Tinte
Variazioni più chiare create aggiungendo il bianco al colore di base.
Casi d'uso comuni
- • Stati dei componenti dell'interfaccia utente (hover, attivo, disattivato)
- • Creare profondità con ombre e luci
- • Creare sistemi di colori coerenti
Suggerimento per il sistema di progettazione
Queste variazioni costituiscono la base di una tavolozza di colori coesa. Esportale per mantenere la coerenza in tutto il tuo progetto.
Combinazioni di colori
Ogni armonia ha un proprio stato d'animo. Usa le armonie per pensare a combinazioni di colori che funzionano bene insieme.
Come si usa
Clicca su un colore per copiare il suo valore esadecimale. Queste combinazioni sono matematicamente provate per creare armonia visiva.
Perché è importante
Le armonie di colore creano equilibrio ed evocano emozioni specifiche nei tuoi progetti.
Complemento
Un colore e il suo opposto sulla ruota dei colori, +180 gradi di tonalità. Alto contrasto.
Diviso-complementare
Un colore e due adiacenti al suo complemento, a +/-30 gradi di tonalità rispetto al valore opposto al colore principale. Audace come un complemento diretto, ma più versatile.
Triadico
Tre colori distanziati in modo uniforme lungo la ruota dei colori, ognuno con 120 gradi di tonalità. È meglio lasciare che sia un colore a dominare e usare gli altri come accenti.
Analogo
Tre colori della stessa luminanza e saturazione con tonalità adiacenti sulla ruota dei colori, a 30 gradi di distanza l'uno dall'altro. Transizioni fluide.
Monocromatico
Tre colori della stessa tonalità con valori di luminanza +/- 50%. Sottile e raffinato.
Tetradico
Due serie di colori complementari, separati da 60 gradi di tonalità.
Principi di teoria del colore
Equilibrio
Utilizza un colore dominante, sostieni un colore secondario e accentua con parsimonia.
Contrasto
Assicura un contrasto sufficiente per la leggibilità e l'accessibilità.
Armonia
I colori devono lavorare insieme per creare un'esperienza visiva unitaria.
Controllo del contrasto dei colori
Testa le combinazioni di colori per verificare che siano conformi agli standard di accessibilità WCAG per la leggibilità del testo.
Colore del testo
Colore di sfondo
Contrasto
Standard WCAG
Tutti sono geniali. Ma se giudichi un pesce dalla sua capacità di arrampicarsi su un albero, vivrà tutta la sua vita credendo di essere stupido.