---
title: "QR-Code-Design anpassen: Form, Farben, Farbverlauf und Ecken"
description: "Referenz zu den Designabschnitten des Vitextra QR Code Generator Webparts: sechs Punktformen, Punkt- und Hintergrundfarbe mit Transparenz, linearer und radialer Farbverlauf, Form und Farbe der Eckquadrate und Eckpunkte, Fehlerkorrekturstufen und praktische Regeln, mit denen ein gestalteter QR-Code lesbar bleibt."
url: https://vitextra.com/de/support/kb/10265
language: de
published: 2026-10-14
modified: 2026-10-14
products:
  - "QR Code Generator"
author: "Lidija Reising"
tags: ["QR-Code Design", "QR-Code Farben anpassen", "QR-Code Farbverlauf", "QR-Code Punktform", "QR-Code Eckquadrat", "QR-Code transparenter Hintergrund", "QR-Code Fehlerkorrektur", "QR-Code im Corporate Design SharePoint", "Vitextra QR Code Generator"]
---

# QR-Code-Design anpassen: Form, Farben, Farbverlauf und Ecken

Referenz zu den Designabschnitten des Vitextra QR Code Generator Webparts: sechs Punktformen, Punkt- und Hintergrundfarbe mit Transparenz, linearer und radialer Farbverlauf, Form und Farbe der Eckquadrate und Eckpunkte, Fehlerkorrekturstufen und praktische Regeln, mit denen ein gestalteter QR-Code lesbar bleibt.

## Einführung

