{"id":261,"date":"2026-08-21T19:41:29","date_gmt":"2026-08-21T19:41:29","guid":{"rendered":"https:\/\/netguide.io\/tools\/color-mixer\/"},"modified":"2026-08-21T19:41:29","modified_gmt":"2026-08-21T19:41:29","slug":"color-mixer","status":"publish","type":"post","link":"https:\/\/netguide.io\/tools\/en\/color-mixer\/","title":{"rendered":"Color Mixer"},"content":{"rendered":"<div id=\"netgu-3288376121\" 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-mix-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-mix-title { margin:0 0 15px 0; color:#2271b1; font-size:1.4rem; }\n.wp-mix-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-bottom:10px; }\n.wp-mix-input-group label { display:block; font-size:11px; font-weight:bold; margin-bottom:4px; text-transform:uppercase; color:#666; }\n.wp-mix-input-group input, .wp-mix-input-group select { width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; }\n.wp-mix-checkbox-group { margin:15px 0; font-size:12px; display:flex; align-items:center; gap:8px; color:#666; }\n.wp-mix-note { font-size:12px; color:#666; margin-top:12px; min-height:1em; }\n.wp-mix-warn { color:#d63638; font-weight:bold; }\n.wp-mix-results { margin-top:20px; border-top:2px solid #eee; padding-top:15px; }\n.wp-mix-res-item { display:flex; justify-content:space-between; margin-bottom:6px; font-size:14px; gap:10px; }\n.wp-mix-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-mix-val { color:#2271b1; font-weight:bold; }\n.wp-mix-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-mix-btn { background:#2271b1; color:#fff; border:none; padding:9px 14px; border-radius:4px; cursor:pointer; font-size:13px; margin-top:10px; }\n<\/style><div class=\"wp-mix-container\">\n  <h3 class=\"wp-mix-title\">Color Mixer<\/h3>\n  <div class=\"wp-mix-grid\">\n    <div class=\"wp-mix-input-group\"><label>Color 1<\/label><input type=\"color\" id=\"mix-c1\" value=\"#2271b1\" style=\"height:40px;padding:2px;\" oninput=\"calcMix()\"><\/div>\n    <div class=\"wp-mix-input-group\"><label>Color 2<\/label><input type=\"color\" id=\"mix-c2\" value=\"#ffd000\" style=\"height:40px;padding:2px;\" oninput=\"calcMix()\"><\/div>\n    <div class=\"wp-mix-input-group\" style=\"grid-column:1\/-1;\"><label>Mixing ratio (<span id=\"mix-ratio-label\">50 %<\/span>)<\/label><input type=\"range\" id=\"mix-ratio\" min=\"0\" max=\"100\" value=\"50\" oninput=\"calcMix()\"><\/div>\n  <\/div>\n  <div id=\"mix-preview\" style=\"height:90px;border-radius:8px;margin:14px 0;border:1px solid #ddd;\"><\/div>\n  <div class=\"wp-mix-grid\">\n    <div class=\"wp-mix-input-group\"><label>Hex<\/label><input type=\"text\" id=\"mix-out\" readonly onclick=\"copyMix('mix-out')\" style=\"cursor:pointer;\"><\/div>\n    <div class=\"wp-mix-input-group\"><label>RGB<\/label><input type=\"text\" id=\"mix-rgb\" readonly onclick=\"copyMix('mix-rgb')\" style=\"cursor:pointer;\"><\/div>\n  <\/div>\n  <div class=\"wp-mix-note\">0% = only color 1, 100% = only color 2. Linear mixing in RGB space. Click a field to copy.<\/div>\n<\/div>\n<script>\nfunction mixHex(hex){ hex=String(hex).replace('#',''); return {r:parseInt(hex.substr(0,2),16),g:parseInt(hex.substr(2,2),16),b:parseInt(hex.substr(4,2),16)}; }\nfunction mixTo(x){ var v=Math.round(x).toString(16); return (v.length===1?'0':'')+v; }\nfunction calcMix(){\n  var c1=mixHex(document.getElementById('mix-c1').value), c2=mixHex(document.getElementById('mix-c2').value); var t=(parseInt(document.getElementById('mix-ratio').value,10)||0)\/100;\n  var r=c1.r*(1-t)+c2.r*t, g=c1.g*(1-t)+c2.g*t, b=c1.b*(1-t)+c2.b*t;\n  var hex='#'+mixTo(r)+mixTo(g)+mixTo(b);\n  document.getElementById('mix-preview').style.background=hex;\n  document.getElementById('mix-out').value=hex;\n  document.getElementById('mix-rgb').value='rgb('+Math.round(r)+', '+Math.round(g)+', '+Math.round(b)+')';\n  document.getElementById('mix-ratio-label').innerText=Math.round(t*100)+' %';\n}\nfunction copyMix(id){ var o=document.getElementById(id); if(!o.value)return; o.focus(); o.select(); try{navigator.clipboard.writeText(o.value);}catch(e){} }\ncalcMix();\n<\/script>\n\n\n<div id=\"netgu-2145875955\"><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\">Mix colors<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The color mixer computes the blended color from two source colors. Use the slider to set the ratio, and the preview shows the result in real time \u2013 output as hex and RGB values.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mixing ratio:<\/strong> 50% gives the exact midpoint of both colors.<\/li>\n\n\n<li><strong>RGB mixing:<\/strong> The red, green and blue channels are linearly interpolated.<\/li>\n\n\n<li><strong>Copy:<\/strong> Click the hex or RGB field to grab the value.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Related tools<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"\/tools\/en\/color-palette-generator\/\">Color Palette Generator<\/a><\/li>\n\n\n<li><a href=\"\/tools\/en\/hex-rgb-converter\/\">Hex &#038; RGB Converter<\/a><\/li>\n<\/ul>\n\n\n<div id=\"netgu-117998043\" 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>Mix two colors \u2013 with a stepless mixing ratio and live preview, output as hex and RGB. Runs in the browser.<\/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":[160],"tags":[],"class_list":["post-261","post","type-post","status-publish","format-standard","hentry","category-generatoren-en"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/261","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=261"}],"version-history":[{"count":0,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/261\/revisions"}],"wp:attachment":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/media?parent=261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/categories?post=261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/tags?post=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}