Outils de design

Générez un code QR à partir de texte ou d'une URL dans votre navigateur. Ajustez la taille et les couleurs, puis exportez une image pour les points d'entrée d'événements, les pages de destination, les affiches et les documents d'impression. Le contenu reste sur cette page et n'est pas envoyé.

Décodez les codes QR localement dans le navigateur à partir d'une image importée, d'une URL d'image ou de l'appareil photo. Utile pour lire les codes QR de capture d'écran, vérifier les images QR à distance et numériser sur site.

Convertissez les couleurs parmi les variables HEX, RVB, HSL, HWB, CMJN et CSS dans votre navigateur. Comprend un sélecteur de couleurs et un assistant de couleurs aléatoires pour le transfert de conception, le travail sur les feuilles de style et l'alignement des couleurs de la marque.

Ajustez visuellement le décalage, le flou, la répartition, la couleur, l'opacité et l'encart. Prévisualisez en direct et générez du CSS box-shadow pour les cartes, les boutons et les superpositions.

Calculez le contraste de premier plan/arrière-plan avec les règles WCAG 2.0 et vérifiez AA/AAA pour les textes normaux et de grande taille. Utile pour les palettes accessibles et la vérification de la lisibilité du frontend.

Créez visuellement des dégradés CSS linéaires, radiaux et coniques. Ajustez l'angle et les positions des arrêts, ajoutez plusieurs arrêts et copiez le CSS pour les arrière-plans, les boutons et les transitions de marque.

Convertissez entre px, rem, em, pt, vw, vh et %. Personnalisez la taille de la police racine, la taille de la police parent et la taille de la fenêtre d'affichage pour un travail réactif et un transfert de la conception au code.

Générez des palettes avec des règles monochromes, analogues, complémentaires, triadiques ou entièrement aléatoires. Verrouillez les échantillons individuels et continuez à randomiser le reste pour l'exploration de l'interface utilisateur et les dérivés de couleur de marque.

Ajustez visuellement le flou, l'opacité, la couleur d'arrière-plan et l'opacité des bordures pour générer du CSS en verre dépoli avec un préfixe -webkit. Utile pour les cartes, les barres de navigation et les calques modaux.

Faites glisser ou saisissez des valeurs pour visualiser et générer un code de rayon de bordure CSS irrégulier à 8 points (rayon de bordure fantaisie).

À partir des largeurs de fenêtre min/max et d'une plage de tailles cible, calculez une formule clamp() pour les tailles de police fluides, l'espacement et d'autres longueurs qui évoluent avec la fenêtre.

Transformez les lettres et les chiffres anglais en art ASCII convivial pour les terminaux pour les bannières CLI, MOTD texte et titres README en texte brut. Copiez le résultat directement.

SVG en ligne dans une image d'arrière-plan CSS : chaîne url(...) en utilisant l'encodage URI ou Base64. Utile pour les petites icônes que vous souhaitez conserver en CSS au lieu de fichiers d'actifs séparés.

Collez une longue chaîne de chemin d="M10 20 L... Z" ou une balise de chemin complet pour le visualiser sur une grille et inspecter la longueur et le nombre de commandes lors du débogage des icônes.

Combinez le flou, les niveaux de gris, le contraste et d’autres fonctions de filtre CSS avec un aperçu en direct. Réglez les curseurs pour créer une chaîne comme filter: blur(2px) grayscale(100%), puis copiez le résultat.

Générez visuellement du CSS de ruban de coin incliné pour les cartes. Modifiez le texte, les couleurs, le décalage, la largeur et la taille de la police pour les badges de statut de vente, épuisé et similaires.

Inversez une couleur en soustrayant chaque canal RVB de 255. Comparez les couleurs source et inversées, prévisualisez les exemples de calques et exportez un extrait de variable CSS pour l'exploration du thème sombre.

Générez des palettes de pastel doux et de style Morandi dans votre navigateur. Choisissez le nombre et le style, verrouillez les échantillons que vous souhaitez conserver et exportez des listes HEX ou des variables CSS pour les graphiques, les arrière-plans et les thèmes d'interface utilisateur doux.

