Hellere und dunklere HEX-Farbvarianten erzeugen

Wofür Sie den Farbvarianten-Generator verwenden

Mit diesem Tool leiten Sie aus einer Ausgangsfarbe hellere und dunklere Farbvarianten ab. Das eignet sich etwa für eine abgestufte Farbpalette, für mehrere Zustände eines Gestaltungselements oder für feinere Unterschiede zwischen Hintergrund- und Akzentfarben. Sie entscheiden selbst, welche Variantengruppe in der Ausgabe enthalten sein soll: die hellere Gruppe, die dunklere Gruppe oder beide. Dadurch können Sie die Ausgabe auf die Richtung begrenzen, die Sie für Ihre Gestaltung benötigen. Als Eingabe ist ein Farbwert in einer unterstützten Hex-Schreibweise vorgesehen. Wenn Sie kein Farbfeld angeben, steht als Ausgangswert #3498db zur Verfügung. Die Schrittzahl und die Auswahl der Gruppen bestimmen anschließend, wie umfangreich die zurückgegebenen Daten ausfallen.

So erzeugen Sie hellere und dunklere Farbvarianten

1. Tragen Sie einen Hex-Farbwert in das Farbfeld ein. Das Zeichen # ist am Anfang nicht zwingend erforderlich: Fehlt es, ergänzt das Tool dieses Zeichen vor der Verarbeitung. Eine dreistellige Schreibweise wie #39f wird durch Wiederholen jeder einzelnen Stelle erweitert, bevor die Umwandlung erfolgt. Lassen Sie das Farbfeld leer, wird der voreingestellte Farbwert #3498db verwendet.

2. Legen Sie die gewünschte Schrittzahl fest. Ohne eigene Angabe verwendet das Tool 10 Schritte. Eine positive ganze Zahl legt fest, wie viele Einträge in jeder Variantengruppe erscheinen, die Sie eingeschlossen haben. Die Zahl 3 bedeutet beispielsweise, dass eine eingeschlossene Gruppe drei Einträge enthält. Die Schrittzahl beschreibt damit die Größe der Gruppen, nicht die Anzahl aller Einträge über beide Richtungen hinweg.

3. Prüfen Sie die Auswahl der Variantengruppen. Standardmäßig sind sowohl hellere als auch dunklere Varianten eingeschlossen. Wenn Sie nur eine Richtung benötigen, wählen Sie die andere Gruppe ab. Bei einer Schrittzahl von 5 ergeben sich dann fünf Einträge in der gewählten Gruppe; sind beide Gruppen eingeschlossen, enthält jede der beiden Gruppen fünf Einträge.

4. Starten Sie die Verarbeitung mit den gewählten Einstellungen. Lesen Sie danach die zurückgegebenen Daten zunächst als Ganzes: Prüfen Sie die gemeldete Ausgangsfarbe, sehen Sie nach, welche Variantengruppen vorhanden sind, und zählen Sie die Einträge der enthaltenen Gruppen. Vergleichen Sie die Struktur der Ausgabe mit Ihrer Auswahl, bevor Sie die Farbwerte in eine Palette oder ein Gestaltungsdokument übernehmen.

5. Wenn Sie eine Eingabe ohne führendes # verwendet haben, berücksichtigen Sie bei der Kontrolle die normalisierte Darstellung. Die gemeldete Ausgangsfarbe enthält den eingegebenen Farbtext, nachdem das fehlende führende Zeichen ergänzt wurde. Bei einer dreistelligen Schreibweise sollten Sie außerdem bedenken, dass die einzelnen Stellen vor der Umwandlung wiederholt werden. So dient die Ausgabe als nachvollziehbare Darstellung der verarbeiteten Ausgangsfarbe und nicht nur der von Ihnen ursprünglich getippten Zeichenfolge.

So lesen Sie die Ausgabe richtig

Die Ausgabe enthält die gemeldete Ausgangsfarbe und die Variantengruppen, die Sie eingeschlossen haben. Bei einer positiven Schrittzahl von 5 enthält jede eingeschlossene Gruppe fünf Einträge. Sind beide Richtungen aktiviert, finden Sie daher eine hellere und eine dunklere Gruppe mit jeweils fünf Einträgen. Ist nur eine Richtung aktiviert, fehlt die andere Gruppe. Die Gruppenauswahl verändert somit nicht nur die Farbrichtung, sondern auch die Form und den Umfang der Ausgabe.

