Colori e design

Scegli, converti e abbina colori e genera CSS per i tuoi progetti grafici.

• Anteprima abbinamenti di font Prova abbinamenti di font per titoli e testo con 20 font a licenza aperta, regola dimensione e interlinea e copia gli stack CSS font-family.
• Calcolatore di rapporto d'aspetto Calcola e semplifica il rapporto d'aspetto di qualsiasi larghezza e altezza, ridimensiona mantenendo le proporzioni e copia il codice CSS aspect-ratio.
• Convertitore da PX a REM Converti px in rem ed em con qualsiasi dimensione del font radice, crea una tabella di conversione e trasforma in rem tutti i px di uno snippet CSS.
• Convertitore di colori Converti qualsiasi colore tra HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH e OKLCH. Incolla un codice, guarda il colore e copia ogni formato con un clic.
• Editor cubic-bezier Crea curve di easing CSS con un editor cubic-bezier trascinabile, confrontale con linear in un'animazione dal vivo e copia cubic-bezier() o linear().
• Generatore di border-radius Genera il border-radius CSS in modo visivo con maniglie trascinabili. Imposta ogni angolo in px o %, usa la sintassi ellittica e crea forme blob.
• Generatore di box-shadow Crea ombre CSS box-shadow a più livelli con anteprima dal vivo. Regola spostamento, sfocatura, espansione, colore, opacità e inset, poi copia il codice.
• Generatore di clip-path Disegna forme CSS clip-path con punti trascinabili. Modifica poligoni, cerchi, ellissi e inset, parti da modelli come stelle e frecce e copia il codice.
• Generatore di gradienti CSS Crea gradienti CSS lineari, radiali e conici con anteprima dal vivo. Aggiungi e trascina i punti di colore, imposta l'angolo e copia il codice CSS.
• Generatore di palette di colori Genera palette di colori da un colore di base con le armonie cromatiche: complementare, analoga, triadica, tetradica e monocromatica.
• Generatore di tinte e sfumature Genera tinte e sfumature di qualsiasi colore a passi del 5, 10, 20 o 25 %, miscelate in OKLCH o sRGB, ed esportale come variabili CSS o config Tailwind.
• Generatore Flexbox e Grid Crea layout flexbox e CSS grid in modo visivo. Imposta le proprietà di contenitore ed elementi, dai un nome alle aree e copia il codice CSS e HTML.
• Palette di colori da un'immagine Estrai una palette di colori da qualsiasi immagine. Carica una foto e ottieni i colori dominanti in HEX con la loro percentuale, pronti da copiare o esportare.
• Prendi un colore da un'immagine Carica un'immagine e clicca su un pixel per ottenerne il colore in HEX, RGB, HSL, HSV e CMYK. Lente di ingrandimento, media dei pixel e cronologia.
• Selettore di colori Color picker online gratuito. Scegli un colore e copia subito i codici HEX, RGB, HSL, HSV e CMYK, con i rapporti di contrasto su bianco e nero.
• Simulatore di daltonismo Simulatore di daltonismo gratuito. Guarda un'immagine con protanopia, deuteranopia, tritanopia, le forme lievi o acromatopsia, affiancata o con cursore.
• Subset di font Crea un subset di un font con solo i caratteri che ti servono, con HarfBuzz nel browser. Ottieni TTF/OTF e WOFF più leggeri e una regola @font-face.
• Trova il nome di un colore Scopri come si chiama un colore. Inserisci un codice HEX o RGB e ottieni i 5 nomi più vicini tra oltre 30 000 colori, più il nome CSS più simile.
• Verifica del contrasto dei colori Verifica il contrasto WCAG: inserisci colore del testo e dello sfondo e ottieni rapporto di contrasto, esito AA/AAA e il colore conforme più vicino.