Titel: " Farbkonverter: Konvertieren Sie HEX, RGB, HSL, HWB und CMYK auf die richtige Art und Weise und quot; slug: Farbkonverter-Führer-Tool: Farbkonverter-Kategorie: Farbtyp: Cluster
Farbkonverter: Konvertieren Sie HEX, RGB, HSL, HWB und CMYK auf die richtige Art und Weise
Das erste Mal, dass mich ein Farbbit auf einer Druckauflage hatte Ich hatte eine Landingpage für eines meiner WordPress-Produkte aufgebaut, mich im Browser auf dem Markenblau abgemeldet und dann dasselbe " blue" an eine Druckerei für eine Charge Sticker geschickt, was zurückkam, war ein flaches, leicht grau gefärbtes Marineblau, das nicht wie der Bildschirm aussah Niemand hatte die RGB-Bildschirmfarbe in CMYK umgewandelt, also ahnte der Drucker, und die Vermutung war falsch Das war der Tag, an dem ich aufhörte, eine Farbe als einzelne Saite zu behandeln und begann, sie als einen Wert zu behandeln, der in mehreren Sprachen gleichzeitig gesprochen werden muss.
Genau dafür ist ein Farbkonverter da, Du gibst ihm eine Farbe in einer Syntax und er gibt Dir jede zweite Syntax zurück, also sind das Blau in Deinem CSS, das Blau in Deiner Designdatei, und das Blau, das Dein Drucker erhält, alle beweisbar die gleiche Farbe Ich habe die gebaut Farbkonverter auf Toolz.dev Weil ich es satt hatte, Hex-Codes auf drei verschiedenen Websites einzufügen, um RGB, HSL und CMYK getrennt zu erhalten.
tl; dr: Ein Farbkonverter nimmt eine Farbe und drückt sie auf einmal in HEX, RGB, HSL, HWB und CMYK aus, dazu kommt der nächste CSS-Farbname, Verwenden Sie RGB und HEX für Bildschirme, HSL oder HWB, wenn Sie eine Farbe von Hand anstupsen möchten, und CMYK für den Druck Der Toolz.dev-Konverter läuft vollständig in Ihrem Browser, hält den Alphakanal intakt und lädt niemals hoch, was Sie einfügen.
Was ist ein Farbkonverter?
Ein Farbkonverter analysiert eine Farbe, die in einer beliebigen gängigen CSS-Syntax geschrieben ist, und berechnet ihr Äquivalent in den anderen. Welche Syntax existiert und wie jede genau konvertiert, wird definiert durch CSS-Farbmodul Level 4. Die Rechnung ist nicht kompliziert, aber es von Hand zu machen ist mühsam und fehleranfällig Konvertieren #4466EE Zu RGB bedeutet, die sechs Hex-Ziffern in drei Paare aufzuteilen und jedes Paar als Basis-16-Zahl zu lesen: 44 68 ist, ist 66 102 ist, und EE 238 ist, geben rgb(68, 102, 238). In die andere Richtung zu gehen bedeutet, jeden Kanal in eine zweistellige Hex-Zeichenfolge aufzuteilen und sie zu verbinden An HSL zu gelangen bedeutet, die Kanäle zu normalisieren, das Minimum und Maximum zu finden und Farbton, Sättigung und Leichtigkeit von denen zu berechnen Das willst du nicht um 2 Uhr morgens im Kopf machen.
Der Wert eines Konverters ist nicht nur das Sparen von Arithmetik Es garantiert Konsistenz Wenn ein Tool alle Formate aus einer einzigen analysierten Farbe produziert, besteht keine Chance, dass der RGB, den Sie kopiert haben und die HSL, die Sie kopiert haben, leicht unterschiedliche Farben beschreiben, weil Sie zwischen den Schritten unterschiedlich gerundet haben Eine Quelle, eine Wahrheit, jedes Format.
Warum gibt es überhaupt Farbformate?
Jedes Farbformat überlebt, weil es in einem Job wirklich gut ist.
RGB ist die Funktionsweise von Bildschirmen Ein Display sendet rotes, grünes und blaues Licht aus, und das Mischen dieser drei mit unterschiedlichen Intensitäten erzeugt jede Farbe, die Sie sehen Das macht RGB zur Muttersprache des Browsers: Welche Syntax Sie auch immer in CSS schreiben, die Rendering-Engine löst sie auf RGB auf, bevor sie ein Pixel aufleuchtet.
HEX ist RGB in Kurzform. #4466EE Ist das gleiche wie rgb(68, 102, 238)‘gerade in eine kompakte Zeichenfolge gepackt, die sich leicht in ein Stylesheet oder ein Design-Tool einfügen lässt, beliebt ist es, weil es kurz und eindeutig ist, nicht weil es leistungsfähiger ist.
HSL beschreibt eine Farbe nach Farbton, Sättigung und Helligkeit. Es ist das Format, nach dem ich greife, wenn ich eine Benutzeroberfläche von Hand abstimme. Um einen Knopf im Schwebeflug dunkler zu machen, lasse ich die Helligkeit um ein paar Punkte fallen und lasse Farbton und Sättigung in Ruhe. Der Versuch, dies im rohen RGB zu tun, bedeutet, alle drei Kanäle ungleich stark zu ändern und zu hoffen, dass der Farbton nicht driftet.
HWB, definiert in der Spezifikation CSS Color Module Level 4 (https://www.w3.org/TR/css-color-4/), beschreibt den gleichen Farbton, indem wie viel Weiß und wie viel Schwarz eingemischt werden Es passt sich sauber an, wie Menschen tatsächlich über Farbtöne und Farbtöne denken: Weiß hinzufügen, um aufzuhellen, Schwarz hinzufügen, um abzudunkeln Es ist neuer, also verwende ich es hauptsächlich, wenn die Lesbarkeit des Codes wichtiger ist als die Reichweite des Browsers.
CMYK ist das Druckmodell Drucker legen Cyan, Magenta, Gelb und schwarze Tinte auf weißes Papier, und jede Tinte subtrahiert Licht, anstatt es hinzuzufügen Deshalb kann eine lebendige Bildschirmfarbe auf dem Papier stumpfer aussehen: Die Farbbereiche, die die beiden Modelle erzeugen können, sogenannte Gamuts, sind unterschiedlich. Ein Konverter liefert Ihnen die CMYK-Näherung, aber er kann keine Tinte erfinden, die nicht existiert.
Wie konvertiere ich HEX in RGB und zurück?
Die mit großem Abstand häufigste Konvertierung ist HEX in RGB und RGB in HEX. Hier ist die manuelle Methode, damit Sie jedes Tool, einschließlich meines, auf seine geistige Gesundheit überprüfen können.
Um HEX in RGB umzuwandeln, teilen Sie die sechs Ziffern in drei Paare auf und lesen Sie jede als Hexadezimalzahl von 0 bis 255. Dreistellige Kurzschrift wie #46E Erweitert sich, indem jede Ziffer verdoppelt wird #4466EE Zuerst. Um RGB in HEX umzuwandeln, nehmen Sie jeden Kanalwert, konvertieren Sie ihn in eine zweistellige Hex-Zeichenfolge mit einer führenden Null, falls erforderlich, und verbinden Sie sie hinter einem Hash.
Anstatt dies wiederholt zu tun, fügen Sie den Wert in den ein Farbkonverter und jedes Format auf einmal lesen Wenn Sie auch eine Farbe visuell auswählen und live aktualisieren sehen müssen, wird die Farbwähler Der bessere Ausgangspunkt ist, und die beiden Tools teilen sich denselben Konvertierungskern, sodass ihre Zahlen übereinstimmen.
Wann sollte ich CMYK statt RGB verwenden?
Verwenden Sie CMYK nur, wenn die Ausgabe Tinte auf Papier ist Visitenkarten, Aufkleber, Verpackung und alle kommerziellen Druckaufträge erwarten CMYK-Werte, und das Senden von RGB an einen Drucker bedeutet, dass der Drucker oder seine Software für Sie konvertiert, oft mit Ergebnissen, die Sie nicht abgemeldet haben Das war mein Aufkleberfehler in einem Satz.
Verwenden Sie RGB und seine HEX-Kurzschrift für alles, was auf einem Bildschirm angezeigt wird: Websites, Apps, soziale Grafiken, Videos. Wenn ein Projekt beide Welten umfasst, behalten Sie RGB oder HEX als Quelle der Wahrheit und generieren Sie die CMYK-Näherung mit einem Konverter in dem Moment, in dem Sie den Druck abgeben, damit Sie die CMYK-Werte in Augenschein nehmen und jede Farbe markieren können, die sich stark verändert, bevor Sie eine Auflage kostet.
Wie vergleichen sich Farbformate?
| Format | am besten für | Alpha-unterstützung | Beispiel |
|---|---|---|---|
| verhexen | Kompaktes CSS, Designübergabe | Nur 8-stellige Form | #4466EE |
| RGB / RGBA | Bildschirme, programmatische Farbe | Ja (RGBA) | rgb(68, 102, 238) |
| HSL / HSLA | Handabstimmender Farbton und Leichtigkeit | Ja (HSLA) | hsl(228, 83%, 60%) |
| HWB | Lesbare Tönungen und Farbtöne | Ja (mit Slash Alpha) | hwb(228 27% 7%) |
| CMYK | Drucken, Tinte auf Papier | kein | cmyk(71%, 57%, 0%, 7%) |
Die Tabelle sollte im Hinterkopf behalten werden, da sie ordentlich auf einen Workflow abgebildet wird: Design in HEX oder optisch auswählen, HSL oder HWB einstellen, in RGB oder HEX an Bildschirme senden und nur an der Druckgrenze in CMYK konvertieren.
Wie bewegt sich Transparenz zwischen Formaten?
Bei Alpha gehen leise viele Conversions schief Der Alphakanal steuert die Deckkraft, von 0 (voll transparent) bis 1 (voll undurchsichtig) RGBA und HSLA tragen es als vierten Wert, ein 8-stelliger HEX als viertes Paar: #4466EECC ist das blau mit etwa 80 Prozent Deckkraft, weil CC 204 von 255 ist Plain HEX und cmyk() überhaupt keinen Alphakanal haben.
Der Toolz.dev-Konverter bewahrt Alpha durch jedes Format, das es unterstützt. Wenn Sie einfügen rgba(0, 0, 0, 0.5) Sie bekommen #00000080 In der HEXA-Reihe und hsla(0, 0%, 0%, 0.5) In der HSLA-Zeile beschreiben alle das gleiche halbtransparente Schwarz. Wenn Sie stattdessen den einfachen HEX oder die CMYK-Zeile kopieren, kopieren Sie die vollständig undurchsichtige Farbe, was eine bewusste Wahl und kein Fehler ist: Diese Formate können keine Undurchsichtigkeit ausdrücken, sodass sie die Farbe so zeigen, als wäre sie solide Wenn es auf Transparenz ankommt, kopieren Sie sie aus einer Alpha-fähigen Zeile.
Kann ich einen CSS-Farbnamen konvertieren?
Ja, und es funktioniert in beide Richtungen Geben Sie ein Schlüsselwort ein wie tomato, rebeccapurple, oder slategray und der Konverter löst es in HEX, RGB, HSL, HWB und CMYK auf. Der vollständige Satz von 148 benannten Farben stammt aus der CSS Color Module Level 4-Spezifikation, sodass die Werte genau mit dem übereinstimmen, was ein Browser auflöst.
In die andere Richtung wird es wirklich nützlich Fügen Sie eine numerische Farbe ein und der Konverter meldet den genauen CSS-Namen, wenn einer übereinstimmt, und zeigt immer die nächstgelegene benannte Farbe nach RGB-Distanz an, wenn dies nicht der Fall ist. Diese nächste Übereinstimmung ist praktisch zum Benennen von Variablen und zum Schreiben lesbarer Designdokumente: #663399 Kommt zurück als rebeccapurple, und etwas in der Nähe kommt als " zurück. am nächsten: rebeccapurple" Damit Sie wissen, in welcher Nachbarschaft Sie sich befinden.
Wie passt das zu einem echten Design-Workflow?
Hier erfahren Sie, wie ich Farbe tatsächlich in einem Projekt verwende und wo jedes Werkzeug passt.
Ich beginne mit der Wahl einer Primärfarbe, meist optisch mit der Farbwähler. Wenn ich meine Marke blau habe, dann laufe ich sie durch die Farbkonverter Um die HEX-, RGB-, HSL- und CMYK-Werte an einer Stelle zu sperren, füge ich diese in den Designsystem-Dok. ein, damit jeder Teamkollege und jeder Anbieter mit den gleichen Zahlen arbeitet.
Dann baue ich die Palette auf Unterstützende Farbtöne kommen von stupsenden Leichtigkeit in HSL, und ich überprüfe jedes Text-on-Background-Paar mit dem Farbkontrastprüfung Die Palette ist also zugänglich, bevor sie versendet wird, nicht nach einer Beschwerde Wenn ich einen Hintergrundblüten brauche, füttere ich zwei dieser Farben in die Gradientengeneratordrohen
Um schließlich auf den Abstand und die Typografie in dieser Farbe zu reagieren, koppele ich die Palette mit der CSS-Klemmgenerator Größen skalieren also so glatt, wie die Farben konsistent sind Farbe und Layout sind zwei Hälften des gleichen Lacks.
Wenn es Ihnen wichtig ist, wohin Ihre Daten während der Arbeit gelangen, lohnt es sich zu lesen, wie diese Tools damit umgehen Alles im Farbkonverter läuft clientseitig, eine Designwahl, über die ich in der geschrieben habe Leitfaden zum Datenschutz in Online-Tools, und es steht neben dem Rest meiner Tagesausrüstung Webentwickler-Toolkitdrohen
Ist es genau genug für die Produktion?
Für Bildschirmarbeit ja, ohne Qualifikation HEX, RGB, HSL und HWB sind alle exakte Darstellungen derselben sRGB-Farbe, also werden zwischen ihnen Roundtrips sauber konvertiert: Konvertieren Sie eine Farbe in HSL und zurück und Sie landen auf demselben RGB-Triple, geben oder nehmen Sie eine Rundungseinheit auf einem Kanal Diese Rundung ist inhärent für die Darstellung einer kontinuierlichen Farbe in ganzzahligen Kanälen, kein Fehler in einem Werkzeug.
Für CMYK behandeln Sie die Ausgabe als solide Standardnäherung und nicht als farbverwalteten Beweis Echte Druckfarbe hängt von dem spezifischen Papier, den Tinten und dem ICC-Profil ab, das Ihr Drucker verwendet, was kein browserbasiertes Tool kennen kann Der Konverter verwendet die standardmäßige naive CMYK-Formel, was genau das ist, was die meisten Designtools standardmäßig anzeigen und ein zuverlässiger Ausgangspunkt ist Wenn ein Auftrag farbkritisch ist, holen Sie sich vor dem vollständigen Lauf einen physischen Beweis vom Drucker Das ist die Lektion, die mir meine grau-marinen Aufkleber beigebracht haben, und es ist billiger, aus diesem Absatz zu lernen als aus einer Schachtel mit falschen Aufklebern.
Wie sieht es mit neueren Farbräumen wie LAB und OKLCH aus?
Wenn Sie CSS genau befolgen, haben Sie es gesehen lab(), lch(), oklab(), und oklch() Erscheinen in Stylesheets und Design-Tools Diese stammen aus der Spezifikation CSS Color Module Level 4 und sie lösen ein echtes Problem: RGB, HSL und HWB sind alle an das sRGB-Bildschirmmodell gebunden, so dass zwei Farben, die für das Auge gleich unterschiedlich aussehen, sehr unterschiedliche numerische Abstände voneinander entfernt sein können, und ein Wide-Gamut-Display kann Farben zeigen, die sRGB einfach nicht beschreiben kann Die OK-Farbräume sind wahrnehmungsmäßig einheitlich, was sie hervorragend zum Erzeugen gleichmäßig abgestufter Paletten und zum Interpolieren von Farbverläufen macht, die in der Mitte nicht trüben.
Ich habe diesen Konverter bewusst auf die Formate konzentriert, die Sie in alltägliche Produktions-CSS einfügen und an Drucker übergeben: HEX, RGB, HSL, HWB und CMYK. Das ist die Menge, die die überwiegende Mehrheit der realen Aufgaben abdeckt, und jede von ihnen ist sauber auf die gleiche sRGB-Farbe abgebildet, sodass Konvertierungen zwischen ihnen exakt und reversibel sind. Die Räume mit größerem Gamut beinhalten Gamut-Mapping-Entscheidungen, die leicht subtil falsch liegen, und die Mischung in einem einfachen Konverter würde Klarheit gegen Abdeckung eintauschen, die die meisten Menschen nicht benötigen.
Die praktische Regel, die ich befolge: Greifen Sie nach OKLCH, wenn Sie algorithmisch eine Palette oder einen Gradienten generieren und wahrnehmungsmäßig gleichmäßige Schritte wünschen, und bleiben Sie bei HEX, RGB und HSL für die tägliche Arbeit des Schreibens von Komponenten Wenn Sie in OKLCH entwerfen, konvertieren Sie die resultierenden Ankerfarben vor der Übergabe mit Ihrem Designtool in HEX oder RGB, sodass die Werte in Ihrem Stylesheet dieselben sind, die dieser Konverter und Ihre Teamkollegen lesen können.
Häufig gestellte Fragen
Wie konvertiere ich HEX in RGB?
Teilen Sie den sechsstelligen HEX-Code in drei Paare auf und lesen Sie jedes als Hexadezimalzahl von 0 bis 255. In #4466EE, 44 68 (rot) ist, 66 102 (grün) ist, und EE 238 (blau) ist, geben rgb(68, 102, 238). Fügen Sie den HEX-Code in den Konverter ein und der RGB-Wert erscheint sofort neben jedem anderen Format.
Wie konvertiere ich RGB in HEX?
Konvertieren Sie jeden der roten, grünen und blauen Werte (0 bis 255) in eine zweistellige Hexadezimalzahl und verbinden Sie sie nach einem Hash. rgb(68, 102, 238) wird #4466EE. Der Konverter macht das sofort und gibt Ihnen auch die 8-stellige HEXA-Form, wenn ein Alpha-Wert vorhanden ist.
Was ist der Unterschied zwischen HSL und HWB?
HSL beschreibt eine Farbe nach Farbton, Sättigung und Helligkeit, während HWB den gleichen Farbton danach beschreibt, wie viel Weiß und wie viel Schwarz darin eingemischt sind HWB ist oft intuitiver für Farbtöne und Farbtöne: Zunehmendes Weiß erhellt die Farbe und zunehmende Schwärze verdunkelt sie Beide bilden sich auf den exakt gleichen RGB-Wert ab, sodass Sie frei zwischen ihnen wechseln können.
Wann sollte ich CMYK statt RGB verwenden?
Verwenden Sie CMYK für den Druck und RGB für Bildschirme CMYK ist ein subtraktives Modell, das auf Cyan-, Magenta-, Gelb- und Schwarztinten basiert, also ist es das, was kommerzielle Drucker erwarten. RGB ist additiv und beschreibt das von Displays emittierte Licht. Eine Bildschirmfarbe hat eine CMYK-Näherung, aber die beiden Gamuts unterscheiden sich, sodass lebendige Bildschirmfarben im Druck stumpfer aussehen können.
Unterstützt der Konverter Transparenz?
Ja. Geben Sie einen Alpha-Wert durch rgba(), hsla(), oder einen 8-stelligen HEX und die Opazität bleibt in jedem alpha-bewussten Ausgang erhalten Formate ohne Alphakanal, wie zum Beispiel einfacher HEX und cmyk()Zeigen Sie die vollständig undurchsichtige Farbe an. Überprüfen Sie daher die RGBA- oder HEXA-Ausgabe, wenn es auf Transparenz ankommt.
Kann ich einen CSS-Farbnamen konvertieren?
Ja. Geben Sie ein CSS-Schlüsselwort ein, z tomato, rebeccapurple, oder slategray Und der Konverter löst es in HEX, RGB, HSL, HWB und CMYK auf. Es funktioniert auch umgekehrt: Fügen Sie eine numerische Farbe ein und melden Sie den genauen CSS-Namen, wenn einer übereinstimmt, plus die am nächsten benannte Farbe als Referenz.
Ist der Farbkonverter kostenlos und privat?
Ja. Der Konverter ist völlig kostenlos ohne Anmeldung, ohne Limits und ohne Wasserzeichen. Alle Pars und Konvertierungen werden in Ihrem Browser mit clientseitigem JavaScript ausgeführt, sodass die von Ihnen eingegebenen Farben Ihr Gerät nie verlassen und das Tool weiterhin offline funktioniert, sobald die Seite geladen wurde.
