{"id":1987,"date":"2025-12-23T16:40:03","date_gmt":"2025-12-23T16:40:03","guid":{"rendered":"https:\/\/www.brooklynclick.com\/?page_id=1987"},"modified":"2026-10-02T01:53:23","modified_gmt":"2026-10-02T01:53:23","slug":"color-mixer-tool","status":"publish","type":"page","link":"https:\/\/www.brooklynclick.com\/color-mixer-tool\/","title":{"rendered":"Color Mixer Tool"},"content":{"rendered":"<div class=\"wpb-content-wrapper\" id=\"wpb-content-root\"><div class=\"vc_row wpb_row vc_row-fluid bg-image-ps-inherit\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<div class=\"wp-color-mixer\">\r\n  <h3>\ud83c\udfa8 Advanced Color Mixer<\/h3>\r\n\r\n  <div class=\"pickers\">\r\n    <input type=\"color\" id=\"c1\" value=\"#ff0000\">\r\n    <input type=\"color\" id=\"c2\" value=\"#0000ff\">\r\n  <\/div>\r\n\r\n  <div class=\"range\">\r\n    <input type=\"range\" id=\"ratio\" min=\"0\" max=\"100\" value=\"50\">\r\n    <span id=\"ratioVal\">50%<\/span>\r\n  <\/div>\r\n\r\n  <label class=\"toggle\">\r\n    <input type=\"checkbox\" id=\"gradientMode\">\r\n    Gradient Mode\r\n  <\/label>\r\n\r\n  <div id=\"preview\"><\/div>\r\n\r\n  <div class=\"codes\">\r\n    <div>\r\n      HEX: <span id=\"hexVal\"><\/span>\r\n      <button onclick=\"copyText('hexVal')\">Copy<\/button>\r\n    <\/div>\r\n    <div>\r\n      RGB: <span id=\"rgbVal\"><\/span>\r\n      <button onclick=\"copyText('rgbVal')\">Copy<\/button>\r\n    <\/div>\r\n    <div>\r\n      HSL: <span id=\"hslVal\"><\/span>\r\n      <button onclick=\"copyText('hslVal')\">Copy<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <button class=\"save-btn\" onclick=\"saveColor()\">\u2b50 Save Color<\/button>\r\n\r\n  <div id=\"savedColors\"><\/div>\r\n<\/div>\r\n\r\n<style>\r\n.wp-color-mixer {\r\n  max-width: 420px;\r\n  margin: 25px auto;\r\n  padding: 18px;\r\n  background: #fff;\r\n  border-radius: 16px;\r\n  box-shadow: 0 12px 30px rgba(0,0,0,.08);\r\n  font-family: inherit;\r\n}\r\n.wp-color-mixer h3 {\r\n  text-align: center;\r\n  margin-bottom: 15px;\r\n}\r\n.pickers {\r\n  display: flex;\r\n  gap: 10px;\r\n}\r\n.pickers input {\r\n  flex: 1;\r\n  height: 45px;\r\n  border-radius: 10px;\r\n  border: none;\r\n}\r\n.range {\r\n  margin: 15px 0;\r\n  text-align: center;\r\n}\r\n.range input {\r\n  width: 100%;\r\n}\r\n.toggle {\r\n  display: block;\r\n  text-align: center;\r\n  margin-bottom: 10px;\r\n  font-weight: 600;\r\n}\r\n#preview {\r\n  height: 90px;\r\n  border-radius: 12px;\r\n  margin-bottom: 12px;\r\n  border: 1px solid #eee;\r\n}\r\n.codes div {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-bottom: 6px;\r\n  font-size: 14px;\r\n}\r\n.codes button {\r\n  border: none;\r\n  padding: 4px 8px;\r\n  border-radius: 8px;\r\n  background: #111;\r\n  color: #fff;\r\n  cursor: pointer;\r\n}\r\n.save-btn {\r\n  width: 100%;\r\n  padding: 10px;\r\n  border-radius: 12px;\r\n  border: none;\r\n  background: #2563eb;\r\n  color: #fff;\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n}\r\n#savedColors {\r\n  display: flex;\r\n  gap: 8px;\r\n  flex-wrap: wrap;\r\n  margin-top: 12px;\r\n}\r\n.saved {\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n  border: 1px solid #ddd;\r\n}\r\n<\/style>\r\n\r\n<script>\r\nconst c1 = document.getElementById('c1');\r\nconst c2 = document.getElementById('c2');\r\nconst ratio = document.getElementById('ratio');\r\nconst ratioVal = document.getElementById('ratioVal');\r\nconst preview = document.getElementById('preview');\r\nconst hexVal = document.getElementById('hexVal');\r\nconst rgbVal = document.getElementById('rgbVal');\r\nconst hslVal = document.getElementById('hslVal');\r\nconst gradientMode = document.getElementById('gradientMode');\r\nconst savedBox = document.getElementById('savedColors');\r\n\r\nfunction hexToRgb(hex) {\r\n  const bigint = parseInt(hex.slice(1), 16);\r\n  return {\r\n    r: (bigint >> 16) & 255,\r\n    g: (bigint >> 8) & 255,\r\n    b: bigint & 255\r\n  };\r\n}\r\n\r\nfunction rgbToHsl(r,g,b){\r\n  r\/=255; g\/=255; b\/=255;\r\n  let max=Math.max(r,g,b), min=Math.min(r,g,b);\r\n  let h,s,l=(max+min)\/2;\r\n  if(max==min){h=s=0;}\r\n  else{\r\n    let d=max-min;\r\n    s=l>0.5?d\/(2-max-min):d\/(max+min);\r\n    switch(max){\r\n      case r:h=(g-b)\/d+(g<b?6:0);break;\r\n      case g:h=(b-r)\/d+2;break;\r\n      case b:h=(r-g)\/d+4;break;\r\n    }\r\n    h*=60;\r\n  }\r\n  return `hsl(${h.toFixed(0)}, ${Math.round(s*100)}%, ${Math.round(l*100)}%)`;\r\n}\r\n\r\nfunction mixColors(){\r\n  let r1=hexToRgb(c1.value), r2=hexToRgb(c2.value);\r\n  let p=ratio.value\/100;\r\n  let r=Math.round(r1.r*(1-p)+r2.r*p);\r\n  let g=Math.round(r1.g*(1-p)+r2.g*p);\r\n  let b=Math.round(r1.b*(1-p)+r2.b*p);\r\n  let hex=`#${[r,g,b].map(x=>x.toString(16).padStart(2,'0')).join('')}`;\r\n  \r\n  ratioVal.textContent=ratio.value+'%';\r\n  hexVal.textContent=hex.toUpperCase();\r\n  rgbVal.textContent=`rgb(${r}, ${g}, ${b})`;\r\n  hslVal.textContent=rgbToHsl(r,g,b);\r\n\r\n  preview.style.background = gradientMode.checked\r\n    ? `linear-gradient(90deg, ${c1.value}, ${c2.value})`\r\n    : hex;\r\n}\r\n\r\nfunction copyText(id){\r\n  navigator.clipboard.writeText(document.getElementById(id).innerText);\r\n}\r\n\r\nfunction saveColor(){\r\n  let hex=hexVal.innerText;\r\n  let colors=JSON.parse(localStorage.getItem('colors')||'[]');\r\n  if(!colors.includes(hex)){ colors.push(hex); }\r\n  localStorage.setItem('colors',JSON.stringify(colors));\r\n  loadSaved();\r\n}\r\n\r\nfunction loadSaved(){\r\n  savedBox.innerHTML='';\r\n  (JSON.parse(localStorage.getItem('colors')||[])).forEach(c=>{\r\n    let d=document.createElement('div');\r\n    d.className='saved';\r\n    d.style.background=c;\r\n    d.onclick=()=>{ preview.style.background=c; };\r\n    savedBox.appendChild(d);\r\n  });\r\n}\r\n\r\n[c1,c2,ratio,gradientMode].forEach(el=>el.addEventListener('input',mixColors));\r\nmixColors(); loadSaved();\r\n<\/script>\r\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"\ud83c\udfa8 Advanced Color Mixer 50% Gradient Mode HEX: Copy RGB: Copy HSL: Copy \u2b50 Save Color","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"class_list":["post-1987","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Color Mixer Tool<\/title>\n<meta name=\"description\" content=\"color mixer tool: \ud83c\udfa8 Advanced Color Mixer 50% Gradient Mode HEX: Copy RGB: Copy HSL: Copy \u2b50 Save Color\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.brooklynclick.com\/cs\/wp-json\/wp\/v2\/pages\/1987\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Color Mixer Tool\" \/>\n<meta property=\"og:description\" content=\"color mixer tool: \ud83c\udfa8 Advanced Color Mixer 50% Gradient Mode HEX: Copy RGB: Copy HSL: Copy \u2b50 Save Color\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.brooklynclick.com\/color-mixer-tool\/\" \/>\n<meta property=\"og:site_name\" content=\"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Brooklynclick786\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-02T01:53:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.brooklynclick.com\/wp-content\/uploads\/2025\/05\/brooklyn-click-favicon.png\" \/>\n\t<meta property=\"og:image:width\" content=\"790\" \/>\n\t<meta property=\"og:image:height\" content=\"672\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Color Mixer Tool\" \/>\n<meta name=\"twitter:description\" content=\"color mixer tool: \ud83c\udfa8 Advanced Color Mixer 50% Gradient Mode HEX: Copy RGB: Copy HSL: Copy \u2b50 Save Color\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/color-mixer-tool\\\/\",\"url\":\"https:\\\/\\\/www.brooklynclick.com\\\/color-mixer-tool\\\/\",\"name\":\"Color Mixer Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#website\"},\"datePublished\":\"2025-12-23T16:40:03+00:00\",\"dateModified\":\"2026-10-02T01:53:23+00:00\",\"description\":\"color mixer tool: \ud83c\udfa8 Advanced Color Mixer 50% Gradient Mode HEX: Copy RGB: Copy HSL: Copy \u2b50 Save Color\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/color-mixer-tool\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.brooklynclick.com\\\/color-mixer-tool\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/color-mixer-tool\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.brooklynclick.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Color Mixer Tool\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#website\",\"url\":\"https:\\\/\\\/www.brooklynclick.com\\\/\",\"name\":\"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA\",\"description\":\"BrooklynClick.com is a dynamic SEO and digital marketing agency based in the heart of Brooklyn, dedicated to driving growth and visibility for businesses of all sizes.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.brooklynclick.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#organization\",\"name\":\"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA\",\"url\":\"https:\\\/\\\/www.brooklynclick.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.brooklynclick.com\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/brooklyn-click-favicon.png\",\"contentUrl\":\"https:\\\/\\\/www.brooklynclick.com\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/brooklyn-click-favicon.png\",\"width\":790,\"height\":672,\"caption\":\"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA\"},\"image\":{\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Brooklynclick786\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Color Mixer Tool","description":"color mixer tool: \ud83c\udfa8 Advanced Color Mixer 50% Gradient Mode HEX: Copy RGB: Copy HSL: Copy \u2b50 Save Color","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.brooklynclick.com\/cs\/wp-json\/wp\/v2\/pages\/1987\/","og_locale":"en_US","og_type":"article","og_title":"Color Mixer Tool","og_description":"color mixer tool: \ud83c\udfa8 Advanced Color Mixer 50% Gradient Mode HEX: Copy RGB: Copy HSL: Copy \u2b50 Save Color","og_url":"https:\/\/www.brooklynclick.com\/color-mixer-tool\/","og_site_name":"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA","article_publisher":"https:\/\/www.facebook.com\/Brooklynclick786\/","article_modified_time":"2026-10-02T01:53:23+00:00","og_image":[{"width":790,"height":672,"url":"https:\/\/www.brooklynclick.com\/wp-content\/uploads\/2025\/05\/brooklyn-click-favicon.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"Color Mixer Tool","twitter_description":"color mixer tool: \ud83c\udfa8 Advanced Color Mixer 50% Gradient Mode HEX: Copy RGB: Copy HSL: Copy \u2b50 Save Color","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.brooklynclick.com\/color-mixer-tool\/","url":"https:\/\/www.brooklynclick.com\/color-mixer-tool\/","name":"Color Mixer Tool","isPartOf":{"@id":"https:\/\/www.brooklynclick.com\/#website"},"datePublished":"2025-12-23T16:40:03+00:00","dateModified":"2026-10-02T01:53:23+00:00","description":"color mixer tool: \ud83c\udfa8 Advanced Color Mixer 50% Gradient Mode HEX: Copy RGB: Copy HSL: Copy \u2b50 Save Color","breadcrumb":{"@id":"https:\/\/www.brooklynclick.com\/color-mixer-tool\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.brooklynclick.com\/color-mixer-tool\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.brooklynclick.com\/color-mixer-tool\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.brooklynclick.com\/"},{"@type":"ListItem","position":2,"name":"Color Mixer Tool"}]},{"@type":"WebSite","@id":"https:\/\/www.brooklynclick.com\/#website","url":"https:\/\/www.brooklynclick.com\/","name":"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA","description":"BrooklynClick.com is a dynamic SEO and digital marketing agency based in the heart of Brooklyn, dedicated to driving growth and visibility for businesses of all sizes.","publisher":{"@id":"https:\/\/www.brooklynclick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.brooklynclick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.brooklynclick.com\/#organization","name":"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA","url":"https:\/\/www.brooklynclick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.brooklynclick.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.brooklynclick.com\/wp-content\/uploads\/2025\/05\/brooklyn-click-favicon.png","contentUrl":"https:\/\/www.brooklynclick.com\/wp-content\/uploads\/2025\/05\/brooklyn-click-favicon.png","width":790,"height":672,"caption":"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA"},"image":{"@id":"https:\/\/www.brooklynclick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Brooklynclick786\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/pages\/1987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/comments?post=1987"}],"version-history":[{"count":1,"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/pages\/1987\/revisions"}],"predecessor-version":[{"id":2094,"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/pages\/1987\/revisions\/2094"}],"wp:attachment":[{"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/media?parent=1987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}