{"id":178,"date":"2026-08-21T08:53:24","date_gmt":"2026-08-21T08:53:24","guid":{"rendered":"https:\/\/netguide.io\/tools\/farbpaletten-generator\/"},"modified":"2026-08-21T08:53:24","modified_gmt":"2026-08-21T08:53:24","slug":"farbpaletten-generator","status":"publish","type":"post","link":"https:\/\/netguide.io\/tools\/de\/farbpaletten-generator\/","title":{"rendered":"Farbpaletten-Generator"},"content":{"rendered":"<div id=\"netgu-2871311234\" class=\"netgu-before-content netgu-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-6258556257245998\" \ndata-ad-slot=\"3494115342\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n<style>\n.wp-pal-container { max-width:100%; background:#fff; padding:20px; border:1px solid #ddd; border-radius:10px; font-family:-apple-system, sans-serif; color:#333; }\n.wp-pal-title { margin:0 0 15px 0; color:#2271b1; font-size:1.4rem; }\n.wp-pal-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-bottom:10px; }\n.wp-pal-input-group label { display:block; font-size:11px; font-weight:bold; margin-bottom:4px; text-transform:uppercase; color:#666; }\n.wp-pal-input-group input, .wp-pal-input-group select { width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; }\n.wp-pal-checkbox-group { margin:15px 0; font-size:12px; display:flex; align-items:center; gap:8px; color:#666; }\n.wp-pal-note { font-size:12px; color:#666; margin-top:12px; min-height:1em; }\n.wp-pal-warn { color:#d63638; font-weight:bold; }\n.wp-pal-results { margin-top:20px; border-top:2px solid #eee; padding-top:15px; }\n.wp-pal-res-item { display:flex; justify-content:space-between; margin-bottom:6px; font-size:14px; gap:10px; }\n.wp-pal-total { font-weight:bold; font-size:18px; color:#2271b1; margin:10px 0; padding:5px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; }\n.wp-pal-val { color:#2271b1; font-weight:bold; }\n.wp-pal-out { width:100%; box-sizing:border-box; padding:10px; border:1px solid #ccc; border-radius:4px; font-family:monospace; font-size:13px; word-break:break-all; background:#f7f7f7; margin-top:6px; }\n.wp-pal-btn { background:#2271b1; color:#fff; border:none; padding:9px 14px; border-radius:4px; cursor:pointer; font-size:13px; margin-top:10px; }\n<\/style><style>\n.wp-pal-out { display:flex; flex-wrap:wrap; gap:0; margin-top:14px; border-radius:8px; overflow:hidden; border:1px solid #ddd; }\n.pal-swatch { flex:1 1 90px; min-height:90px; display:flex; align-items:flex-end; justify-content:center; padding:8px; font-family:monospace; font-size:12px; cursor:pointer; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); }\n<\/style><div class=\"wp-pal-container\">\n  <h3 class=\"wp-pal-title\">Farbpaletten-Generator<\/h3>\n  <div class=\"wp-pal-grid\">\n    <div class=\"wp-pal-input-group\"><label>Basisfarbe<\/label><input type=\"color\" id=\"pal-base\" value=\"#2271b1\" style=\"height:40px; padding:2px;\" oninput=\"genPalette()\"><\/div>\n    <div class=\"wp-pal-input-group\"><label>Hex<\/label><input type=\"text\" id=\"pal-hex\" value=\"#2271b1\" oninput=\"palSync()\"><\/div>\n    <div class=\"wp-pal-input-group\"><label>Schema<\/label><select id=\"pal-scheme\" onchange=\"genPalette()\">\n      <option value=\"complementary\">Komplement\u00e4r<\/option>\n      <option value=\"analogous\">Analog<\/option>\n      <option value=\"triadic\">Triadisch<\/option>\n      <option value=\"monochrom\" selected>Monochrom<\/option>\n    <\/select><\/div>\n  <\/div>\n  <div id=\"pal-out\" class=\"wp-pal-out\"><\/div>\n  <div class=\"wp-pal-note\">Klicke auf ein Farbfeld, um den Hex-Wert zu kopieren. Berechnung \u00fcber den HSL-Farbraum.<\/div>\n<\/div>\n<script>\nfunction palHexToHsl(hex){ hex=String(hex).replace('#',''); var r=parseInt(hex.substr(0,2),16)\/255,g=parseInt(hex.substr(2,2),16)\/255,b=parseInt(hex.substr(4,2),16)\/255; var mx=Math.max(r,g,b),mn=Math.min(r,g,b),h,s,l=(mx+mn)\/2; if(mx===mn){h=s=0;}else{var d=mx-mn; s=l>0.5? d\/(2-mx-mn): d\/(mx+mn); if(mx===r)h=(g-b)\/d+(g<b?6:0); else if(mx===g)h=(b-r)\/d+2; else h=(r-g)\/d+4; h=h\/6;} return [h*360,s*100,l*100]; }\nfunction palHslToHex(h,s,l){ h=((h%360)+360)%360\/360; s=s\/100; l=l\/100; function hue(p,q,t){ if(t<0)t+=1; if(t>1)t-=1; if(t<1\/6)return p+(q-p)*6*t; if(t<1\/2)return q; if(t<2\/3)return p+(q-p)*(2\/3-t)*6; return p; } var r,g,b; if(s===0){r=g=b=l;}else{var q=l<0.5? l*(1+s): l+s-l*s; var p=2*l-q; r=hue(p,q,h+1\/3); g=hue(p,q,h); b=hue(p,q,h-1\/3);} function th(x){var v=Math.round(x*255).toString(16); return v.length===1?'0'+v:v;} return '#'+th(r)+th(g)+th(b); }\nfunction genPalette(){\n  var base=document.getElementById('pal-base').value; var scheme=document.getElementById('pal-scheme').value;\n  var hsl=palHexToHsl(base); var h=hsl[0],s=hsl[1],l=hsl[2]; var cols=[];\n  if(scheme==='complementary'){ cols=[[h,s,l],[h+180,s,l]]; }\n  else if(scheme==='analogous'){ cols=[[h-30,s,l],[h,s,l],[h+30,s,l]]; }\n  else if(scheme==='triadic'){ cols=[[h,s,l],[h+120,s,l],[h+240,s,l]]; }\n  else { cols=[[h,s,Math.max(12,l-30)],[h,s,Math.max(12,l-15)],[h,s,l],[h,s,Math.min(90,l+15)],[h,s,Math.min(90,l+30)]]; }\n  var box=document.getElementById('pal-out'); box.innerHTML='';\n  for(var i=0;i<cols.length;i++){ var hex=palHslToHex(cols[i][0],cols[i][1],cols[i][2]); var sw=document.createElement('div'); sw.className='pal-swatch'; sw.style.background=hex; sw.textContent=hex; sw.title='Copy'; sw.onclick=(function(hx){return function(){ try{navigator.clipboard.writeText(hx);}catch(e){} };})(hex); box.appendChild(sw); }\n  document.getElementById('pal-hex').value=base;\n}\nfunction palSync(){ var hx=document.getElementById('pal-hex').value.trim(); if(\/^#?[0-9a-fA-F]{6}$\/.test(hx)){ if(hx.charAt(0)!=='#')hx='#'+hx; document.getElementById('pal-base').value=hx; genPalette(); } }\ngenPalette();\n<\/script>\n\n\n<div id=\"netgu-606118264\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<!-- NetGuide.io-After-Widget-Tools -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-6258556257245998\"\r\n     data-ad-slot=\"5175852350\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Harmonische Farbpaletten erstellen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Aus einer einzigen Basisfarbe erzeugt das Tool stimmige Paletten nach klassischen Farbharmonien. Ideal f\u00fcr Web-Design, Diagramme oder Markenfarben. Jeder Hex-Wert l\u00e4sst sich per Klick kopieren.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Komplement\u00e4r:<\/strong> Die Basisfarbe und ihr Gegen\u00fcber (180\u00b0) \u2013 starker Kontrast.<\/li>\n\n\n<li><strong>Analog:<\/strong> Nachbarfarben (\u00b130\u00b0) \u2013 ruhig und harmonisch.<\/li>\n\n\n<li><strong>Triadisch:<\/strong> Drei gleichm\u00e4\u00dfig verteilte Farben (120\u00b0) \u2013 lebendig und ausgewogen.<\/li>\n\n\n<li><strong>Monochrom:<\/strong> Ein Farbton in mehreren Helligkeitsstufen.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Verwandte Tools<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"\/tools\/de\/hex-rgb-converter\/\">Hex & RGB Converter<\/a><\/li>\n\n\n<li><a href=\"\/tools\/de\/wcag-kontrast-checker\/\">WCAG-Kontrast-Checker<\/a><\/li>\n<\/ul>\n\n\n<div id=\"netgu-803667613\" class=\"netgu-after-content netgu-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-6258556257245998\" \ndata-ad-slot=\"4559785002\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Farbpaletten aus einer Basisfarbe erzeugen \u2013 komplement\u00e4r, analog, triadisch oder monochrom. Hex-Werte per Klick kopieren.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[33],"tags":[],"class_list":["post-178","post","type-post","status-publish","format-standard","hentry","category-generatoren"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/comments?post=178"}],"version-history":[{"count":0,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/178\/revisions"}],"wp:attachment":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/media?parent=178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/categories?post=178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/tags?post=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}