{"id":199,"date":"2026-10-03T13:31:31","date_gmt":"2026-10-03T12:31:31","guid":{"rendered":"https:\/\/wpcalc.com\/de\/farbkonverter\/"},"modified":"2026-10-03T13:31:31","modified_gmt":"2026-10-03T12:31:31","slug":"farbkonverter","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/de\/web-tools\/farbkonverter\/","title":{"rendered":"Farbkonverter"},"content":{"rendered":"<section class=\"not-prose calculator-box\" aria-labelledby=\"calculator-title\"><div class=\"flex items-baseline sm:items-center justify-between gap-2 sm:gap-3\"><div class=\"flex flex-col sm:flex-row sm:items-center gap-2\"><span class=\"icon icon-calculator text-primary-700! text-base! dark:text-primary-300!\" aria-hidden=\"true\"><\/span><h2 id=\"calculator-title\" class=\"text-lg font-display font-bold\">HEX \u21c4 RGB \u21c4 HSL Farbkonverter<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"199\" data-favorite-title=\"Farbkonverter\" data-favorite-url=\"https:\/\/wpcalc.com\/de\/web-tools\/farbkonverter\/\" data-favorite-excerpt=\"Geben Sie einen CSS-Farbnamen oder -Code ein, um die zugeh\u00f6rigen RGB-, HEX-, HSL-, HWB-, CMYK- und NCol-Werte samt Farbvorschau anzuzeigen.\" aria-label=\"Zu Favoriten hinzuf\u00fcgen\" data-favorite-icon=\"icon icon-conversion\">\n    <span class=\"icon icon-shape-star-empty\" aria-hidden=\"true\"><\/span>\n  <\/button>\n  <div class=\"calcdash-favorite__tip\" aria-hidden=\"true\">\n   <span class=\"favorite-tooltip\" id=\"favorite-tooltip\"><\/span>\n  <\/div>\n  <span class=\"sr-only\" role=\"status\" id=\"favorite-status\"><\/span>\n<\/div><\/div><form action=\"https:\/\/wpcalc.com\/de\/web-tools\/farbkonverter\/\" method=\"POST\" class=\"calculator\" id=\"calculator-199\" data-post=\"199\"><fieldset class=\"fieldset-input\"><legend class=\"sr-only\">Eingabefelder<\/legend><div class=\"field is-single\" id=\"input-1\"><label for=\"field-1\">Farbe<\/label><input type=\"text\" name=\"farbe\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"z. B. red, #f00, rgb(255,0,0)\" step=\"any\" value=\"skyblue\"\/><small id=\"calc-info-1\">Geben Sie einen Farbnamen oder einen beliebigen CSS-Farbcode ein.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"Neu berechnen\" id=\"calculate-button\" data-post=\"199\">Berechnen<\/button><button type=\"reset\">Zur\u00fccksetzen<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">Automatisch berechnen<\/label><small>Wenn aktiviert, wird das Ergebnis automatisch aktualisiert, sobald Sie einen Wert \u00e4ndern.<\/small><\/div><div class=\"fieldset-result is-hidden\" aria-labelledby=\"result-title\" aria-live=\"polite\" role=\"region\"> <h3 class=\"result-title bg-gradient-to-r from-primary-50 to-gray-50 dark:from-primary-900 dark:to-gray-800\" id=\"result-title\"><span class=\"icon icon-s-pulse\" aria-hidden=\"true\"><\/span> Ihre Ergebnisse<\/h3><div class=\"result-box\"><div class=\"field-result\" id=\"output-1\"><span class=\"field-title\"><span>Name<\/span><\/span><span class=\"field-value\" id=\"result-1\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-2\"><span class=\"field-title\"><span>RGB<\/span><\/span><span class=\"field-value\" id=\"result-2\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-3\"><span class=\"field-title\"><span>HEX<\/span><\/span><span class=\"field-value\" id=\"result-3\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-4\"><span class=\"field-title\"><span>HSL<\/span><\/span><span class=\"field-value\" id=\"result-4\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-5\"><span class=\"field-title\"><span>HWB<\/span><\/span><span class=\"field-value\" id=\"result-5\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-6\"><span class=\"field-title\"><span>CMYK<\/span><\/span><span class=\"field-value\" id=\"result-6\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-7\"><span class=\"field-title\"><span>NCol<\/span><\/span><span class=\"field-value\" id=\"result-7\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-8\"><span class=\"field-title\"><span>Farbe<\/span><\/span><span class=\"field-value\" id=\"result-8\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><\/div><div class=\"result-actions\"><button type=\"button\" class=\"copy-link\"><svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"\/><path d=\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"\/><\/svg><span class=\"copy-link__text\">Link zu dieser Berechnung kopieren<\/span><\/button><span class=\"sr-only\" role=\"status\" id=\"copy-link-status\"><\/span><\/div><\/div><a href=\"#respond\" class=\"hidden transition-opacity duration-300 opacity-0 w-50 text-sm justify-center items-center gap-2 px-4 py-2 rounded bg-gray-200 text-gray-700 hover:bg-gray-300\" id=\"leave-comment\"><span class=\"icon icon-comments\" aria-hidden=\"true\"><\/span>Kommentar schreiben<\/a><\/form><\/section><section id=\"calc-reactions\" class=\"not-prose hidden my-12 bg-gradient-to-r from-primary-50 to-gray-50 border border-indigo-100 rounded-xl px-6 py-4 shadow-sm\" data-post=\"199\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">Wie finden Sie dieses Ergebnis?<\/p><div role=\"group\" aria-labelledby=\"calc-reactions-title\" class=\"grid grid-cols-3 sm:flex sm:flex-row sm:justify-around gap-4 sm:items-center sm:flex-wrap\"><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"like\"><span class=\"reaction-count\" data-reaction-count=\"like\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude00 <\/span><span class=\"reaction-description font-medium\">Gef\u00e4llt mir <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"helpful\"><span class=\"reaction-count\" data-reaction-count=\"helpful\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\udca1 <\/span><span class=\"reaction-description font-medium\">Hilfreich <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"confused\"><span class=\"reaction-count\" data-reaction-count=\"confused\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude15 <\/span><span class=\"reaction-description font-medium\">Verwirrt <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"disappointed\"><span class=\"reaction-count\" data-reaction-count=\"disappointed\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude1e <\/span><span class=\"reaction-description font-medium\">Entt\u00e4uscht <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"inaccurate\"><span class=\"reaction-count\" data-reaction-count=\"inaccurate\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\u274c <\/span><span class=\"reaction-description font-medium\">Ungenau <\/span><\/button><\/div><div id=\"reaction-message\" class=\"hidden mt-8 rounded-md border border-primary-100 bg-white\/50 backdrop-blur-sm px-4 py-2 text-sm text-center shadow-sm\"><\/div><\/section><div class=\"calcdash-ad not-prose calcdash-ad--calc_result calcdash-ad--in-article\"><ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-1721569815777345\" data-ad-slot=\"6317458308\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script><\/div>\n<style id=\"wpcoderpro-inline-1\">.formula-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section class=\"formula-box\" aria-labelledby=\"formula-title\">\r\n\t<div id=\"formula-title\" class=\"not-prose font-display mb-4\"><span class=\"icon icon-formula\" aria-hidden=\"true\"><\/span><h2>Formel des Farbkonverters<\/h2><\/div>\r\n\t<figure class=\"not-prose formula\">\r\n\t\t<figcaption class=\"formula-title\">Formel<\/figcaption>\r\n\t\t<div class=\"text-base text-gray-800\" id=\"formula\">\n\\[R=16h_1+h_2,\\qquad G=16h_3+h_4,\\qquad B=16h_5+h_6\\]\n<\/div>\r\n\t<\/figure>\r\n\t<\/p>\n<p><strong>Wobei gilt:<\/strong><\/p>\n<ul>\n<li>\\(h_1,\\ldots,h_6\\) \u2014 die sechs Ziffern einer HEX-Farbe, gelesen als Werte von 0 bis 15; A bis F stehen f\u00fcr 10 bis 15.<\/li>\n<li>\\(R\\), \\(G\\) und \\(B\\) \u2014 die Werte der roten, gr\u00fcnen und blauen Kan\u00e4le, jeweils von 0 bis 255.<\/li>\n<\/ul>\n<p>Diese Formel wandelt eine sechsstellige HEX-Farbe in RGB um. Der Rechner akzeptiert auch andere unterst\u00fctzte Farbformate und rechnet zwischen ihnen um.<\/p>\n<p>\r\n<\/section>\n<style id=\"wpcoderpro-inline-2\">.calculation-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section id=\"calculation\" class=\"calculation-box\" aria-labelledby=\"calculation-title\">\r\n\t<div id=\"calculation-title\" class=\"not-prose font-display\"><span class=\"icon icon-unordered-list\" aria-hidden=\"true\"><\/span><h2>Farbkonverter \u2013 Rechenbeispiel<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>Beispiel:<\/strong> Die Standardeingabe ist <code>skyblue<\/code>. Diese benannte Farbe entspricht <code>#87CEEB<\/code>, sodass ihre HEX-Ziffernpaare in RGB umgerechnet werden k\u00f6nnen.<\/p>\n<p>\\[R=8(16)+7=135,\\qquad G=12(16)+14=206,\\qquad B=14(16)+11=235\\]<\/p>\n<p><strong>Ergebnis:<\/strong> <code>skyblue<\/code> hat den HEX-Wert <code>#87CEEB<\/code> und den RGB-Wert <code>rgb(135, 206, 235)<\/code>. Die HSL-Werte liegen ungef\u00e4hr bei einem Farbton von 197\u00b0, einer S\u00e4ttigung von 71&nbsp;% und einer Helligkeit von 73&nbsp;%.<\/p>\n<p>\n\r\n<\/section>\n<h2>So verwenden Sie den Farbkonverter<\/h2>\n<ol>\n<li>Geben Sie eine Farbe in das Feld <strong>Farbe<\/strong> ein. Sie k\u00f6nnen mit der Voreinstellung <code>skyblue<\/code> beginnen, einen CSS-Farbnamen wie <code>red<\/code> eintippen oder einen Code wie <code>#f00<\/code> oder <code>rgb(255,0,0)<\/code> eingeben.<\/li>\n<li>Pr\u00fcfen Sie das Ergebnis unter <strong>Farbe<\/strong> f\u00fcr eine visuelle Vorschau der interpretierten Eingabe.<\/li>\n<li>Kopieren Sie das gew\u00fcnschte Format aus <strong>Name<\/strong>, <strong>RGB<\/strong>, <strong>HEX<\/strong>, <strong>HSL<\/strong>, <strong>HWB<\/strong>, <strong>CMYK<\/strong> oder <strong>NCol<\/strong>.<\/li>\n<\/ol>\n<p>Wenn unter <strong>Name<\/strong> \u201ekein Name\u201c steht, hat die Farbe keinen passenden Namen in der Namensliste des Konverters. Die numerischen Ergebnisse k\u00f6nnen trotzdem eine g\u00fcltige Farbe darstellen.<\/p>\n<h2>Was die Farbformate bedeuten<\/h2>\n<p>Eine digitale Farbe l\u00e4sst sich auf mehrere Arten beschreiben, ohne ihr Aussehen zu ver\u00e4ndern. <strong>HEX<\/strong> schreibt Rot, Gr\u00fcn und Blau als hexadezimale Ziffernpaare: <code>#87CEEB<\/code> bedeutet Rot 87, Gr\u00fcn CE und Blau EB zur Basis 16. <strong>RGB<\/strong> dr\u00fcckt dieselben Kan\u00e4le als Dezimalzahlen von 0 bis 255 aus. Wenn Sie die Umrechnung zur Basis 16 separat nachvollziehen m\u00f6chten, nutzen Sie den <a href=\"https:\/\/wpcalc.com\/de\/web-tools\/hex-konverter\/\">Hex-Rechner<\/a>; er rechnet Zahlen um, keine vollst\u00e4ndigen CSS-Farbwerte.<\/p>\n<p><strong>HSL<\/strong> beschreibt Farbton, S\u00e4ttigung und Helligkeit. Der Farbton ist eine Position auf dem Farbkreis, \u00fcblicherweise in Grad ausgedr\u00fcckt; die S\u00e4ttigung beschreibt die Farbintensit\u00e4t, und die Helligkeit verl\u00e4uft von Schwarz zu Wei\u00df. <strong>HWB<\/strong> nutzt stattdessen Farbton, Wei\u00dfanteil und Schwarzanteil. Diese Formate sind oft leichter zu lesen, wenn Sie Farbt\u00f6ne vergleichen oder eine Farbe nach Augenma\u00df anpassen. RGB und HEX sind h\u00e4ufig praktischer, wenn eine Spezifikation exakte Kanalwerte verlangt.<\/p>\n<p><strong>CMYK<\/strong> liefert Cyan-, Magenta-, Gelb- und Schwarzwerte, die aus der Bildschirmfarbe abgeleitet werden. <strong>NCol<\/strong> ist eine farbtonbasierte Notation, die der Konverter bereitstellt; sie wird in CSS nicht so h\u00e4ufig verwendet wie HEX, RGB oder HSL. Das Ausgabeformat \u00e4ndert nur, wie eine Farbe geschrieben wird, nicht die gew\u00e4hlte Farbe selbst. Kleine Unterschiede in den angezeigten Prozentwerten k\u00f6nnen durch Rundung entstehen.<\/p>\n<h2>Praktische Grenzen und Tipps<\/h2>\n<p>Der Konverter braucht eine Eingabe, die sein Farbparser erkennt. Standardisierte CSS-Farbnamen und g\u00e4ngige CSS-Farbcodes sind gute Ausgangspunkte. Ein dreistelliger HEX-Code ist eine Kurzschreibweise: <code>#f00<\/code> steht beispielsweise f\u00fcr <code>#ff0000<\/code>. HEX-Buchstaben sind unabh\u00e4ngig von Gro\u00df- und Kleinschreibung, sodass <code>#87ceeb<\/code> und <code>#87CEEB<\/code> dieselbe Farbe darstellen.<\/p>\n<p>Manche Eingaben enthalten einen Alphawert, der die Transparenz steuert. Bei erkannten Eingaben mit Alphawert verwenden die RGB-, HSL-, HWB- und NCol-Ergebnisse Formen mit Alphawert. Pr\u00fcfen Sie jedes Ergebnis, bevor Sie es in eine andere Anwendung kopieren: Nicht jedes aufgef\u00fchrte Format beschreibt Transparenz auf dieselbe Weise. Die Vorschau kann zudem vor einem anderen Hintergrund anders aussehen, wenn eine Farbe teilweise transparent ist.<\/p>\n<p>CMYK ist hier eine mathematische Umrechnung aus einer digitalen Farbe, keine Konvertierung \u00fcber ein Druckprofil. Das gedruckte Erscheinungsbild h\u00e4ngt vom Drucker, den Tinten, dem Papier und den Farbmanagement-Einstellungen ab; nutzen Sie daher einen geeigneten Druck-Workflow, wenn es auf exakte Produktionsfarben ankommt. Ebenso h\u00e4ngt das Erscheinungsbild einer Farbe auf dem Bildschirm vom Display und dessen Einstellungen ab; allein \u00fcbereinstimmende Zahlenwerte k\u00f6nnen kein identisches Erscheinungsbild auf jedem Ger\u00e4t garantieren.<\/p>\n<p>Wenn Sie eine HEX-Farbe in einen URL-Abfrageparameter einf\u00fcgen, beachten Sie, dass <code>#<\/code> in URLs eine besondere Bedeutung hat. Verwenden Sie den <a href=\"https:\/\/wpcalc.com\/de\/web-tools\/url-encoder\/\">URL-Encoder<\/a>, um den Wert bei Bedarf zu kodieren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Geben Sie einen CSS-Farbnamen oder -Code ein, um die zugeh\u00f6rigen RGB-, HEX-, HSL-, HWB-, CMYK- und NCol-Werte samt Farbvorschau anzuzeigen.<\/p>\n","protected":false},"author":3168,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15],"tags":[28],"class_list":["post-199","post","type-post","status-publish","format-standard","hentry","category-web-tools","tag-konverter-tools"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/posts\/199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/users\/3168"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/comments?post=199"}],"version-history":[{"count":4,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/posts\/199\/revisions"}],"predecessor-version":[{"id":4195,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/posts\/199\/revisions\/4195"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/media?parent=199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/categories?post=199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/tags?post=199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}