HEX-Farbwähler

HEX-Farbwähler & -Prüfer: HEX, RGB, HSL | We.Inc

Kostenloser HEX-Farbwähler und -Prüfer: Farbe wählen oder Hex-Code einfügen, ansehen und HEX-, RGB-, HSL- und OKLCH-Werte, Tönungen, Schattierungen und Kontrastwerte kopieren.

HEX-Farbwähler

Wähle eine Farbe aus oder füge einen HEX-, RGB- oder HSL-Wert ein, um alle Formate für Design und Code zu erhalten: HEX, RGB, HSL und OKLCH. Sieh dir eine Skala heller und dunkler Abstufungen an und prüfe die Lesbarkeit des Textes darauf mit Weiß und Schwarz. Um einen vorhandenen Hex-Code zu prüfen, fügen Sie ihn in das Feld ein: Das große Farbfeld zeigt die Farbe, und die anderen Formate aktualisieren sich sofort.

  • Verwende den Farbwähler oder gib einen Wert wie #4F98FB, rgb(79, 152, 251) oder hsl(215, 95%, 65%) ein. Das # ist optional, und auch die dreistellige Kurzform wie #39F funktioniert.
  • Um einen Hex-Code anzusehen oder zu prüfen, fügen Sie ihn ein. Ist der Code ungültig (zum Beispiel mit einem Buchstaben nach F oder der falschen Anzahl Stellen), wird das Feld rot.
  • Kopiere jedes Format mit einem Klick. OKLCH ist das moderne CSS-Farbformat, das die Helligkeit über verschiedene Farbtöne hinweg konstant hält.
  • Klicke auf eine helle oder dunkle Abstufung, um sie als aktuelle Farbe auszuwählen.
  • Sieh dir die Kontrastverhältnisse an, um zu entscheiden, ob weißer oder schwarzer Text auf dieser Farbe stehen sollte.
  • Strebe bei Schaltflächen einen Kontrast von mindestens 4.5:1 zwischen Beschriftung und Schaltflächenfarbe an.
  • Erstelle aus einer Markenfarbe eine Palette: eine helle Tönung für Hintergründe, die Farbe selbst für Schaltflächen, eine dunkle Nuance für Hover-Zustände und Text.
  • Bildschirme unterscheiden sich. Prüfe deine Markenfarbe sowohl auf einem Smartphone als auch auf einem Laptop.

Häufige Fragen

Was ist ein HEX-Farbcode?

Ein sechsstelliger Code für eine Bildschirmfarbe. Er beginnt mit # und enthält drei Paare hexadezimaler Ziffern für Rot, Grün und Blau. #FF0000 ist reines Rot, #000000 ist Schwarz und #FFFFFF ist Weiß.

Was ist der Unterschied zwischen HEX, RGB und HSL?

Sie beschreiben dieselbe Farbe auf unterschiedliche Weise. HEX und RGB geben die Anteile von Rot, Grün und Blau an. HSL steht für Farbton (den Winkel auf einem Farbkreis), Sättigung und Helligkeit und lässt sich leichter von Hand anpassen.

Was ist OKLCH und sollte ich es verwenden?

OKLCH ist ein neueres CSS-Farbformat, das darauf basiert, wie Menschen Farben wahrnehmen. Zwei Farben mit demselben L-Wert wirken gleich hell; dadurch lassen sich konsistente Paletten leichter erstellen. Alle aktuellen großen Browser unterstützen es.

Wie wird der Kontrast berechnet?

Mit der WCAG-2-Formel: relative Luminanz der helleren Farbe plus 0.05, geteilt durch die relative Luminanz der dunkleren Farbe plus 0.05. Für die vollständige Prüfung zweier Farben verwende den We.Inc-Kontrastprüfer.

Wie prüfe ich, welche Farbe ein Hex-Code ist?

Fügen Sie den Code in das Feld oben auf dieser Seite ein. Das Farbfeld zeigt die Farbe, und Sie erhalten die passenden RGB-, HSL- und OKLCH-Werte sowie hellere und dunklere Varianten. Wird das Feld rot, ist der Code kein gültiger drei- oder sechsstelliger Hex-Wert.

Was bedeutet ein dreistelliger Hex-Code wie #F80?

Es ist eine Kurzform, bei der jede Stelle verdoppelt wird. #F80 ist dieselbe Farbe wie #FF8800. Nur Farben, deren Paare sich wiederholen, lassen sich so schreiben.

Wird bei Hex-Codes zwischen Groß- und Kleinschreibung unterschieden?

Nein. #4f98fb und #4F98FB sind dieselbe Farbe. Wählen Sie eine Schreibweise und bleiben Sie im Code dabei, damit sich Werte leicht suchen lassen.

