Farbkonverter

HEX ist eine hexadezimale Notation (z. B. #FF5733), die häufig im Webdesign verwendet wird. RGB stellt Farben durch Rot-, Grün- und Blauwerte (0-255) dar. HSL verwendet Farbton (0-360°), Sättigung (0-100%) und Helligkeit (0-100%) und ist damit intuitiv für die Anpassung von Farben. HSV verwendet Hue (Farbton), Saturation (Sättigung) und Value (Helligkeit) und wird häufig in Grafiksoftware verwendet. Jedes Format hat seine Stärken für verschiedene Anwendungsfälle.

Verwende HSL, wenn du Helligkeit oder Sättigung einer Farbe anpassen und den Farbton beibehalten möchtest. HSL ist intuitiver, um Farbvarianten, Tönungen und Abstufungen zu erstellen. Das Format eignet sich hervorragend für barrierefreie Farbschemata und responsive Designs, bei denen du die Helligkeit gezielt anpassen möchtest. RGB ist besser geeignet, wenn du die einzelnen Farbkanäle präzise steuern musst.

Untersuche das Element mit den Entwicklertools deines Browsers und kopiere den Farbwert aus dem CSS. Füge ihn in einem beliebigen Format (HEX, RGB oder HSL) in unseren Konverter ein. Wir zeigen dir sofort die entsprechenden Werte in allen anderen Formaten. Du kannst Farben auch mit Browser-Erweiterungen oder Farbwählern für Screenshots erfassen.

Der Alphakanal steuert die Transparenz, mit Werten von 0 (völlig transparent) bis 1 (völlig undurchsichtig). RGBA und HSLA enthalten diesen vierten Wert, um transparente oder halbtransparente Farben zu unterstützen. Dies ist wichtig für Überlagerungen, Schatten und überlagerte Designelemente im modernen Webdesign.

Ja! Moderne Browser unterstützen HSL- und HSLA-Farbformate in CSS vollständig. Verwende die Syntax hsl(360, 100%, 50%) oder hsla(360, 100%, 50%, 0.5) für Farben mit Transparenz. HSL ist besonders nützlich in CSS, um mit calc() oder CSS-custom-properties Farbvarianten für dynamische Designs zu erstellen.

Dreistellige HEX-Codes (#RGB) sind Kurzformen, bei denen jede Ziffer verdoppelt wird. Zum Beispiel entspricht #F00 dem Wert #FF0000. Die Kurzform funktioniert nur, wenn beide Ziffern jedes Farbkanals gleich sind. Verwende das vollständige sechsstelliges Format (#RRGGBB), um Farben präzise zu steuern und alle Farben abzubilden, die sich nicht als Kurzform darstellen lassen.

RGB ist das allgemeine Konzept der Darstellung von Farben mit Rot-, Grün- und Blauwerten. sRGB (Standard-RGB) ist ein spezieller RGB-Farbraum, der für die Konsistenz zwischen verschiedenen Geräten und Webbrowsern standardisiert ist. Die meisten Webfarben gehen von sRGB aus, weshalb die Farben auf verschiedenen Bildschirmen und Browsern im Allgemeinen einheitlich aussehen.

Prüfe nach dem Umwandeln den Kontrast für barrierefreie Texte. WCAG verlangt ein Kontrastverhältnis von 4.5:1 für normalen Text und 3:1 für großen Text. Beim Umwandeln bleiben die Farbwerte gleich. Die verschiedenen Formate helfen dir jedoch, die Farben in unterschiedlichen Design-Tools zu verwenden und dabei die Barrierefreiheit zu wahren.

Ja! Designprogramme wie Figma, Adobe XD oder Photoshop zeigen Farben normalerweise in RGB oder HEX an. Kopiere diese Werte und wandle sie in das für deinen Code benötigte Format um. So stimmen die Farben in Designentwürfen und der fertigen Umsetzung perfekt überein.

Bei der Umrechnung zwischen Farbformaten kann es zu Rundungen kommen. HEX verwendet Ganzzahlen (0-255), RGB ebenfalls, während HSL/HSV mit Grad und Prozentwerten arbeiten. Wenn du mehrfach hin und her umrechnest, kann es durch Rundungen zu geringfügigen Abweichungen kommen. Für eine präzise Farbabstimmung solltest du konsequent mit einem Format arbeiten.