Ein QR-Code auf einem Plakat oder einer Intranetseite ist Teil der Gestaltung, und ein schwarz-weißes Quadrat passt selten dazu. Mit [QR Code Generator](https://vitextra.com/de/products/qr-code-generator) ändern Sie die Form der Punkte, die Farben und die Eckmarkierungen des Codes. Die Einstellungen befinden sich in den reduzierbaren Abschnitten unter den Datenregisterkarten, und jede Änderung ist sofort in der Vorschau zu sehen. Dieser Artikel beschreibt die Abschnitte **Form**, **Farben**, **Corner Square**, **Corner Dots** und **Error Correction** und nennt die Regeln, mit denen ein gestalteter Code lesbar bleibt.

Beim Öffnen des Webparts sind alle Abschnitte reduziert. Klicken Sie auf den Namen eines Abschnitts, um ihn zu erweitern.

## Standarddesign

Ein neues Webpart startet mit folgendem Design:

| Einstellung | Standardwert |
| --- | --- |
| Form der Punkte | Quadratisch |
| Farbe der Punkte, Eckquadrate und Eckpunkte | Blau, `#166aae` |
| Hintergrundfarbe | Vollständig transparent |
| Gradient (Farbverlauf) | Aus |
| Typ der Eckquadrate und Eckpunkte | **Quadrat** |
| Error Correction | **Quartile** |

## Form

Der Abschnitt **Form** legt den Stil der kleinen Punkte fest, die die Daten tragen. Die sechs Stile werden als Bilder angezeigt, und ein Klick auf ein Bild wählt den Stil aus:

- einzelne runde Punkte;
- abgerundet – benachbarte Punkte verschmelzen zu Linien mit abgerundeten Enden;
- elegant – Punkte mit zwei abgeschnittenen Ecken;
- elegant abgerundet – dasselbe mit weicheren Ecken;
- quadratisch – das klassische Aussehen eines QR-Codes;
- extra abgerundet – Linien mit stark abgerundeten Enden.

![Der Abschnitt „Form" mit sechs Punktstilen](https://static.vitextra.com/articles/10265/shape-section-de.png)
*Der Abschnitt „Form" mit sechs Punktstilen*

Die Form ändert nur das Aussehen des Codes. Die codierten Daten und die Anzahl der Punkte bleiben gleich.

## Farben

Der Abschnitt **Farben** enthält zwei Farbauswahlen:

- **Farbe** – die Farbe der Punkte;
- **Hintergrundfarbe** – die Farbe der Fläche hinter dem Code.

Jede Farbauswahl hat ein Farbfeld, einen Schieberegler für den Farbton und einen für die Transparenz und darunter die Felder **Hex**, **Rot**, **Grün**, **Blau** und **Transparenz** für exakte Werte. Um eine Unternehmensfarbe zu verwenden, fügen Sie ihren Code in das Feld **Hex** ein.

Steht die Transparenz der **Hintergrundfarbe** auf 100, hat der Code keinen Hintergrund und nimmt die Farbe dessen an, was darunter liegt: des Seitenabschnitts, einer Folie, eines gedruckten Blatts.

### Farbverlauf

Aktivieren Sie das Kontrollkästchen **Gradient**, um die Punkte statt mit einer einzelnen Farbe mit einem Übergang zwischen zwei Farben zu füllen. Es erscheinen zwei weitere Einstellungen:

- die Art des Farbverlaufs – **Linear**, vom linken Rand des Codes zum rechten, oder **Radial**, von der Mitte zu den Rändern;
- **Second Color** – die Farbe, in der der Farbverlauf endet. Der Farbverlauf beginnt mit der unter **Farbe** festgelegten Farbe.

Der Farbverlauf gilt nur für die Punkte. Die Eckquadrate und die Eckpunkte behalten ihre eigenen Farben.

![Der Abschnitt „Farben" mit einem linearen Farbverlauf](https://static.vitextra.com/articles/10265/colors-section-de.png)
*Der Abschnitt „Farben" mit einem linearen Farbverlauf*

## Corner Square und Corner Dots

In drei Ecken jedes QR-Codes sitzen die Positionsmarkierungen, anhand derer ein Scanner den Code findet und seine Ausrichtung bestimmt. Eine Markierung besteht aus einem äußeren Rahmen und einem inneren Punkt, und für beide gibt es einen eigenen Abschnitt.

**Corner Square** – der äußere Rahmen:

- **Typ** – **Kreis**, **Quadrat** oder **Abgerundetes Rechteck**;
- **Farbe** – die Farbe des Rahmens.

**Corner Dots** – der innere Punkt:

- **Typ** – **Punkt** oder **Quadrat**;
- **Farbe** – die Farbe des Punkts.

![Die Abschnitte „Corner Square" und „Corner Dots"](https://static.vitextra.com/articles/10265/corner-sections-de.png)
*Die Abschnitte „Corner Square" und „Corner Dots"*

📝 **Hinweis**  
Die Farbe der Punkte im Abschnitt **Farben** ändert die Markierungen nicht. Um den gesamten Code umzufärben, legen Sie dieselbe Farbe an drei Stellen fest: **Farben** > **Farbe**, **Corner Square** > **Farbe** und **Corner Dots** > **Farbe**.

## Error Correction

Ein QR-Code enthält redundante Daten, dank derer ein Scanner ihn auch dann lesen kann, wenn ein Teil des Codes verschmutzt, beschädigt oder verdeckt ist. Der Abschnitt **Error Correction** legt fest, wie viel Redundanz hinzugefügt wird.

| Stufe | Wiederherstellbarer Anteil des Codes | Wann verwenden |
| --- | --- | --- |
| **Niedrig** | Etwa 7 % | Lange Daten auf einem sauberen Bildschirm, wenn der Code so wenig dicht wie möglich sein soll |
| **Mittel** | Etwa 15 % | Codes auf Bildschirmen und in hochwertigen Drucken |
| **Quartile** | Etwa 25 % | Der Standardwert; für die meisten Codes geeignet, auch für Codes mit einem kleinen Logo |
| **Hoch** | Etwa 30 % | Codes mit einem großen Logo und Drucke, die sich abnutzen können |

Eine höhere Stufe macht den Code robuster und bei gleichen Daten dichter: Er braucht mehr Punkte, und jeder Punkt wird kleiner.

## Den Code lesbar halten

Ein Scanner braucht Kontrast und klare Markierungen dringender als Schönheit. Einige Regeln bewahren einen gestalteten Code vor dem Versagen:

- **Dunkel auf Hell.** Die Punkte müssen deutlich dunkler sein als der Hintergrund. Einen hellen Code auf dunklem Hintergrund liest nicht jeder Scanner.
- **Achten Sie auf den transparenten Hintergrund.** Ein Code mit transparentem Hintergrund übernimmt den Hintergrund des Ortes, an dem er verwendet wird. Ein blauer Code, der auf einer weißen Seite lesbar ist, verschwindet auf einem dunklen Abschnitt oder einer dunklen Folie. Wenn Sie nicht wissen, wo der Code verwendet wird, legen Sie eine deckende helle **Hintergrundfarbe** fest.
- **Machen Sie die Punkte nicht transparent.** Der Transparenzregler von **Farbe** verringert den Kontrast genauso wie eine blasse Farbe.
- **Prüfen Sie beide Enden eines Farbverlaufs.** Sowohl **Farbe** als auch **Second Color** müssen sich vom Hintergrund abheben; ein Farbverlauf, der in einen hellen Ton ausläuft, macht einen Teil des Codes unlesbar.
- **Halten Sie die Markierungen deutlich.** Die Eckmarkierungen müssen sich mindestens so gut vom Hintergrund abheben wie die Punkte.
- **Lassen Sie einen Rand.** Wenn Sie den Code in ein Layout einsetzen, lassen Sie rundherum eine leere Fläche von etwa vier Punkten Breite.

❗ **Wichtig**  
Testen Sie jeden gestalteten Code mit mindestens zwei verschiedenen Smartphones, bevor er gedruckt oder veröffentlicht wird. Die Vorschau im Webpart ist 300 Pixel breit; testen Sie den Code auch in der Größe und aus der Entfernung, in der er tatsächlich gescannt wird.

## Zusammenfassung

Die Designabschnitte von QR Code Generator ändern die Form der Punkte, die Farben, den Farbverlauf und die Eckmarkierungen, während die Stufe unter **Error Correction** die Robustheitsreserve festlegt. Das Design wird zusammen mit den Daten mit der Seite gespeichert, sodass ein einmal gestalteter Code sein Aussehen für jeden Besucher behält.

💡 **Tipp**  
Wie Sie ein Logo in der Mitte des Codes platzieren, erfahren Sie in [KB10266. So fügen Sie einem QR-Code ein Firmenlogo hinzu](https://vitextra.com/de/support/kb/10266). Die Bildgröße und die Dateiformate sind in [KB10267. QR-Code herunterladen und kopieren: PNG, JPEG, SVG und WebP](https://vitextra.com/de/support/kb/10267) beschrieben.