Wie rechne ich Hex von Hand in RGB um?

Teilen Sie die sechs Stellen in drei Paare und rechnen Sie jedes Paar von Basis 16 in Basis 10 um. Für #4F98FB: 4F ist 4 x 16 + 15 = 79, 98 ist 9 x 16 + 8 = 152, FB ist 15 x 16 + 11 = 251, also ist die Farbe rgb(79, 152, 251). Der Farbwähler erledigt das für Sie.

Wie bekomme ich den Hex-Code einer Farbe auf meinem Bildschirm?

Klicken Sie auf das kleine Farbquadrat neben dem Textfeld, um den Farbwähler Ihres Browsers zu öffnen. Manche Browser bieten dort eine Pipette, die eine Farbe vom Bildschirm aufnimmt; falls nicht, machen Sie einen Screenshot, nutzen Sie die Pipette eines Bildbearbeitungsprogramms und fügen Sie den Code hier ein.

Hex, RGB und HSL erklärt

  • Jede Farbe auf einem Bildschirm ist eine Mischung aus rotem, grünem und blauem Licht. Ein Hex-Code schreibt diese drei Mengen als Paare von Ziffern zur Basis 16, von 00 (nichts) bis FF (voll, also 255). #FF0000 ist also volles Rot ohne Grün oder Blau, #808080 ein mittleres Grau, und #4F98FB hat etwas Rot, recht viel Grün und fast volles Blau, was als klares Himmelblau erscheint.
  • RGB sagt genau dasselbe mit gewöhnlichen Zahlen: rgb(79, 152, 251). HSL beschreibt die Farbe so, wie Menschen meist über sie denken: Der Farbton ist die Position auf einem Farbkreis von 0 bis 360 Grad, die Sättigung gibt an, wie kräftig sie ist, und die Helligkeit reicht von Schwarz bei 0% bis Weiß bei 100%. Um eine Farbe etwas dunkler zu machen, ist es mit HSL viel einfacher, die Helligkeit zu senken, als neue Hex-Ziffern zu raten.
  • OKLCH ist das neueste der vier Formate. Sein Helligkeitswert soll der wahrgenommenen Helligkeit entsprechen, sodass ein Gelb und ein Blau mit demselben L etwa gleich hell wirken. Damit eignet es sich gut, um gleichmäßig abgestufte Paletten zu bauen.

Welches Format sollten Sie verwenden?

  • Verwenden Sie Hex, wenn Sie eine Farbe weitergeben, in ein Designtool einfügen oder Markenfarben in einem Website-Baukasten festlegen: Fast jedes Tool akzeptiert es. Verwenden Sie RGB oder HSL in CSS, wenn Sie Transparenz hinzufügen oder eine Farbe von Hand anpassen möchten. Verwenden Sie OKLCH, wenn Sie in CSS eine ganze Palette aufbauen und die Helligkeit über verschiedene Farbtöne gleich halten möchten.
  • Egal welches Sie wählen, sie beschreiben dieselbe Farbe. Wenn Sie den Wert auf dieser Seite in einem anderen Format kopieren, ändert sich ihr Aussehen nicht.

Eine Markenfarbe auswählen, die auf einer Website funktioniert

  • Eine Markenfarbe muss mehrere Aufgaben erfüllen: Auf Schaltflächen hervorstechen, mit weißem Text gut lesbar sein und auf einer ganzen Seite angenehm wirken. Mittlere Blau-, Grün- und Dunkelrottöne schaffen meist alles drei. Sehr helle Farben (Gelb, Pastellrosa) sehen in einem Logo gut aus, eignen sich aber schlecht für Schaltflächen, denn darauf ist weder weißer noch schwarzer Text ohne Anpassung gut lesbar.
  • Das Kontrastfeld zeigt das sofort. Liegt weißer Text unter 4.5:1, verwende entweder schwarzen Text oder wähle für Schaltflächen eine dunklere Nuance aus der Skala.

Tönungen, Nuancen und eine einfache Palette

  • Tönungen entstehen, wenn du deine Farbe mit Weiß mischst; Nuancen, wenn du Schwarz hinzufügst. Für eine praktische Website-Palette genügen wenige Abstufungen: eine sehr helle Tönung für Abschnittshintergründe, die Hauptfarbe für Schaltflächen und Links und eine dunklere Nuance für Hover-Zustände. Ergänze neutrale Grautöne für Text und Rahmen, und du hast eine vollständige, konsistente Auswahl.
  • Um die Kombination einer bestimmten Text- und Hintergrundfarbe zu prüfen (zum Beispiel grauen Text auf einem getönten Hintergrund), verwende den Kontrastprüfer. Er bewertet nach WCAG AA und AAA.

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Kostenlose Tools

Mehr zu diesem Thema

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap