在线取色器
使用这个在线取色器，可以从图片中取色，在浏览器支持时从屏幕取色，也可以手动输入颜色值。你可以直接转换所选颜色、提取图片配色、生成匹配色、检查文字对比度，并复制 CSS 变量，无需切换页面。
1. 图片取色
选择图片
选择本地图片后，将鼠标移到图片上可预览像素颜色，点击即可取色。点击后，可使用方向键微调选中的像素位置。
适应视图
原始尺寸
清除图片
尚未选择图片。请先在上方选择图片，然后开始取色。
图片配色
点击颜色即可应用
导入图片后可提取主要颜色。
更多取色方式
2. 屏幕取色
从屏幕取色
在浏览器支持时，可使用浏览器提供的屏幕取色功能。原生取色器可能需要一点时间打开。
3. 手动输入颜色
颜色
应用
请输入 HEX 或 HEXA，例如 #2563EB 或 #2563EBFF。
调色板
点击颜色即可应用
匹配色
明暗色阶
当前颜色
#2563EB
复制
结果
用于界面设计
文字对比度与 CSS
文字对比度与界面配色
CSS 变量
复制 CSS 变量
StarryTool 隐私声明：在 StarryTool，我们非常重视您的隐私。本页面的所有数据处理均通过客户端 JavaScript 在您的设备上完成，以确保数据安全。我们不会记录或存储任何提交或生成的数据。如需了解我们网站的更多隐私实践信息，请查看我们的 隐私政策。
关于在线取色器
使用这个在线取色器，你可以从图片中选择颜色，在浏览器支持时从屏幕取色，也可以手动输入颜色值。选中的颜色会立即转换为 HEX、HEXA、RGB、RGBA、HSL、HSLA、HSV、CMYK 等常见格式，方便直接复制所需色值。
• 功能特点
图片取色：选择本地图片后，将鼠标移到图片上可预览附近像素颜色，点击图片即可选取当前颜色。
图片配色提取：导入图片后，工具会提取一组主要颜色，可复制，也可应用为当前颜色。
像素级微调：从图片中选中颜色后，可使用方向键更精确地调整所选像素位置。
屏幕取色：当浏览器支持时，可使用浏览器提供的屏幕取色功能，从屏幕中选择颜色。
手动输入颜色：可通过颜色选择器或输入 HEX / HEXA 色值手动指定颜色，例如 #2563EB 或 #2563EBFF。
多种颜色格式：将所选颜色转换为 HEX、HEXA、RGB、RGBA、HSL、HSLA、HSV、CMYK 等格式。
匹配色生成：根据当前颜色生成互补色、邻近色、三角色、柔和浅色和低饱和色等配色参考。
明暗色阶：生成从浅到深的实用色阶，可用于背景、边框、悬停状态、徽章和 UI 组件。
文字对比度与界面配色：使用 WCAG 对比度比较白色和黑色文字，提供 APCA 风格的感知参考，并在高饱和度颜色需要调整时推荐更舒适的界面配色。
CSS 变量：可复制当前颜色、浅色和深色变体、可读文字颜色，以及推荐的界面背景 / 文字组合对应的 CSS 变量。
浏览器内处理：图片读取、取色、配色提取和颜色转换都直接在浏览器中完成，无需安装额外应用。
• 使用说明
屏幕取色取决于浏览器支持情况。如果当前浏览器不支持屏幕取色，你仍然可以使用图片取色或手动输入颜色。
从图片取色时，图片可能会被缩放以适应页面显示，但实际采样颜色会映射回原始图片的像素位置。
文字对比度基于所选的纯色计算。如果文字位于渐变、照片、透明或纹理背景上，仍建议结合最终设计效果进行视觉检查。
APCA 风格数值用于在 WCAG 对比度旁提供感知参考。本页面仍以 WCAG 对比度作为通过 / 未通过的可访问性检查依据。
用于界面、文档、图片或印刷材料的颜色，最终显示效果可能会受到显示器设置、色彩配置文件、文件格式和输出设备影响。
Color(wiki)