Design et couleur

Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.

Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.

Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.

Construit une palette harmonieuse à partir d’une couleur de base, selon les règles complémentaire, triadique et analogue.

Trouve la dimension manquante pour un rapport visé et liste les tailles normalisées qui lui correspondent.

Compose des ombres de boîte et de texte en plusieurs couches avec un aperçu en direct, et rend le CSS.

Compose des dégradés linéaires, radiaux et coniques avec des arrêts déplaçables et rend le CSS, en sRGB ou en OKLCH.

Dispose une grille visuellement avec des zones nommées et rend le CSS grid-template correspondant.

Construit une rampe de 50 à 950 depuis une couleur et la reflète en version sombre, pour que chaque paire de jetons conserve son contraste.

Place une capture d’écran dans un cadre de téléphone, de tablette, d’ordinateur portable ou de navigateur, avec fond et ombre.

Actionne chaque propriété flex sur un exemple vivant et montre le CSS ainsi que ce que chaque propriété a changé.

Calcule une expression clamp() qui fait varier une taille en douceur entre deux largeurs de fenêtre.

Convertit TTF et OTF en WOFF et inversement dans le navigateur et rend la règle @font-face correspondante ; le WOFF2 réclame Brotli et est refusé, avec un renvoi vers les outils de bureau.

Propose des couples de polices titre et texte tirés des piles système, prévisualisés avec votre propre texte, et vous rend le CSS.

Réduit une police TrueType aux seuls glyphes que votre texte utilise vraiment et sait emballer le résultat en WOFF — la différence entre une police web de 4 Mo et de 90 ko.

Trouve l’entrée de la palette Tailwind la plus proche d’une couleur donnée et affiche la distance perceptuelle.

Compose une image de partage de 1200×630 à partir d’un titre, d’un sous-titre, d’une ligne de marque et d’un logo facultatif sur un modèle au choix, et écrit les balises meta qui vont avec.

Modifie un SVG à côté de son rendu et explique le fichier : le viewBox et la mise à l’échelle, les transformations, chaque commande de tracé, la peinture héritée, les octets inutiles, et ce qui casse dans une balise img, dans un data URI ou en inline.

Produit une échelle de luminosité de 50 à 950 à partir d’une seule couleur, à pas perceptuellement réguliers, prête à servir de jetons de design.

Produit des motifs SVG raccordables — rayures, pois, quadrillages, grain — avec réglage des couleurs et de l’échelle.

Façonne chaque coin séparément, syntaxe à deux valeurs pour le squircle comprise, et rend le CSS.

Empile flou, luminosité, saturation, teinte et ombre portée sur un échantillon et rend le CSS obtenu.

Extrait couleurs, espacements, rayons et polices d’une feuille de style et propose un jeu de propriétés personnalisées.

Ajuste une courbe cubic-bezier ou de ressort face à un aperçu animé et rend la fonction de temporisation CSS.

Ouvre un fichier de police et montre la couverture de glyphes par bloc, le nombre de syllabes coréennes, les graisses, les axes variables, l’autorisation d’incorporation et les mentions de licence.

Convertit du RVB en CMJN par la formule simple, sans profil ICC ni profil papier, et signale les couleurs saturées que la quadrichromie ternira.

Convertit les données d’un tracé entre commandes absolues et relatives, le déplace, l’échelonne, le fait pivoter et l’inverse, et montre sa boîte englobante avec un aperçu en direct.

Encode un SVG en data URI de fond CSS, en n’échappant que ce qui doit l’être pour rester court.

Construit une échelle modulaire de tailles de texte et d’espacements à partir d’une taille de base et d’un rapport, exportable en CSS ou en jetons.