--- title: "Personnaliser l'apparence du code QR : forme, couleurs, dégradé et coins" description: "Référence des sections d'apparence du composant WebPart Vitextra QR Code Generator : six formes de points, couleurs des points et de l'arrière-plan avec transparence, dégradé linéaire ou radial, forme et couleur des carrés et des points d'angle, niveaux de correction d'erreurs et règles pratiques pour qu'un code QR personnalisé reste lisible." url: https://vitextra.com/fr/support/kb/10265 language: fr published: 2026-10-14 modified: 2026-10-14 products: - "QR Code Generator" author: "Lidija Reising" tags: ["personnaliser un code QR", "code QR couleurs personnalisées", "code QR dégradé", "forme des points d'un code QR", "coins du code QR", "code QR fond transparent", "correction d'erreurs code QR", "code QR aux couleurs de l'entreprise SharePoint", "Vitextra QR Code Generator"] --- # Personnaliser l'apparence du code QR : forme, couleurs, dégradé et coins Référence des sections d'apparence du composant WebPart Vitextra QR Code Generator : six formes de points, couleurs des points et de l'arrière-plan avec transparence, dégradé linéaire ou radial, forme et couleur des carrés et des points d'angle, niveaux de correction d'erreurs et règles pratiques pour qu'un code QR personnalisé reste lisible. ## Introduction Un code QR placé sur une affiche ou sur une page de l'intranet fait partie de la mise en page, et un carré noir et blanc s'y intègre rarement. [QR Code Generator](https://vitextra.com/fr/products/qr-code-generator) vous permet de modifier la forme des points, les couleurs et les repères d'angle du code. Les paramètres se trouvent dans les sections réductibles situées sous les onglets de données, et chaque modification apparaît aussitôt dans l'aperçu. Cet article décrit les sections **Forme**, **Couleurs**, **Corner Square** (carrés d'angle), **Corner Dots** (points d'angle) et **Error Correction** (correction d'erreurs), et donne les règles qui permettent à un code personnalisé de rester lisible. Toutes les sections sont réduites à l'ouverture du composant WebPart. Cliquez sur le nom d'une section pour la développer. ## Apparence par défaut Un nouveau composant WebPart démarre avec l'apparence suivante : | Paramètre | Valeur par défaut | | --- | --- | | Forme des points | Carrée | | Couleur des points, des carrés d'angle et des points d'angle | Bleu, `#166aae` | | Couleur d’arrière-plan | Entièrement transparente | | Dégradé (Gradient) | Désactivé | | Type des carrés d'angle et des points d'angle | **Carré** | | Error Correction | **Quartile** | ## Forme La section **Forme** définit le style des petits points qui portent les données. Les six styles sont présentés sous forme d'images, et un clic sur une image sélectionne le style : - points ronds séparés ; - arrondi — les points voisins fusionnent en lignes aux extrémités arrondies ; - élégant — des points dont deux coins sont coupés ; - élégant arrondi — le même style, avec des coins plus doux ; - carré — l'aspect classique d'un code QR ; - très arrondi — des lignes aux extrémités fortement arrondies. ![La section Forme avec six styles de points](https://static.vitextra.com/articles/10265/shape-section-fr.png) *La section Forme avec six styles de points* La forme ne modifie que l'aspect du code. Les données encodées et le nombre de points restent identiques. ## Couleurs La section **Couleurs** contient deux sélecteurs de couleurs : - **Couleur** — la couleur des points ; - **Couleur d’arrière-plan** — la couleur de la zone située derrière le code. Chaque sélecteur comporte un champ de couleur, un curseur de teinte et un curseur de transparence, et, en dessous, les zones **Hex**, **Rouge**, **Vert**, **Bleu** et **Transparence** pour saisir des valeurs exactes. Pour utiliser une couleur de la charte graphique, collez son code dans la zone **Hex**. Lorsque la transparence de la **Couleur d’arrière-plan** est à 100, le code n'a pas d'arrière-plan et prend la couleur de ce qui se trouve en dessous : la section de la page, une diapositive, une feuille imprimée. ### Dégradé Cochez la case **Gradient** (dégradé) pour remplir les points avec une transition entre deux couleurs au lieu d'une couleur unique. Deux paramètres supplémentaires apparaissent : - le type de dégradé — **Linear** (linéaire), du bord gauche du code vers le bord droit, ou **Radial** (radial), du centre vers les bords ; - **Second Color** (deuxième couleur) — la couleur sur laquelle le dégradé se termine. Le dégradé commence par la couleur définie dans **Couleur**. Le dégradé s'applique uniquement aux points. Les carrés d'angle et les points d'angle conservent leurs propres couleurs. ![La section Couleurs avec un dégradé linéaire](https://static.vitextra.com/articles/10265/colors-section-fr.png) *La section Couleurs avec un dégradé linéaire* ## Corner Square et Corner Dots Trois coins de chaque code QR portent les repères de position, grâce auxquels un lecteur trouve le code et détermine son orientation. Un repère se compose d'un cadre extérieur et d'un point intérieur, et chacun dispose de sa propre section. **Corner Square** — le cadre extérieur : - **Type** — **Cercle**, **Carré** ou **Rectangle à coins arrondis** ; - **Couleur** — la couleur du cadre. **Corner Dots** — le point intérieur : - **Type** — **Point** ou **Carré** ; - **Couleur** — la couleur du point. ![Les sections Corner Square et Corner Dots](https://static.vitextra.com/articles/10265/corner-sections-fr.png) *Les sections Corner Square et Corner Dots* 📝 **Remarque** La couleur des points définie dans la section **Couleurs** ne modifie pas les repères. Pour changer la couleur de tout le code, définissez la même couleur à trois endroits : **Couleurs** > **Couleur**, **Corner Square** > **Couleur** et **Corner Dots** > **Couleur**. ## Error Correction (correction d'erreurs) Un code QR contient des données redondantes, qui permettent à un lecteur de le déchiffrer même lorsqu'une partie du code est sale, endommagée ou recouverte. La section **Error Correction** définit la quantité de redondance ajoutée. | Niveau | Part du code pouvant être restaurée | Quand l'utiliser | | --- | --- | --- | | **Faible** | Environ 7 % | Données longues sur un écran propre, lorsque le code doit être le moins dense possible | | **Moyen** | Environ 15 % | Codes affichés à l'écran et impressions de bonne qualité | | **Quartile** | Environ 25 % | Valeur par défaut ; convient à la plupart des codes, y compris ceux qui comportent un petit logo | | **Élevé** | Environ 30 % | Codes avec un grand logo et impressions susceptibles de s'user | Un niveau plus élevé rend le code plus robuste et, à données égales, plus dense : il faut davantage de points, et chaque point devient plus petit. ## Préserver la lisibilité du code Un lecteur a davantage besoin de contraste et de repères nets que d'esthétique. Quelques règles évitent à un code personnalisé de devenir illisible : - **Foncé sur clair.** Les points doivent être nettement plus foncés que l'arrière-plan. Un code clair sur fond foncé n'est pas lu par tous les lecteurs. - **Attention à l'arrière-plan transparent.** Un code à l'arrière-plan transparent prend le fond de l'endroit où il est utilisé. Un code bleu, lisible sur une page blanche, disparaît sur une section sombre ou une diapositive sombre. Si vous ne savez pas où le code sera utilisé, définissez une **Couleur d’arrière-plan** claire et opaque. - **Ne rendez pas les points transparents.** Le curseur de transparence de **Couleur** réduit le contraste de la même façon qu'une couleur pâle. - **Vérifiez les deux extrémités d'un dégradé.** **Couleur** et **Second Color** doivent toutes deux contraster avec l'arrière-plan ; un dégradé qui s'estompe vers un ton clair rend une partie du code illisible. - **Gardez des repères bien distincts.** Les repères d'angle doivent contraster avec l'arrière-plan au moins aussi bien que les points. - **Laissez une marge.** Lorsque vous placez le code dans une maquette, conservez autour de lui une zone vide d'environ quatre points de largeur. ❗ **Important** Testez chaque code personnalisé avec au moins deux smartphones différents avant de l'imprimer ou de le publier. L'aperçu du composant WebPart mesure 300 pixels de large ; testez également le code à la taille et à la distance auxquelles il sera réellement scanné. ## Résumé Les sections d'apparence de QR Code Generator modifient la forme des points, les couleurs, le dégradé et les repères d'angle, tandis que le niveau **Error Correction** définit la marge de robustesse. L'apparence est enregistrée avec la page en même temps que les données : un code personnalisé une fois conserve donc son aspect pour chaque visiteur. 💡 **Astuce** Pour placer un logo au centre du code, consultez [KB10266. Comment ajouter le logo de votre entreprise à un code QR](https://vitextra.com/fr/support/kb/10266). La taille de l'image et les formats de fichier sont décrits dans [KB10267. Télécharger et copier un code QR : PNG, JPEG, SVG et WebP](https://vitextra.com/fr/support/kb/10267).