AllinHub

Farbumrechner

Eine Farbe rein, jede Schreibweise raus, dazu Abstufungen und ein WCAG-Kontrastcheck.

Eingabe

Hex, rgb(), hsl(), hsv(), cmyk() oder ein CSS-Farbname. In Prozentwerten gehen Komma und Punkt.

In jeder Schreibweise

  • HEX –
  • RGB –
  • HSL –
  • HSV –
  • CMYK –
  • Name –

CMYK ist die einfache Formel ohne Druckerprofil; gedruckte Farben sehen anders aus.

Abstufungen und Harmonien

Die Helligkeit geht in gleichen Schritten Richtung Weiß und Richtung Schwarz; die Komplementärfarbe liegt gegenüber auf dem Farbkreis, die Nachbarfarben 30° zu beiden Seiten. Ein Klick auf ein Feld kopiert seinen Hex-Code.

Heller

Dunkler

Komplementär

Benachbart

Kontrastcheck

Gib oben eine gültige Farbe und hier eine zweite ein, um den Kontrast zu messen.

WCAG-Stufe Minimum Ergebnis
AA, normaler Text 4.5:1 –
AA, großer Text 3:1 –
AAA, normaler Text 7:1 –
AAA, großer Text 4.5:1 –

Großer Text ist mindestens 18 pt oder 14 pt fett (etwa 24 px oder 18,7 px fett). Das Verhältnis wird exakt beurteilt und mit zwei Nachkommastellen angezeigt.

Ähnliche Tools

Füge eine Farbe in der Schreibweise ein, die du gerade hast: als Hex-Code mit oder ohne #, als rgb() oder rgba(), hsl(), hsv(), cmyk() oder als einen der 148 CSS-Farbnamen. Der Umrechner zeigt sie beim Tippen in jeder anderen Schreibweise, jede mit Kopierknopf und Farbfeld, und der Farbwähler neben dem Feld läuft in beide Richtungen mit. Darunter liefern hellere und dunklere Stufen, die Komplementärfarbe und zwei Nachbarfarben eine schnelle Palette, und der Kontrastcheck misst das WCAG-Verhältnis gegen Weiß, Schwarz oder eine beliebige zweite Farbe. Alles läuft in deinem Browser; die Farbe wird nirgendwohin geschickt.

So geht’s

  1. Tippe oder füge eine Farbe ein: #1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%) oder dodgerblue.
  2. Lies sie in jeder anderen Schreibweise ab und kopiere die passende; Strg+Umschalt+C kopiert den Wert, auf dem du gerade bist.
  3. Zieh am Farbwähler neben dem Feld, um die Farbe anzupassen; Feld und alle Schreibweisen folgen.
  4. Wähle im Kontrastcheck Weiß, Schwarz oder eine andere Farbe und lies das Verhältnis mit den Marken für bestanden und nicht bestanden ab.

Was das Tool beherrscht

  • Nimmt Hex mit 3, 4, 6 und 8 Stellen, rgb() mit Werten oder Prozenten, hsl(), hsv() oder hsb(), cmyk(), nackte Listen wie 30, 144, 255 und alle 148 CSS-Farbnamen.
  • Nimmt den Alphakanal in Hex, rgb(), hsl() und hsv() mit; CMYK und die Palette haben keinen, und ein Hinweis sagt, wenn er wegfällt.
  • Begrenzt Werte außerhalb ihres Bereichs wie CSS und sagt es; der Farbton läuft um den Kreis.
  • Liest ein Dezimalkomma in Prozenten wie 55,9%, wenn die Liste mit Leerzeichen oder Komma und Leerzeichen getrennt ist.
  • Zeigt jedes Kontrasturteil als Wort und Symbol, nie nur als Farbe.

FAQ

Was ist der Unterschied zwischen HSL und HSV?

Beide beschreiben eine Farbe über Farbton, Sättigung und eine dritte Achse. Bei HSL ist das die Helligkeit (Lightness): 100 % ist immer Weiß, 50 % der reine Farbton bei voller Sättigung. Bei HSV, auch HSB genannt, ist es der Wert (Value) oder die Brightness: 100 % ist der reine Farbton selbst, Weiß erreichst du stattdessen über weniger Sättigung. Farbwähler in Grafikprogrammen nutzen meist HSV, CSS nutzt HSL; der Umrechner berechnet beide aus derselben Farbe.

Warum sieht CMYK gedruckt anders aus?

Das CMYK hier stammt aus der einfachen Formel: Schwarz übernimmt den dunkelsten Anteil der Farbe, die drei anderen Farben füllen den Rest, ganz ohne ICC-Profil. Echter Druck hängt von Papier, Farbsatz und dem Profil der Druckerei ab, und deren Software rechnet die RGB-Farbe durch dieses Profil um, sodass ihre Prozentwerte von diesen abweichen. Nimm dieses CMYK als Ausgangspunkt, nicht als endgültige Werte.

Welches Kontrastverhältnis braucht Text?

WCAG 2 verlangt auf Stufe AA mindestens 4,5:1 zwischen normalem Text und seinem Hintergrund und 3:1 für großen Text, also ab 18 Punkt oder 14 Punkt fett, etwa 24 px beziehungsweise 18,7 px fett. Stufe AAA hebt das auf 7:1 und 4,5:1 an. Der Check berechnet das Verhältnis aus der relativen Leuchtdichte, wie der Standard es definiert, und beurteilt den exakten Wert: 4,4999 fällt durch, auch wenn 4,50 angezeigt wird.

Wird die eingegebene Farbe irgendwohin geschickt?

Nein. Lesen, Umrechnen und die Kontrastrechnung passieren in der Seite selbst, nichts verlässt dein Gerät, und die Seite funktioniert auch ohne Verbindung. Die letzte Farbe und die zweite Farbe des Kontrastchecks bleiben nur in diesem Browser gespeichert, und die Hauptfarbe steht als ?c= in der Adresszeile, damit ein kopierter Link sie wieder öffnet. Leeren entfernt beides.

Aktualisiert am

Alle Tools