Kostenloser Farbkonverter: HEX, RGB, HSL und CMYK
Dieser kostenlose Farbkonverter nimmt eine Farbe in HEX, RGB, HSL oder CMYK und gibt sie in allen vier Formaten zurück, mit einem Farbmuster zur Überprüfung, einsatzbereiten CSS-Werten zum Kopieren und der nächsten CSS-benannten Farbe. Gib #1273b5, rgb(18, 115, 181), hsl(204, 82%, 39%) oder 90, 36, 0, 29 ein und das Format wird automatisch erkannt. Er eignet sich für Designer, Entwickler und alle, die eine Markenfarbe für den Druck abstimmen.
Color Converter
Generators and Converters
Über dieses Tool
HEX und RGB beschreiben dasselbe: wie viel rotes, grünes und blaues Licht ein Bildschirm mischt, von 0 bis 255 pro Kanal, geschrieben in hexadezimal oder dezimal. HSL beschreibt die Farbe so, wie Menschen sie sehen: ein Farbton auf dem Farbkreis, eine Sättigung und eine Helligkeit, was es zum einfachsten Format macht, um eine Farbe in CSS heller, dunkler oder matter zu machen. CMYK ist das subtraktive Modell, das Drucker verwenden: Cyan-, Magenta-, Gelb- und Schwarztinte als Prozentsätze.
Der Konverter akzeptiert Kurzform-HEX (#abc), HEX mit oder ohne Hash, rgb()- und hsl()-CSS-Funktionen, bloße komma- oder leerzeichen-getrennte Zahlen und cmyk() oder vier Prozentsätze. Alpha-Werte werden ignoriert. Er konvertiert über RGB mit den Standardformeln, rundet HSL auf ganze Grad und Prozentsätze und zeigt die nächste der CSS-benannten Farben nach Abstand an, was praktisch ist, wenn du einen lesbaren Namen in einem Styleguide brauchst.
Die CMYK-Konvertierung hier ist die einfache mathematische Art, ohne ein ICC-Farbprofil, daher zeigt sie dir die Tintenanteile, aber nicht genau, wie eine bestimmte Druckmaschine und ein bestimmtes Papier die Farbe darstellen. Für Markenarbeit, die in den Druck geht, gib deinem Drucker den HEX- oder RGB-Wert und fordere einen Proof an, oder gleiche ein Pantone-Muster ab. Bildschirmfarben, die heller sind als jede Tinte, wie reines RGB-Grün, werden immer matter gedruckt.
Häufig gestellte Fragen
Wie konvertiere ich HEX zu RGB von Hand?
Teile die sechsstellige HEX in drei Paare auf: #1273b5 ist 12, 73 und b5. Konvertiere jedes Paar von hexadezimal zu dezimal: 12 ist 18, 73 ist 115 und b5 ist 181, also ist die Farbe rgb(18, 115, 181). Ein dreistelliges HEX wie #fa3 verdoppelt zuerst jede Ziffer: #ffaa33. In die andere Richtung konvertiere jeden Kanal zu einer zweistelligen hexadezimalen Zahl und verbinde sie.
Warum sieht meine CMYK-Farbe beim Druck anders aus?
Ein Bildschirm mischt Licht und ein Drucker mischt Tinte, und Tinte kann die hellsten Bildschirmfarben nicht reproduzieren, besonders gesättigte Grüns, Blues und Orangen. Die Mathematik hier gibt die Tintenanteile ohne ein Farbprofil an, daher hängt das gedruckte Ergebnis auch von der Druckmaschine, dem Papier und dem Profil ab, das der Drucker verwendet. Fordere einen gedruckten Proof für jede Markenfarbe an, die wichtig ist.
Wann sollte ich HSL statt HEX in CSS verwenden?
Verwende HSL, wenn du eine Palette aus einer Markenfarbe erstellst: behalte den Farbton, ändere dann die Helligkeit für Hover-Zustände, Rahmen und Hintergründe und die Sättigung für matter Varianten. Die Werte bleiben lesbar und verwandt, während ein Satz von HEX-Codes zufällig aussieht. Jeder moderne Browser unterstützt hsl(), und du kannst HSL und HEX frei in einem Stylesheet mischen.
Verarbeitet der Konverter Transparenz?
Er liest 8-stellige HEX-, rgba()- und hsla()-Werte, ignoriert aber den Alpha-Teil und konvertiert nur die Volltonfarbe, da CMYK und benannte Farben keine Transparenz haben. Füge das Alpha in deinem CSS wieder hinzu, zum Beispiel rgb(18 115 181 / 50%). Das Farbmuster zeigt immer die Volltonfarbe.