17370845950

谷歌浏览器怎么使用内置的颜色选择器(Eyedropper)_谷歌浏览器取色工具使用教程
答案:使用Chrome开发者工具的Eyedropper可直接取色,步骤为检查元素→点击颜色预览→启用Eyedropper→选取目标颜色;也可通过安装ColorZilla等扩展实现跨页面取色;还可启用chrome://flags中的“Global Eyedropper”实验功能,实现全屏范围取色。

如果您在进行网页设计或开发时需要获取页面上某个颜色的准确值,可以使用谷歌浏览器内置的颜色选择器功能。该工具允许您从当前页面拾取任何像素的颜色代码。

本文运行环境:MacBook Pro,macOS Sonoma

一、使用开发者工具中的内置取色器

Chrome 开发者工具自带了 Eyedropper 功能,无需安装额外扩展即可直接在页面元素上取色,适用于检查和修改 CSS 颜色属性。

1、右键点击页面上的任意元素,选择“检查”以打开开发者工具。

2、在“元素(Elements)”面板中,找到右侧的样式信息,在 color、background-color 等颜色属性旁边寻找一个小方块颜色预览图标并点击它。

3、颜色选择器弹出后,点击左上角的Eyedropper 图标,此时鼠标将变为取色指针。

4、移动鼠标到页面任意位置,点击即可选取该点的颜色值,颜色代码会自动更新到 CSS 样式中。

二、通过扩展程序增强取色功能

如果需要更灵活的取色体验,例如跨页面快速取色或获取非网页区域颜色,可安装功能更全面的第三方扩展。

1、访问 Chrome 网上应用店,搜索 ColorZillaEye Dropper 扩展。

2、点击“添加至 Chrome”进行安装。

3、安装完成后,点击浏览器右上角的扩展图标启动取色器。

4、按照扩展提示操作,通常点击图标后即可进入取色模式,鼠标悬停或点击页面任意位置即可读取颜色值。

三、启用实验性全局取色器功能

Chrome 实验性功能中提供了可在整个屏幕范围内使用的取色器,适用于需要从非活动窗口或桌面元素取色的场景。

1、在地址栏输入 chrome://flags 并回车。

2、在搜索框中输入 “Global Eyedropper” 查找相关实验选项。

3、将 “Global Color Picker in EyeDropper” 或类似名称的选项设置为 “Enabled”。

4、重启浏览器后,在开发者工具的颜色选择器中将出现可采集屏幕任意位置颜色的新模式。