Démo : https://twogrey.github.io/CoPiBoo---Color-Picker-Bookmarklet/
Ajoutez un des deux codes ci-dessous à votre barre de favoris :
javascript:(function(){var el=document.createElement('script');el.src='https://twogrey.github.io/CoPiBoo---Color-Picker-Bookmarklet/assets/js/script.min.js';document.body.appendChild(el);})();javascript:(function(){"use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _defineProperties(t,n){for(var e=0;e<n.length;e++){var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function _createClass(t,n,e){return n&&_defineProperties(t.prototype,n),e&&_defineProperties(t,e),Object.defineProperty(t,"prototype",{writable:!1}),t}function _classCallCheck(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}function _inherits(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),n&&_setPrototypeOf(t,n)}function _createSuper(e){var o=_isNativeReflectConstruct();return function(){var t,n=_getPrototypeOf(e);return _possibleConstructorReturn(this,o?(t=_getPrototypeOf(this).constructor,Reflect.construct(n,arguments,t)):n.apply(this,arguments))}}function _possibleConstructorReturn(t,n){if(n&&("object"===_typeof(n)||"function"==typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function _wrapNativeSuper(t){var e="function"==typeof Map?new Map:void 0;return(_wrapNativeSuper=function(t){if(null===t||!_isNativeFunction(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,n)}function n(){return _construct(t,arguments,_getPrototypeOf(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),_setPrototypeOf(n,t)})(t)}function _construct(t,n,e){return(_construct=_isNativeReflectConstruct()?Reflect.construct:function(t,n,e){var o=[null];o.push.apply(o,n);n=new(Function.bind.apply(t,o));return e&&_setPrototypeOf(n,e.prototype),n}).apply(null,arguments)}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(t){return!1}}function _isNativeFunction(t){return-1!==Function.toString.call(t).indexOf("[native code]")}function _setPrototypeOf(t,n){return(_setPrototypeOf=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function _getPrototypeOf(t){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var copiboo,eyeDropper,options_autoClosing="true"===localStorage.getItem("copiboo_enable_auto_closing"),options_lang=null!==localStorage.getItem("options_lang")?localStorage.getItem("options_lang"):"en",options_modal_size=null!==localStorage.getItem("options_modal_size")?localStorage.getItem("options_modal_size"):"100",options_autoCopying=null!==localStorage.getItem("copiboo_enable_auto_copying")?localStorage.getItem("copiboo_enable_auto_copying"):"no",copibooElement=function(){_inherits(a,_wrapNativeSuper(HTMLElement));var o=_createSuper(a);function a(){_classCallCheck(this,a);var t,n=(t=o.call(this)).attachShadow({mode:"open"}),e=document.createElement("style");return e.textContent='\n\t\t*, ::before, ::after { box-sizing: border-box }\n\n\t\t.sr-only {\n\t\t\tborder: 0 !important;\n\t\t\tclip: rect(1px, 1px, 1px, 1px) !important;\n\t\t\t-webkit-clip-path: inset(50%) !important;\n\t\t\tclip-path: inset(50%) !important;\n\t\t\theight: 1px !important;\n\t\t\tmargin: -1px !important;\n\t\t\toverflow: hidden !important;\n\t\t\tpadding: 0 !important;\n\t\t\tposition: absolute !important;\n\t\t\twidth: 1px !important;\n\t\t\twhite-space: nowrap !important;\n\t\t}\n\n\t\t:is(button, summary, input, select):hover { outline: auto }\n\n\t\tbutton, \n\t\tsummary { cursor: pointer }\n\n\t\ta { \n\t\t\tcolor: inherit; \n\t\t\toutline-offset: 0.25em; \n\t\t}\n\n\t\ta:hover { outline: auto }\n\n\t\t:is([type=radio], [type=checkbox]) { \n\t\t\tinline-size: 1em; \n\t\t\tblock-size: 1em; \n\t\t\tmargin: 0; \n\t\t\tfont-size: 1em; \n\t\t}\n\n\t\t[type=range] { \n\t\t\twidth: 9em;\n\t\t\tmargin: 0;\n\t\t\tfont-size: 1em; \n\t\t}\n\n\t\toutput {\n\t\t\tfont-family: monospace;\n\t\t}\n\n\t\tselect {\n\t\t\tfont: inherit;\n\t\t}\n\n\t\t[type=color] {\n\t\t\tinline-size: 100%; \n\t\t\tblock-size: 100%\n\t\t}\n\n\t\tsvg {\n\t\t\tinline-size: 1.5em; \n\t\t\tblock-size: 1.5em;\n\t\t\tfill: none; \n\t\t\tstroke: currentColor; \n\t\t\tstroke-width: 1.5; \n\t\t\tstroke-linecap:round; \n\t\t\tstroke-linejoin:round;\n\t\t}\n\n\t\tsection {\n\t\t\t--btn-s: 2em; \n\t\t\t--p: 1em; \n\t\t\t--rad: 0.5em; \n\t\t\t--offset: 1.5em; \n\t\t\t--timer-h: 0.25em; \n\t\t\tbox-sizing: border-box; \n\t\t\tposition: fixed; \n\t\t\tz-index: 9999; \n\t\t\tdisplay: flex; \n\t\t\tgap: 0.5em; \n\t\t\tinset-block-start: var(--offset); \n\t\t\tinset-inline-end: var(--offset); \n\t\t\tinline-size: min-content; \n\t\t\tmax-inline-size: calc(100% - var(--offset) * 2); \n\t\t\tpadding-block-start: var(--p); \n\t\t\tpadding-block-end: calc(var(--p) + var(--timer-h)); \n\t\t\tpadding-inline: var(--p); \n\t\t\tborder-radius: 0.5em; \n\t\t\tfont-size: min(calc(1rem * (var(--custom-fs) / 100)), 4.2vw); \n\t\t\tfont-family: system-ui; \n\t\t\tline-height: 1.4; \n\t\t\tcolor: #000; \n\t\t\tbackground: linear-gradient(rgb(0 0 0 / 5%),rgb(0 0 0 / 5%)) rgba(var(--color-rgb), 0.25); \n\t\t\tbackdrop-filter: blur(5px); \n\t\t\taccent-color: var(--color);\n\t\t\tanimation: hide 300ms 5000ms forwards\n\t\t}\n\n\t\tsection > div {\n\t\t\tmax-height: calc(100vh - var(--offset) * 2 - var(--p) * 2);\n\t\t\toverflow-y: auto;\n\t\t}\n\n\t\theader {\n\t\t\tposition: relative; \n\t\t\tz-index: 2; \n\t\t\tbox-shadow: 0 .5em .21em -.625em; \n\t\t\tpadding: calc(var(--p) * .5) calc(var(--p) * 0.8); \n\t\t\tborder-radius: var(--rad) var(--rad) 0 0;\n\t\t\tfont-size: 1.25em; \n\t\t\tfont-variant-caps: small-caps; \n\t\t\tfont-weight: 700; \n\t\t\tbackground-color: var(--color); \n\t\t\tcolor: var(--text-color); \n\t\t}\n\n\t\t.timer {\n\t\t\tposition: absolute; \n\t\t\tinset-inline-start: var(--p); \n\t\t\tinset-block-end: calc(var(--p) / 2); \n\t\t\tinline-size: calc(100% - var(--p) * 2); \n\t\t\tblock-size: var(--timer-h); \n\t\t\tbackground-color: var(--color); \n\t\t\tanimation: timer 5000ms linear forwards; \n\t\t\ttransform-origin: left center; \n\t\t\ttransform: scaleX(0);\n\t\t}\n\n\t\t[dir="rtl"] .timer {\n\t\t\ttransform-origin: right center; \n\t\t}\n\n\t\t.close {\n\t\t\t--tx: 50%;\n\t\t\tposition: absolute; \n\t\t\tinset-block-start: 0; \n\t\t\tinset-inline-end: 0; \n\t\t\tdisplay: flex; \n\t\t\tpadding: 0.5em;\n\t\t\tborder: 0; \n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 1em;\n\t\t\tbackground-color: var(--color); \n\t\t\tcolor: var(--text-color); \n\t\t\ttransform: translate(var(--tx), -50%); \n\t\t}\n\n\t\t[dir="rtl"] .close {\n\t\t\t--tx: -50%;\n\t\t}\n\n\t\t.content {\n\t\t\tpadding: var(--p); \n\t\t\tbackground-color: #fff\n\t\t}\n\n\t\t.main {\n\t\t\t--gap: calc(var(--p) / 2); \n\t\t\tdisplay: grid; \n\t\t\tgap: var(--gap); \n\t\t\tfont-family: monospace\n\t\t}\n\n\t\t.main__left {\n\t\t\tgrid-row: 1 / 3; \n\t\t\tdisplay: flex;\n\t\t\tinline-size: calc(var(--btn-s) * 2 + var(--gap)); \n\t\t}\n\n\t\t.main__right {\n\t\t\t--gap: calc(var(--p) / 2); \n\t\t\tgrid-column-start: 2; \n\t\t\tdisplay: flex; \n\t\t\tgap: var(--gap); \n\t\t\talign-items: center; \n\t\t\tpadding-inline-end: var(--gap); \n\t\t\tborder-radius: 0.25em; \n\t\t\tbackground: linear-gradient(rgb(0 0 0 / 2.5%),rgb(0 0 0 / 2.5%)) rgba(var(--color-rgb), 0.25);\n\t\t}\n\n\t\t.copy { \n\t\t\torder: -1; \n\t\t\tdisplay: flex; \n\t\t\talign-items: center; \n\t\t\tjustify-content: center; \n\t\t\tinline-size: var(--btn-s); \n\t\t\tblock-size: var(--btn-s); \n\t\t\tborder-radius: inherit; \n\t\t\tborder: 0; \n\t\t\tfont-size: 1em; \n\t\t\tbackground: linear-gradient(rgb(0 0 0 / 5%),rgb(0 0 0 / 5%)) var(--color); \n\t\t\tcolor: var(--text-color); \n\t\t\toutline-offset: -0.1875em; \n\t\t}\n\n\t\tdetails { padding-block-start: var(--p) }\n\n\t\tsummary {\n\t\t\tfont-variant-caps: small-caps; \n\t\t\tfont-weight: 500;\n\t\t}\n\n\t\tsummary::marker { content: "⚙️ " }\n\n\t\tdetails > div {\n\t\t\t--details_btw: 0.15em; \n\t\t\tposition: relative; \n\t\t\tdisplay: grid;\n\t\t\tgap: calc(var(--p) * 0.75);\n\t\t\tflex-direction: column;\n\t\t\tpadding: var(--p); \n\t\t\tborder-block-start: var(--details_btw) solid var(--color); \n\t\t\tmargin-block-start: var(--p); \n\t\t\tfont-size: 0.875em; \n\t\t\tbackground: linear-gradient(rgb(0 0 0 / 2.5%),rgb(0 0 0 / 2.5%)) rgba(var(--color-rgb), 0.1)\n\t\t}\n\n\t\tdetails > div::before { \n\t\t\tcontent: ""; \n\t\t\tposition: absolute; \n\t\t\tinset-inline-start: 3.5em; \n\t\t\tinset-block-end: calc(100% + var(--details_btw) - 1px); \n\t\t\tinline-size: 1em; \n\t\t\tblock-size: 1em; \n\t\t\tclip-path: polygon(0 100%, 50% 50%, 100% 100%); \n\t\t\tbackground-color: var(--color); \n\t\t\tpointer-events: none \n\t\t}\n\n\t\tdetails .instructions {\n\t\t\tmargin: 0; \n\t\t\tfont-size: 0.875em\n\t\t}\n\n\t\t.form-group { \n\t\t\tdisplay: flex; \n\t\t\talign-items: center; \n\t\t\tgap: 0.4em;\n\t\t}\n\n\t\t.form-group--wrap { \n\t\t\tflex-wrap: wrap;\n\t\t}\n\n\t\t.form-group :is(input, select) { \n\t\t\tflex: 0 0 auto \n\t\t}\n\n\t\tfieldset {\n\t\t\tborder: 0.0625rem solid var(--color); \n\t\t\tmargin: 0;\n\t\t}\n\n\t\tfieldset legend {\n\t\t\tpadding: 0 0.5em;\n\t\t\tfont-weight: 500;\n\t\t}\n\n\t\tfieldset > div { \n\t\t\tpadding: calc(var(--p) / 4) calc(var(--p) / 2); \n\t\t}\n\n\t\t.range-output {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: inherit;\n\t\t\twidth: 100%;\t\n\t\t}\n\n\t\t.footer {\n\t\t\tmargin: 0;\n\t\t\ttext-align: end;\n\t\t\tfont-size: 0.875em;\n\t\t}\n\t\t\n\t\t@keyframes timer { to { transform: scaleX(1) } }\n\t\t@keyframes hide { to { transform: translateY(-50%); opacity: 0 } }\n\t',n.appendChild(e),n.innerHTML+='\n\t\t<section aria-labelledby="title"> \n\t\t\t<span tabindex="-1" class="hex-sr sr-only"></span>\n\t\t\t<div>\n\t\t\t\t<header id="title" data-i18n data-i18n-en="Color picker" data-i18n-fr="Sélecteur de couleur" data-i18n-ar="أداة انتقاء اللون"></header>\n\t\t\t\t<button type="button" class="close" title="Close" data-i18n data-i18n-en="Close" data-i18n-fr="Fermer" data-i18n-ar="أغلق">\n\t\t\t\t\t<svg viewBox="0 0 24 24">\n\t\t\t\t\t\t<path stroke="none" d="M0 0h24v24H0z" fill="none"/>\n\t\t\t\t\t\t<line x1="18" y1="6" x2="6" y2="18" />\n\t\t\t\t\t\t<line x1="6" y1="6" x2="18" y2="18" />\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t\t<div class="content">\n\t\t\t\t\t<div class="main">\n\t\t\t\t\t\t<div class="main__left">\n\t\t\t\t\t\t\t<input type="color" aria-label="Pick another color" data-i18n data-i18n-en="Pick another color" data-i18n-fr="Choisir une autre couleur" data-i18n-ar="اختر لونًا آخر">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="main__right">\n\t\t\t\t\t\t\t<span class="hex"></span>\n\t\t\t\t\t\t\t<button type="button" class="copy" data-copy-target=".hex" title="Copy hex code to clipboard" data-i18n data-i18n-en="Copy hex code to clipboard" data-i18n-fr="Copier le code hexadécimal dans le presse-papiers" data-i18n-ar="انسخ الكود السداسي عشرية إلى الحافظة">\n\t\t\t\t\t\t\t\t<svg viewBox="0 0 24 24">\n\t\t\t\t\t\t\t\t\t<path stroke="none" d="M0 0h24v24H0z" fill="none"/>\n\t\t\t\t\t\t\t\t\t<rect x="8" y="8" width="12" height="12" rx="2" />\n\t\t\t\t\t\t\t\t\t<path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="main__right">\n\t\t\t\t\t\t\t<span class="rgb" style="width: 16ch"></span>\n\t\t\t\t\t\t\t<button type="button" class="copy" data-copy-target=".rgb" title="Copy RGB to clipboard" data-i18n data-i18n-en="Copy RGB to clipboard" data-i18n-fr="Copier le code RGB dans le presse-papiers" data-i18n-ar="انسخ RGB إلى الحافظة">\n\t\t\t\t\t\t\t\t<svg viewBox="0 0 24 24" >\n\t\t\t\t\t\t\t\t\t<path stroke="none" d="M0 0h24v24H0z" fill="none"/>\n\t\t\t\t\t\t\t\t\t<rect x="8" y="8" width="12" height="12" rx="2" />\n\t\t\t\t\t\t\t\t\t<path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<details>\n\t\t\t\t\t\t<summary data-i18n data-i18n-en="Options" data-i18n-fr="Options" data-i18n-ar="والخيارات"></summary>\n\t\t\t\t\t\t<div> \n\t\t\t\t\t \t<p class="instructions" data-i18n data-i18n-en="These options are saved on the current domain." data-i18n-fr="Ces options sont conservées sur le domaine en cours." data-i18n-ar="يتم حفظ هذه الخيارات في المجال الحالي."></p>\n\t\t\t\t\t\t\t<div class="form-group"> \n\t\t\t\t\t\t\t\t<label for="choose-lang" data-i18n data-i18n-en="Language" data-i18n-fr="Langue" data-i18n-ar="لغة"></label>\n\t\t\t\t\t\t\t\t<select id="choose-lang" name="options_lang">\n\t\t\t\t\t\t\t\t\t<option value="en" lang="en" data-i18n data-i18n-en="English" data-i18n-fr="English (Anglais)" data-i18n-ar="English (الإنجليزية)">English</option>\n\t\t\t\t\t\t\t\t\t<option value="fr" lang="fr" data-i18n data-i18n-en="Français (French)" data-i18n-fr="Français" data-i18n-ar="Français (الفرنسية)">Français (French)</option>\n\t\t\t\t\t\t\t\t\t<option value="ar" lang="ar" data-i18n data-i18n-en="العربية (Arabic)" data-i18n-fr="العربية (Arabe)" data-i18n-ar="العربية">العربية (Arabic)</option>\n\t\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t \t</div>\n\t\t\t\t\t\t\t<form class="form-group form-group--wrap" oninput="options_modal_size_result.value=parseInt(options_modal_size.value)+\'%\'">\n\t\t\t\t\t\t\t\t<label for="set-modal-size" data-i18n data-i18n-en="Modal size" data-i18n-fr="Taille de la modale" data-i18n-ar="حجم مشروط"></label>\n\t\t\t\t\t\t\t\t<div class="range-output">\n\t\t\t\t\t\t\t\t\t<input type="range" id="set-modal-size" name="options_modal_size" value="100" min="50" max="200">\n\t\t\t\t\t\t\t\t\t<output name="options_modal_size_result">100%</output>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t \t</form>\n\t\t\t\t\t\t \t<p class="instructions" data-i18n data-i18n-en="Modifications below will be applied on the next use of the bookmarklet." data-i18n-fr="Les modifications ci-après seront appliquées à la prochain exécution du bookmarklet." data-i18n-ar="سيتم تطبيق التعديلات أدناه على الاستخدام التالي للعلامة المرجعية."></p>\n\t\t\t\t\t\t\t<div class="form-group"> \n\t\t\t\t\t\t\t\t<input type="checkbox" name="copiboo_enable_auto_closing" id="enable_auto_closing">\n\t\t\t\t\t\t\t\t<label for="enable_auto_closing" data-i18n data-i18n-en="Enable auto-closing" data-i18n-fr="Activer la fermeture automatique" data-i18n-ar="قم بتمكين الإغلاق التلقائي"></label>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<fieldset>\n\t\t\t\t\t\t\t\t<legend data-i18n data-i18n-en="Auto-copying" data-i18n-fr="Copie automatique" data-i18n-ar="النسخ التلقائي"></legend>\n\t\t\t\t\t\t\t\t<div class="form-group"> \n\t\t\t\t\t\t\t\t\t<input type="radio" name="copiboo_enable_auto_copying" id="enable_auto_copying_no" value="no" checked>\n\t\t\t\t\t\t\t\t\t<label for="enable_auto_copying_no" data-i18n data-i18n-en="Disabled" data-i18n-fr="Désactivé" data-i18n-ar="عاجز"></label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="form-group"> \n\t\t\t\t\t\t\t\t\t<input type="radio" name="copiboo_enable_auto_copying" id="enable_auto_copying_hex" value="hex">\n\t\t\t\t\t\t\t\t\t<label for="enable_auto_copying_hex" data-i18n data-i18n-en="Enable Hex auto-copying" data-i18n-fr="Copier le code hexa" data-i18n-ar="تفعيل النسخ التلقائي لـ Hex"></label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="form-group"> \n\t\t\t\t\t\t\t\t\t<input type="radio" name="copiboo_enable_auto_copying" id="enable_auto_copying_rgb" value="rgb">\n\t\t\t\t\t\t\t\t\t<label for="enable_auto_copying_rgb" data-i18n data-i18n-en="Enable RGB auto-copying" data-i18n-fr="Copier le code RGB" data-i18n-ar="قم بتمكين النسخ التلقائي لـ RGB"></label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</fieldset>\n\t\t\t\t\t\t\t<p class="footer">\n\t\t\t\t\t\t\t\t<a href="https://github.com/twogrey/CoPiBoo---Color-Picker-Bookmarklet" target="_blank" data-i18n data-i18n-en="Source code" data-i18n-fr="Code source" data-i18n-ar="مصدر الرمز"></a> <span aria-hidden="true">·</span> <a href="https://ko-fi.com/twogrey" target="_blank" data-i18n data-i18n-en="Support" data-i18n-fr="Soutenir" data-i18n-ar="دعم "></a> ☕\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</detail>\n\t\t\t\t</div>\n\t\t \t</div>\n \t\t\t<span class="timer"></span>\n \t\t</section>\n \t',t}return _createClass(a)}();function lightOrDark(t){var n,e,t=t.match(/^rgb/)?(n=(t=t.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/))[1],e=t[2],t[3]):(n=(t=+("0x"+t.slice(1).replace(t.length<5&&/./g,"$&$&")))>>16,e=t>>8&255,255&t);return 127.5<Math.sqrt(n*n*.299+e*e*.587+t*t*.114)?"light":"dark"}function hexToRGB(t,n){t=t.replace("#","").match(/.{1,2}/g),t=[parseInt(t[0],16),parseInt(t[1],16),parseInt(t[2],16)];return n?t:"rgb("+t+")"}function removeContainer(){document.querySelector("copi-bookmarklet").parentNode.removeChild(document.querySelector("copi-bookmarklet"))}function setI18n(e){copiboo.querySelectorAll("[data-i18n]").forEach(function(t){var n=t.getAttribute("data-i18n-"+e);t.getAttribute("title")?t.setAttribute("title",n):t.getAttribute("aria-label")?t.setAttribute("aria-label",n):t.textContent=n}),copiboo.querySelector("section").setAttribute("lang",e),"ar"==e?copiboo.querySelector("section").setAttribute("dir","rtl"):copiboo.querySelector("section").removeAttribute("dir")}function updateSize(t){copiboo.querySelector("section").style.setProperty("--custom-fs",t)}function baseSet(t){copiboo.querySelector(".hex").textContent=t,copiboo.querySelector(".hex-sr").textContent=t,copiboo.querySelector(".rgb").textContent=hexToRGB(t),copiboo.querySelector("section").style.setProperty("--text-color","dark"===lightOrDark(t)?"#fff":"#000"),copiboo.querySelector("section").style.setProperty("--color",t),copiboo.querySelector("section").style.setProperty("--color-rgb",hexToRGB(t,!0))}function pauseAnimations(){copiboo.querySelector("section").style.animationPlayState="paused",copiboo.querySelector(".timer").style.animationPlayState="paused"}function runAnimations(){copiboo.querySelector("section").style.animationPlayState="running",copiboo.querySelector(".timer").style.animationPlayState="running"}window.EyeDropper?(eyeDropper=new EyeDropper).open().then(function(t){document.querySelector("copi-bookmarklet")&&removeContainer();var n=document.createElement("copi-bookmarklet");document.body.appendChild(n),void 0===customElements.get("copi-bookmarklet")&&customElements.define("copi-bookmarklet",copibooElement),copiboo=document.querySelector("copi-bookmarklet").shadowRoot,updateSize(options_modal_size),setI18n(options_lang),copiboo.querySelector(".hex-sr").focus(),options_autoClosing||(copiboo.querySelector(".timer").style.display="none",copiboo.querySelector("section").style.setProperty("--timer-h","0px"),copiboo.querySelector("section").style.animation="none"),copiboo.querySelector("[type=color]").value=t.sRGBHex,baseSet(t.sRGBHex),copiboo.querySelector("section").addEventListener("animationend",function(t){t.target===this&&removeContainer()}),options_autoClosing&&(copiboo.querySelector("section").addEventListener("mouseenter",pauseAnimations),copiboo.querySelector("section").addEventListener("focusin",pauseAnimations),copiboo.querySelector("section").addEventListener("mouseleave",runAnimations),copiboo.querySelector("section").addEventListener("focusout",runAnimations)),copiboo.querySelector(".close").addEventListener("click",removeContainer),copiboo.querySelector("#choose-lang").value=options_lang,copiboo.querySelector("#set-modal-size").value=options_modal_size,copiboo.querySelector('[name="options_modal_size_result"]').textContent=options_modal_size+"%",copiboo.querySelector("#enable_auto_closing").checked=options_autoClosing,copiboo.querySelector('[name="copiboo_enable_auto_copying"][value="'+options_autoCopying+'"]').checked=!0,copiboo.querySelectorAll("details :is(input, select)").forEach(function(t){t.addEventListener("change",function(t){"radio"==t.target.type||"select-one"==t.target.type||"range"==t.target.type?localStorage.setItem(this.getAttribute("name"),this.value):"checkbox"==t.target.type&&localStorage.setItem(this.getAttribute("name"),this.checked)})}),copiboo.querySelector("#choose-lang").addEventListener("change",function(){setI18n(this.value)}),copiboo.querySelector("#set-modal-size").addEventListener("change",function(){updateSize(this.value)}),"hex"==options_autoCopying?navigator.clipboard.writeText(t.sRGBHex):"rgb"==options_autoCopying&&navigator.clipboard.writeText(hexToRGB(t.sRGBHex)),copiboo.querySelectorAll(".copy").forEach(function(t){t.addEventListener("click",function(){navigator.clipboard.writeText(copiboo.querySelector(this.getAttribute("data-copy-target")).textContent)})}),copiboo.querySelector("[type=color]").addEventListener("input",function(){baseSet(this.value)})}).catch(function(t){alert(t)}):alert("Your browser does not support the EyeDropper API");})();- Trois langues : français, anglais, arabe
- Taille de la modale modifiable et adaptée au zoom texte de la page courante
- Fermeture automatique possible
- Copie manuelle et copie automatique du code hexadécimal et RGB dans le presse-papiers
Votre navigateur doit supporter l'API EyeDropper. Jetez un oeil au support sur Can I Use.
Si vous rencontrez un problème d'utilisation avec cet outil, ou si vous souhaitez simplement échanger avec moi, n'hésitez pas à me contacter à l'adresse alexis.degryse@gmail.com.
Les icones utilisées proviennent toutes de tablericons.com.