Appliquez des matrices de déficience de vision des couleurs à un exemple de vue afin de pouvoir prévisualiser comment la protanopie, la deutéranopie, la tritanopie ou l'achromatopsie peuvent modifier les couleurs de l'interface utilisateur. Utilisez-le pour détecter les problèmes de contraste et de couleur d'état avant l'expédition.

Redimensionnez et réencodez les images localement avec Canvas. Définissez les dimensions maximales, la qualité et le format de sortie, puis téléchargez le résultat. Les fichiers originaux restent dans le navigateur et ne sont pas envoyés à un serveur.

Ajustez la direction flexible, la justification du contenu, l'alignement des éléments, le retour à la ligne et l'espacement avec un aperçu en direct. Ajoutez ou supprimez des cases pour voir l'habillage et l'espacement, puis copiez le CSS (et l'échafaudage HTML) généré dans votre projet.

Définissez le nombre de colonnes et de lignes ainsi que les espaces pour générer un affichage de base : disposition en grille. Prévisualisez la structure des pistes, essayez des modèles rapides et copiez du CSS ou du HTML pour les mises en page d'administration et les grilles de cartes.

Parcourez les mots-clés CSS courants de cursor, survolez-les pour les prévisualiser, filtrez-les par recherche ou catégorie, puis copiez les déclarations CSS. Utile pour choisir un curseur de redimensionnement, de déplacement ou d’état désactivé.

Parcourez les échelles de couleurs CSS Tailwind (y compris 50 à 950 étapes) sur un seul tableau. Recherchez par nom, échelle ou HEX, puis copiez les noms de classe utilitaires ou les valeurs HEX brutes pour les projets CSS.

Collez les déclarations CSS et mappez-les aux classes d'utilitaires Tailwind lorsque cela est possible. Les règles communes de disposition, d'espacement et de couleur deviennent des classes standard ; les valeurs sans correspondance reviennent à une syntaxe de valeurs arbitraires.

Convertissez des extraits HTML en React JSX dans le navigateur. Renommez class/for en className/htmlFor, fermez les balises void et convertissez les styles en ligne en forme d'objet. La conversion reste locale.

Recherchez et copiez les emoji couramment utilisés dans les documents, les messages de validation et les journaux de modifications. Filtrez par mot clé ou catégorie pour trouver rapidement les symboles d'état, de progression et d'avertissement.

Recherchez les entités HTML courantes et les références numériques de caractères pour les espaces et les symboles monétaires, mathématiques ou typographiques. Copiez leur forme nommée ou numérique pour obtenir un balisage source plus sûr.

Estimez la probabilité d'au moins une collision pour une longueur de bit de hachage et une taille d'échantillon données à l'aide de l'outil approximation anniversaire-paradoxe. Utile pour les identifiants courts et les sommes de contrôle tronquées. Le calcul reste dans le navigateur.

Parcourez les couleurs nommées W3C/CSS et leurs valeurs. Filtrez par mot-clé ou par famille, puis copiez le nom de la couleur ou HEX pour le travail CSS natif.

Collez le balisage SVG, extrayez les couleurs de remplissage/contour dans une palette modifiable, prévisualisez les modifications en direct et copiez le SVG mis à jour. Conçu pour les recolorations d'icônes et les teintes vectorielles simples.

Choisissez une couleur de base et générez des schémas avec des règles complémentaires, analogues, triadiques, tétradiques, complémentaires ou monochromatiques. Prévisualisez l'utilisation de l'interface utilisateur et exportez les variables CSS pour le travail de la marque et des composants.

Ajustez la largeur, la hauteur, remplissage, bordure et marge avec un diagramme de modèle de boîte en direct. Comparez l'occupation de la zone de contenu et de la zone de bordure et copiez le CSS correspondant.

Dessinez une règle de pixels horizontale ou verticale sur la page. Ajustez la longueur et l'espacement des graduations, et affichez la taille de la fenêtre ainsi que le rapport en pixels de l'appareil pour vérifier les mesures de pixels CSS par rapport aux mises en page et aux maquettes.

Découvrez quel point d'arrêt du framework CSS correspond à la largeur actuelle de la fenêtre en temps réel. Les préréglages couvrent Tailwind CSS, Bootstrap et Material UI, ainsi qu'une liste personnalisée pour le débogage réactif.

Faites correspondre une couleur aux couleurs nommées CSS les plus proches dans votre navigateur. Les candidats sont classés par distance de couleur avec des noms et des valeurs hexadécimales, ce qui est utile pour aligner des mots-clés, rechercher des correspondances proches ou apprendre les noms de couleurs standard.

Comparez deux images pixel par pixel dans le navigateur. Les différents pixels sont surlignés en rouge avec des nombres et des pourcentages, ce qui est utile pour les captures d'écran de régression de l'interface utilisateur, les vérifications des versions de conception et les révisions avant/après. Les images restent locales.

Vérifiez le contraste WCAG pour plusieurs paires premier plan/arrière-plan à la fois. Consultez les niveaux AA/AAA et les aperçus de texte, utiles pour les audits du système de conception, les lots de couleurs de marque et les examens d'accessibilité.

Mélangez les couleurs des quatre coins dans des dégradés radiaux superposés et floutés pour créer un maillage doux et un arrière-plan CSS copiable. Idéal pour les pages de destination, les visuels de marque et les expériences multicolores.

Ajustez la couleur, l'opacité, le flou et le contour pour prévisualiser et générer du CSS de carte en verre dépoli avec backdrop-filter. Utile pour les panneaux translucides et les couches de navigation ; tout s'exécute dans le navigateur.

Générer du CSS d'ombre incrusté/départ neumorphique à partir de la couleur d'arrière-plan, de la distance et flou. Prévisualisez les looks surélevés et enfoncés pour les boutons, les cartes et les commandes lumineuses de l'interface utilisateur logicielle.

Modifiez visuellement les quatre points de contrôle d’une courbe de Bézier cubique, prévisualisez l’accélération et copiez une fonction de temporisation CSS. Utile pour le mouvement des boutons et les transitions de page.

Générez des classes de grille Tailwind à partir du nombre de colonnes, de l'espacement et du nombre d'éléments, avec un aperçu en direct. Utile pour les grilles de cartes, les prototypes et les essais rapides de mise en page.

Générez des formes de chemin de clip CSS à partir de préréglages et de contrôles simples avec un aperçu en direct – utile pour les cartes inclinées, les badges, les recadrages d'images et les mises en page décoratives.

Encodez un fichier de police en Base64 dans le navigateur et générez un extrait @font-face intégrable. Utile pour les démos, les modèles d'e-mail et les pages autonomes qui incorporent temporairement une police. Les fichiers restent locaux.

Extrayez les couleurs dominantes d'une image dans le navigateur et créez une palette HEX copiable. Les images ne sont pas envoyées, ce qui est utile pour l'échantillonnage d'affiches, les références de marque et l'analyse rapide des couleurs principales.

Choisissez une direction, une taille et une couleur pour générer un triangle de bordure CSS pur avec un aperçu en direct et un code copiable.

Générez des motifs d'arrière-plan CSS purs tels que des points, des rayures, des damiers et des grilles. Ajustez les couleurs et la taille, puis copiez le CSS pour les remplissages décoratifs, les espaces réservés et les expériences visuelles.

Nettoyez les commentaires SVG, les métadonnées de l'éditeur et les espaces supplémentaires localement dans le navigateur pour produire un balisage plus court – utile pour la compression des icônes, le nettoyage des exportations et la préparation du SVG en ligne. Il s'agit d'un nettoyeur léger, pas d'un pipeline de plugin SVGO complet.

Générez un espace réservé SVG léger à partir de la largeur, de la hauteur, de l'arrière-plan, du texte de l'étiquette et de la taille de la police – utile pour les emplacements d'image de prototype, les squelettes de liste et le chargement espaces réservés. Copiez le balisage SVG lorsque vous êtes prêt.