Il selettore colore di Morph ti permette di scegliere qualsiasi colore visivamente e leggere immediatamente il suo codice nei formati che utilizzi davvero: HEX (`#3A7BD5`), RGB (`rgb(58, 123, 213)`) e HSL (`hsl(214, 64%, 53%)`). Trascina all'interno del campo colore per regolare saturazione e luminosità, usa lo slider dell'abbinamento per impostare il colore di base e copia il valore direttamente nel tuo CSS, file di progettazione o dove necessario.
Tutti e tre i codici descrivono lo stesso colore — sono semplicemente modi diversi di scriverlo, e ciascuno ha un ruolo:
Modifica il colore come preferisci e tutti e tre i codici rimarranno sincronizzati, così puoi prendere quello di cui ha bisogno il tuo progetto.
I designer lo usano per fissare una palette e copiare valori esatti in un file di design o in una guida stile. Gli sviluppatori front-end lo usano per prendere un HEX per un pulsante o convertire l'RGB di un designer in HSL per creare uno stato hover. Chiunque modifichi un tema, un colore di grafico o un modello email può trovare l'ombra esatta e copiarla in un clic. Poiché HSL è accanto a HEX, creare varianti più chiare o scure di un colore di base è molto più semplice che indovinare i numeri esadecimali.
Il selettore colore è codice puro browser — la matematica del colore e l'interfaccia funzionano entrambe sul tuo dispositivo. Non c'è caricamento, nessun account e nulla inviato a un server. Si carica velocemente e funziona offline una volta aperta la pagina, perché selezionare un colore e calcolarne i codici non richiede mai una connessione a Internet.
Quando copi un valore HEX, è pronto da incollare nel CSS come è. Se hai bisogno di un colore con trasparenza, converti in RGB e aggiungi un canale alpha (`rgba(...)`) nel tuo codice. Per creare una palette coerente, scegli un colore di base e usa il valore HSL di luminosità per generare tinte e tonalità spostando la luminosità su o giù mantenendo fissi tonalità e saturazione — questo mantiene un insieme di colori che sembrano una famiglia e non una raccolta casuale.
Mostra HEX, RGB e HSL per ogni colore che selezioni, tutti sincronizzati, quindi puoi copiare il formato che il tuo progetto richiede.
HSL rende facile regolare un colore in modo intuitivo — aumenta la luminosità per una tinta, abbassala per una tonalità o sposta la tonalità — senza indovinare i numeri esadecimali.
Seleziona il tuo colore, copia i valori RGB e aggiungi un canale alpha nel tuo codice come rgba(...) per impostare il livello di trasparenza desiderato.
No. Il selettore funziona interamente nel tuo browser. Non c'è caricamento e nulla è inviato a un server — funziona anche offline una volta caricato.
Scegli un colore di base e usa il suo valore HSL, quindi sposta la luminosità su o giù mantenendo fissi tonalità e saturazione per creare tinte e tonalità che sembrano un insieme.