Color Picker 提供像素级精准的 eyedropper 工具，可从网页上任意元素拾取颜色——文字、背景、图片、渐变或任何可见像素。同时以 HEX、RGB 和 HSL 三种格式输出精确颜色值，并配有放大像素预览以便精准定位。历史拾取记录保存在历史条中，方便快速重新访问。
从网页中提取精确颜色值是常见需求——匹配品牌色、参考设计稿，或查看竞品网站使用的色调。浏览器 DevTools 的样式面板仅显示具有明确 CSS 颜色属性的元素颜色，无法处理图片、渐变或继承色。Color Picker 的 eyedropper 工作于像素层面——无论颜色以何种方式呈现，它都能读取光标下方像素的实际渲染颜色。点击主图中的蓝天、渐变中点或半透明遮罩层，即可获取精确的合成颜色值。放大预览圆圈会显示光标周围像素的缩放视图，便于定位目标像素。三种格式输出（HEX、RGB、HSL）同时显示——点击任意格式即可复制。最近几次拾取记录保存在底部历史条中，方便随时返回已拾取的颜色。
放大圆形预览显示光标周围的缩放像素，配合十字准星实现精确像素选取。可从文字、背景、图片、渐变、SVG 或页面上任意可见像素拾取颜色。
每次拾取的颜色同时以三种格式显示：HEX（#7c3aed）、RGB（rgb(124, 58, 237)）和 HSL（hsl(262, 83%, 58%)）。无需切换或转换——所有格式立即可用。
点击任意格式行（HEX、RGB 或 HSL）即可将该值立即复制到剪贴板。简短的“已复制！”动画确认操作结果。可直接粘贴到 CSS、设计工具或颜色规范文档中。
最近拾取的颜色以色块形式保存在可视化历史条中。点击任意色块可重新选中该颜色并再次查看其值。历史记录在当前会话期间持久保存——可跨多个页面拾取颜色。
拾取的颜色以大尺寸色块显示在格式值上方，便于查看和确认颜色。色块足够大，可区分在较小尺寸下看起来相同的细微色差。
可从任意可见像素拾取颜色：CSS 颜色、CSS 渐变、图片（PNG、JPG、SVG）、canvas 元素、视频帧、半透明遮罩层（拾取合成颜色），甚至 iframe。只要可见，即可拾取。
从公司网站拾取精确的品牌色，确保您的设计或内容使用正确的色调。获取精确的 HEX 值，而非凭肉眼估测或翻阅品牌规范文档。
直接从主图、产品图或插图中拾取颜色。从照片中提取主色调，用作设计中的互补背景色。
设计规范要求按钮颜色为 #7c3aed。从实现后的按钮上拾取颜色以验证是否匹配。可捕捉肉眼不可见的细微色差。
浏览设计灵感网站，拾取吸引您的颜色。历史条会在当前会话中积累已拾取的颜色——以此为基础构建您自己的配色方案。
在 CSS 渐变的不同位置拾取颜色，查看每个位置的精确颜色。有助于复制渐变效果或理解渐变节点的混合方式。
打开 DevSuite Pro 浮动 dock，点击 Color Picker 图标。光标变为带放大预览圆圈的 eyedropper。
将光标移动到页面上。放大预览显示光标周围像素的缩放视图，十字准星指示精确的目标像素。
在页面上任意位置点击即可拾取该像素的颜色。颜色色块、HEX、RGB 和 HSL 值立即更新。
点击 HEX、RGB 或 HSL 行将该值复制到剪贴板。“已复制！”确认提示短暂显示。
继续点击以拾取更多颜色。每次拾取都会添加到历史条。点击任意历史色块可重新调出该颜色。
