Utilore

Farbcodes umrechnen

Geben Sie eine Farbe in beliebiger gängiger Schreibweise ein — #1f5fd6, 1f5fd6, #1f5, rgb(31, 95, 214) — und alle übrigen Formen erscheinen zugleich, samt der Kontrastwerte für lesbaren Text.

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

Kontrast:

So geht es

Gut zu wissen

Drei Schreibweisen für dieselbe Farbe

HEX ist kompakt und in CSS universell. RGB benennt die Kanäle ausdrücklich, was zählt, wenn ein Wert berechnet statt von Hand geschrieben wird. HSL beschreibt Farbton, Sättigung und Helligkeit — die Form der Wahl, wenn dieselbe Farbe eine Nuance heller sein soll, denn man ändert eine Zahl, statt drei zu raten.

Kontrast ist keine Zierde

Nach WCAG braucht Fließtext ein Verhältnis von mindestens 4,5:1 zum Hintergrund, großer Text mindestens 3:1. Die beiden Zahlen hier sagen sofort, ob diese Farbe weißen Text trägt, schwarzen Text — oder keinen von beiden, noch bevor das Layout bei der Entwicklung landet.

Häufige Fragen

Welche Formate werden akzeptiert?

HEX mit drei, vier, sechs und acht Stellen, mit oder ohne Raute, dazu rgb() und rgba() mit Kommas oder Leerzeichen. Alpha bleibt erhalten und erscheint im HEX-Wert.

Warum zeigt HSL manchmal eine leicht andere Farbe?

HSL-Werte werden zur Lesbarkeit auf ganze Zahlen gerundet, deshalb kann der Rückweg einen Kanal um eine Einheit verschieben. HEX und RGB sind exakt.

Wird etwas an einen Server geschickt?

Nein. Alles wird auf der Seite berechnet — Markenfarben aus einem unveröffentlichten Entwurf bleiben auf Ihrem Rechner.

Ähnliche Tools