Die erzeugten Farbkanalwerte werden vor der Hexadezimalformatierung auf ganze Werte gerundet. Zusätzlich werden sie auf den Bereich von 0 bis 255 begrenzt. Kleine Unterschiede zwischen rechnerischen Zwischenwerten und den ausgegebenen ganzen Kanalwerten sind deshalb erwartbar. Verwenden Sie die formatierten Werte aus der Ausgabe, wenn Sie die Varianten weiterverwenden möchten, statt Zwischenwerte selbst zu rekonstruieren.

Kontrollieren Sie neben der Variantenzahl auch die gemeldete Ausgangsfarbe. Bei einer Eingabe ohne # erscheint sie mit dem ergänzten führenden Zeichen. Eine dreistellige Eingabe wurde vor der Umwandlung durch Wiederholen ihrer Stellen erweitert. Diese Darstellung hilft dabei, Eingabefehler und Missverständnisse über die verwendete Schreibweise zu erkennen.

Besondere Aufmerksamkeit ist bei nicht konvertierbaren Farbwerten nötig. Wenn die Verarbeitungskonvertierung fehlschlägt, kann in den zurückgegebenen Daten ein Fehlerhinweis stehen, obwohl der Vorgang selbst als erfolgreich markiert ist. Ein erfolgreicher Status genügt daher nicht als alleinige Prüfung. Sehen Sie immer auch in die enthaltenen Daten und suchen Sie dort nach einem Fehlerhinweis, bevor Sie die Varianten als verwendbare Farbauswahl behandeln.

Praktisches Beispiel

Sie benötigen aus #3498db je drei hellere und dunklere Abstufungen für eine kleine Farbpalette.

Geben Sie #3498db ein, stellen Sie die Schrittzahl 3 ein, lassen Sie beide Variantengruppen eingeschlossen und starten Sie die Verarbeitung.

Die zurückgegebenen Daten enthalten die normalisierte Ausgangsfarbe sowie eine hellere und eine dunklere Variantengruppe. Jede Gruppe enthält drei Einträge, sofern beide Gruppen eingeschlossen sind.

Einschränkungen

• Nicht konvertierbare Farbwerte können einen Fehlerhinweis erzeugen, während der Vorgang als erfolgreich markiert bleibt. Erzeugte Farbkanalwerte werden gerundet und auf den Bereich von 0 bis 255 begrenzt.

Häufige Fehler

• Ein nicht konvertierbarer Farbwert kann einen Fehlerhinweis in den zurückgegebenen Daten erzeugen, auch wenn der Vorgang als erfolgreich markiert ist. Prüfen Sie deshalb die Daten selbst und verwenden Sie eine gültige Hex-Schreibweise. Ein fehlendes # wird ergänzt; eine dreistellige Schreibweise wird durch Wiederholen ihrer Stellen erweitert, aber nicht in eine andere Farbnotation umgewandelt.

Häufige Fragen

Wie viele Farbvarianten entstehen pro Gruppe?

Bei einer positiven ganzen Schrittzahl enthält jede eingeschlossene Variantengruppe genau diese Anzahl an Einträgen. Bei einer Schrittzahl von 5 enthält daher jede eingeschlossene Gruppe fünf Einträge.

Welche Farbe wird ohne Eingabe verwendet?

Wenn Sie keinen Farbwert angeben, verwendet das Tool #3498db. Bei einem eingegebenen Farbwert ergänzt es ein fehlendes führendes # vor der Verarbeitung.

Warum enthält die Ausgabe trotz eines erfolgreichen Vorgangs einen Fehlerhinweis?

Wenn die Farbwert-Konvertierung fehlschlägt, kann in den zurückgegebenen Daten ein Fehlerhinweis stehen, obwohl der Vorgang als erfolgreich markiert ist. Prüfen Sie daher zusätzlich zum Erfolgsstatus die enthaltenen Daten.