Bookmarklets

Color Picker

bookmarklets Web Dev Design

The Color Picker bookmarklet is a powerful tool for web developers and designers to quickly identify colors on any webpage. This tool provides real-time color information for both background and text colors in multiple formats.

javascript:!function(){let n=!1,t=null,e=null;function o(n,t){const e=window.getComputedStyle(n)[t],o=document.createElement("div");o.style.color=e,document.body.appendChild(o);const i=window.getComputedStyle(o).color;return document.body.removeChild(o),i}function i(n,t){const e=n.match(/\d+/g).map(Number),o="#"+e.map((n=>{const t=n.toString(16);return 1===t.length?"0"+t:t})).join(""),i=function(n,t,e){n/=255,t/=255,e/=255;const o=Math.max(n,t,e),i=Math.min(n,t,e);let d,r,s=(o+i)/2;if(o===i)d=r=0;else{const l=o-i;switch(r=s>.5?l/(2-o-i):l/(o+i),o){case n:d=(t-e)/l+(t<e?6:0);break;case t:d=(e-n)/l+2;break;case e:d=(n-t)/l+4}d/=6}return[Math.round(360*d),Math.round(100*r),Math.round(100*s)]}(e[0],e[1],e[2]);switch(t){case"hex":default:return o;case"rgb":return`rgb(${e.join(", ")})`;case"hsl":return`hsl(${i[0]}, ${i[1]}%, ${i[2]}%)`}}function d(d){if(!n)return;d.preventDefault(),d.stopPropagation();const s=d.target;if(s===t||s===e||s===r)return;const l=o(s,"backgroundColor"),a=o(s,"color");e.style.display="block",e.style.left=d.pageX+10+"px",e.style.top=d.pageY+10+"px",e.innerHTML=`\n            <div style="margin-bottom: 10px;">\n                <strong>Background Color:</strong>\n                <div style="margin-top: 5px;">\n                    <div style="display: inline-block; width: 20px; height: 20px; background: ${l}; border: 1px solid #ddd;"></div>\n                    <div style="margin-top: 5px;">\n                        <div>HEX: ${i(l,"hex")}</div>\n                        <div>RGB: ${i(l,"rgb")}</div>\n                        <div>HSL: ${i(l,"hsl")}</div>\n                    </div>\n                </div>\n            </div>\n            <div>\n                <strong>Text Color:</strong>\n                <div style="margin-top: 5px;">\n                    <div style="display: inline-block; width: 20px; height: 20px; background: ${a}; border: 1px solid #ddd;"></div>\n                    <div style="margin-top: 5px;">\n                        <div>HEX: ${i(a,"hex")}</div>\n                        <div>RGB: ${i(a,"rgb")}</div>\n                        <div>HSL: ${i(a,"hsl")}</div>\n                    </div>\n                </div>\n            </div>\n        `}const r=document.createElement("div");r.style.cssText="\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        padding: 15px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        z-index: 10002;\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        pointer-events: auto;\n    ",r.innerHTML='\n        <div style="margin-bottom: 10px;">\n            <strong>Color Picker</strong>\n            <button onclick="window.stopPicking(); this.parentElement.parentElement.remove()" style="float:right;margin-left:10px;">×</button>\n        </div>\n        <div style="margin-bottom: 10px;">\n            <button onclick="window.startPicking()" \n                    style="width: 100%; padding: 8px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">\n                Start Picking Colors\n            </button>\n        </div>\n        <div style="font-size: 12px; color: #666;">\n            Hover over any element to see its colors\n        </div>\n    ',window.startPicking=function(){n||(n=!0,t=document.createElement("div"),t.style.cssText="\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.1);\n            z-index: 10000;\n            cursor: crosshair;\n            pointer-events: none;\n        ",document.body.appendChild(t),e=document.createElement("div"),e.style.cssText="\n            position: fixed;\n            background: white;\n            padding: 15px;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            z-index: 10001;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            display: none;\n            min-width: 200px;\n            pointer-events: auto;\n        ",document.body.appendChild(e),document.addEventListener("mousemove",d))},window.stopPicking=function(){n=!1,document.removeEventListener("mousemove",d),t&&(t.remove(),t=null),e&&(e.remove(),e=null)},document.body.appendChild(r)}();
Drag me to bookmark bar: 👉🏻 Color Picker

Why Use Color Picker?

The Color Picker bookmarklet is essential for developers and designers who need to:

Features

  1. Multiple Color Formats

    • HEX color codes
    • RGB color values
    • HSL color values
    • Visual color swatches

  2. Real-Time Updates

    • Instant color information
    • Live preview as you move
    • Both background and text colors
    • Accurate color detection

  3. User-Friendly Interface

    • Clean, modern design
    • Easy to read values
    • Visual color swatches
    • Non-intrusive overlay

  4. Comprehensive Information

    • Background colors
    • Text colors
    • Multiple format options
    • Precise color values

How to Use

  1. Click the bookmarklet to activate the tool
  2. Click the "Start Picking Colors" button
  3. Move your cursor over any element
  4. View the color information in the popup
  5. Close the tool when done

Best Practices