效果图

html

<div class="d_f fd_c ai_c"><button id="idBtn" class="cursor_pointer">开始取色</button><div id="idBox" class="m_t_20 w_168 h_68 d_f fd_c jc_c ta_c fw_700"></div>
</div>

JavaScript

(function () {let btn = document.querySelector('#idBtn');btn.onclick = async () => {let idBox = document.querySelector('#idBox'),dropper = new EyeDropper();idBox.style.backgroundColor = '';idBox.style.border = `6px solid transparent`;idBox.innerHTML = '';try {let { sRGBHex } = await dropper.open(),{ hexadecimal, rgb } = subtractColors('ffffff', sRGBHex),{ r, g, b } = hexToRgb(sRGBHex);idBox.style.backgroundColor = sRGBHex;idBox.style.border = `6px solid ${hexadecimal}`;idBox.innerHTML = `<div style="color: ${hexadecimal}">${sRGBHex}</div><div style="color: rgb(${rgb})">${r}, ${g}, ${b}</div>`;} catch (error) {console.log(error);}}
})();/*** 将十六进制颜色转换为RGB格式* @param {string} hex 十六进制颜色值* @return {string} {r, g, b} 返回最终结果*/
function hexToRgb(hex) {// 去掉可能的#字符hex = hex.replace(/^#/, '');// 如果是缩写形式的颜色值（如 #FFF），则将其扩展为完整形式if (hex.length === 3) hex = hex.replace(/(.)/g, '$1$1');// 解析RGB值let bigint = parseInt(hex, 16),r = (bigint >> 16) & 255,g = (bigint >> 8) & 255,b = bigint & 255;return { r, g, b };
}/*** 两种颜色相减后的值* @param {string} color1 颜色1(主颜色，一般是大值)* @param {string} color2 颜色2* @return {object} { hexadecimal, rgb } 返回十六进制和rgb值*/
function subtractColors(color1, color2) {let rgb1 = hexToRgb(color1),rgb2 = hexToRgb(color2),r = rgb1.r - rgb2.r,g = rgb1.g - rgb2.g,b = rgb1.b - rgb2.b,reslut = (val) => Math.max(0, val);// 将RGB结果转换为十六进制格式return {hexadecimal: `#${(1 << 24 | reslut(r) << 16 | reslut(g) << 8 | reslut(b)).toString(16).slice(1)}`,rgb: `${r}, ${g}, ${b}`};
}

关键代码

new EyeDropper();

EyeDropper

MDN

安全上下文: 此项功能仅在一些支持的浏览器的安全上下文(HTTPS)中可用。

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

EyeDropper接口表示一个拾色器工具的实例，用户可以打开并使用它从屏幕上选择颜色。

try…catch

w3school

定义和用法
try/catch/finally语句处理代码块中可能发生的部分或全部错误，同时仍在运行代码。
错误可能是程序员造成的编码错误、错误输入导致的错误以及其他不可预见的情况。
try语句允许您定义要在执行时测试错误的代码块。
如果try块中发生错误，catch语句允许您定义要执行的代码块。
finally语句允许您在try和catch之后执行代码，而不管结果如何。
注释：catch和finally语句都是可选的，但是在使用try语句时需要使用其中之一（如果不是同时使用）。
提示：当发生错误时，JavaScript通常会停止，并生成错误消息。请使用throw语句创建自定义错误（抛出异常）。如果将throw与try和catch一起使用，则可以控制程序流并生成自定义错误消息。
有关JavaScript错误的更多知识，请学习JavaScript错误教程。