Design e colore

Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.

Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.

Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.

Costruisce una tavolozza armonica a partire da un colore di base, con le regole del complementare, della triade e degli analoghi.

Ricava il lato mancante per una proporzione data ed elenca i formati standard che le corrispondono.

Compone ombre di riquadro e di testo su più livelli con anteprima dal vivo e restituisce il CSS.

Costruisce gradienti lineari, radiali e conici trascinando i punti di arresto ed esporta il CSS in sRGB o in OKLCH.

Dispone una griglia in modo visivo con le aree nominate e restituisce il CSS di grid-template.

Costruisce da un colore la rampa 50–950 e la rispecchia in una scura, così ogni coppia di token conserva il proprio contrasto.

Mette una schermata dentro la cornice di un telefono, di un tablet, di un portatile o di un browser, con sfondo e ombra.

Cambia ogni proprietà flex su un esempio dal vivo e mostra il CSS e che cosa ha cambiato ciascuna proprietà.

Calcola l’espressione clamp() che fa variare una dimensione con continuità fra due larghezze di viewport.

Converte TTF e OTF in WOFF e viceversa dentro il browser e scrive la regola @font-face che serve; il WOFF2 richiede Brotli, non lo fa e ti indirizza a un programma da scrivania.

Propone coppie di font per titoli e testo prese dagli stack di sistema, le fa vedere con il tuo testo e ti passa il CSS.

Taglia un font TrueType lasciando solo i glifi che il tuo testo usa davvero e può impacchettare il risultato in WOFF: è la differenza fra un webfont da 4 MB e uno da 90 KB.

Trova la voce della tavolozza Tailwind più vicina a un colore qualsiasi e mostra la distanza percepita.

Compone un’immagine di condivisione 1200 × 630 da titolo, sottotitolo, riga di marchio e logo facoltativo su un modello a scelta, e scrive i meta tag che le vanno accanto.

Modifica un SVG accanto alla sua resa dal vivo e spiega il file: viewBox e scalatura, trasformazioni, ogni comando di tracciato, il colore ereditato, i byte sprecati e che cosa si rompe dentro un <img>, in un data URI o in linea.

Genera da un colore solo una scala di luminosità da 50 a 950 con passi percettivamente regolari, pronta come insieme di token.

Genera motivi SVG ripetibili senza giunte — righe, pois, griglie, grana — con controlli di colore e di scala.

Modella ogni angolo per conto suo, compresa la sintassi a due valori che dà la forma a squircle, ed esporta il CSS.

Sovrappone su un campione i filtri di sfocatura, luminosità, saturazione, tonalità e ombra portata e restituisce il CSS.

Tira fuori da un foglio di stile colori, spaziature, raggi e caratteri e propone un insieme di proprietà personalizzate.

Regola una curva cubic-bezier o a molla guardando un’anteprima animata e restituisce la funzione di temporizzazione CSS.

Apre un file di font e mostra la copertura dei glifi blocco per blocco, il numero di sillabe hangul, i pesi, gli assi variabili, il permesso di incorporamento e i record di licenza.

Converte da RGB a CMYK con la formula elementare (niente profili ICC né carta) e segnala i colori saturi che una quadricromia spegnerà.

Converte i dati di un tracciato tra comandi assoluti e relativi, lo sposta, lo ridimensiona, lo ruota e ne inverte il verso, e mostra il riquadro di delimitazione con l’anteprima.

Codifica un SVG come data URI da usare come sfondo CSS, applicando l’escape solo dove serve per tenerlo corto.

Costruisce da una dimensione di base e da un rapporto una scala modulare di corpi e spaziature, esportabile come CSS o come token.