颜色工具

免费颜色选择器

集取色器、编辑器和调色板生成器于一体的全能工具 — 100% 本地运行，无需注册。探索数十亿种颜色，创建配色方案，检查无障碍适配，一键导出。

立即试用 发现
100% 本地，无需上传 HEX · RGB · HSL · CMYK · OKLCH AA / AAA 无障碍
工具

选择一种颜色，探索它的所有变化

色轮、屏幕取色器、16 种格式、和谐色、图片 → 调色板、渐变、WCAG 对比度、色盲、混色器、ΔE 和试玩区。100% 本地运行、免费、无需账户。

颜色选择器

在线 设计、多媒体和 UI/UX
登录
HEX#6366F1
HEX8#6366F1FF
RGB99, 102, 241
RGBA99, 102, 241, 1
HSL239°, 84%, 67%
HSV239°, 59%, 95%
HWB239°, 39%, 5%
LAB51.5, -8.4, -72.8
LCH73.1, 73.3, 263.9°
OKLCH0.585, 0.233, 277°
CMYK59%, 58%, 0%, 5%
HEX#6366F1
HEX8#6366F1FF
RGB99, 102, 241
RGBA99, 102, 241, 1
HSL239°, 84%, 67%
HSV239°, 59%, 95%
HWB239°, 39%, 5%
LAB51.5, -8.4, -72.8
LCH73.1, 73.3, 263.9°
OKLCH0.585, 0.233, 277°
CMYK59%, 58%, 0%, 5%

拖入图片即可自动提取调色板。

将图片拖到此处或点击选择

CSSlinear-gradient(90deg, #6366F1, #8B5CF6, #EC4899)
+
HEX#800080

在真实界面组件上测试你的颜色。

--primary: #6366F1;

0,0 0评论 所有工具
免费还是高级版？

Volade 颜色选择器 100% 免费、本地运行、无限制 —— 人人可用。高级版解锁完整 Volade 生态系统。

色轮、取色器、16 种格式、和谐色与历史记录 —— 无限制免费
OKLCH 渐变、WCAG 对比度、色盲、混色器、ΔE 和试玩区免费
10 种语言的开发者导出，PNG/SVG — 免费免费
云端历史记录、同步调色板和无限制项目高级版
访问完整 Volade 生态系统：40+ 高级网络工具高级版
解锁高级版
功能特色

真正全能的颜色选择器

屏幕取色器

使用浏览器取色器捕获屏幕上的任意颜色。像素级精准选择，配备高分辨率放大镜、键盘导航和区域采样。

立即试用

16种颜色格式

HEX、HEX8、RGB、RGBA、HSL、HSV、HWB、LAB、LCH、OKLCH、CMYK、Display P3、XYZ 等。每种格式均可一键复制。

查看格式

配色和谐与调色板

互补色、类似色、三角色、四角色、单色 — 从单一颜色瞬间生成和谐的调色板。

图片 → 调色板

拖入一张照片，工具将自动提取主色、鲜艳色和柔和色。支持主色调、鲜艳、柔和、均衡和品牌五种模式。

渐变

线性、径向、锥形渐变 — 支持 RGB、HSL、LAB 或 OKLCH 插值。CSS 代码即用，含完整浏览器前缀。

WCAG 无障碍检查

检查文本和背景颜色的 AA 和 AAA 对比度等级，涵盖常规文字、大号文字和 UI 组件。自动修复不达标颜色。

色盲模拟器

红色盲、绿色盲、蓝色盲、全色盲及其变体 — 以全球 3.5 亿色盲用户的视角查看你的配色。

开发者导出

CSS、SCSS、Tailwind、JSON、TypeScript、Swift、Kotlin、Flutter、React Native、Vue — 即粘即用的代码。

100% 本地，100% 私密

所有操作均在浏览器中完成，不发送、不存储、不分析任何数据到服务器。免费版无需注册。

使用方法

三步使用颜色选择器

选择你的颜色

使用色轮、屏幕取色器、图片上传，或直接输入 HEX/RGB/HSL 代码。

探索与配置

生成配色方案、测试无障碍适配、模拟色盲效果、创建渐变、混合颜色。

导出

复制你选择格式的代码 — CSS、Tailwind、SCSS、JSON、Swift 或 Kotlin — 或下载 PNG/SVG。

常见问题

常见问题解答

什么是颜色选择器？
颜色选择器是一款让你以各种格式选择、探索和操控颜色的工具：HEX、RGB、HSL、LAB、OKLCH、CMYK 等。它是设计师、开发者和创作者在界面设计、调色板制作和设计系统构建中不可或缺的工具。
屏幕取色器在所有浏览器上都能使用吗？
屏幕取色器使用浏览器的 EyeDropper API，支持 Chrome、Edge、Opera 和 Safari 17+。对于不支持的浏览器，你可以直接输入颜色代码或使用图片拖放功能。
什么是 WCAG？为什么要检查对比度？
WCAG（Web 内容无障碍指南）定义了网页无障碍标准。文字与背景之间的对比度决定了可读性。AA 级别要求常规文字达到 4.5:1，大号文字达到 3:1。AAA 级别要求分别达到 7:1 和 4.5:1。本工具会自动检查这些比值并提供一键修复。
什么是色盲模拟？适用于哪些人群？
约 8% 的男性和 0.5% 的女性患有色觉障碍。模拟器可以展示红色盲、绿色盲、蓝色盲和全色盲用户所看到的颜色效果。这对设计无障碍界面至关重要。
什么是 OKLCH？为什么要使用它？
OKLCH 是一种感知均匀的色彩空间：具有相同 LCH 亮度的两种颜色在人眼看来确实具有相同的明暗程度。它非常适合创建和谐的调色板、无断裂的渐变以及统一的深色/浅色主题。它是网页设计的未来。
可以从照片中提取颜色吗？
当然可以！将任意图片（JPEG、PNG、WebP）拖入「图片 → 调色板」区域，工具会自动分析像素并根据所选模式提取主色、鲜艳色或柔和色。你还可以保存提取的调色板。
什么是渐变？如何创建？
渐变是两种或多种颜色之间的平滑过渡。本工具支持线性、径向和锥形渐变，可使用 RGB、HSL、LAB 或 OKLCH 插值。CSS 代码一键复制，可直接添加到你的样式表中。
这个工具真的是免费的吗？
是的。免费版包含取色器、完整编辑器、配色方案、图片提取、渐变、WCAG 对比度检查、色盲模拟、混色、ΔE 色差、试验场和开发者导出功能。无需注册。
如何导出到 Tailwind 或 SCSS？
在「代码」选项卡中，选择目标语言（Tailwind、SCSS、CSS、JSON、TypeScript、Swift、Kotlin、Flutter、React Native 或 Vue）。代码会自动生成，包含当前颜色及其所有变体。点击「复制」即可将代码保存到剪贴板。
ΔE76、ΔE94 和 ΔE2000 之间有什么区别？
ΔE（Delta E）衡量两种颜色之间的感知差异。ΔE76 是 CIE 1976 年提出的原始公式。ΔE94 提高了对饱和色的精度。ΔE2000 是最新、最精确的公式，修正了之前公式中的感知缺陷。ΔE 低于 1 时，肉眼无法分辨差异。

在线颜色选择器：完全指南

Volade 颜色选择器是一款集屏幕取色器、高级颜色编辑器、调色板生成器、渐变创建器、WCAG 无障碍检查器、色盲模拟器、混色器和开发者导出于一体的全能网页工具 — 单一界面、100% 本地、无需注册。

不同于仅支持 HEX/RGB/HSL 的传统编辑器，Volade 支持 16 种色彩空间，包括 LAB、LCH、OKLCH、OKLAB、CMYK、Display P3、XYZ 和 HWB。每种格式实时显示，配有即时复制按钮，是设计师、开发者和印刷从业者最全面的工具。

屏幕取色器：像素级精准

屏幕取色器使用现代浏览器的 EyeDropper API，可捕获屏幕上任意可见颜色。点击任何位置 — 图片、网页、文档 — 颜色即刻被捕获。高分辨率放大镜帮助精准定位像素，键盘导航（方向键）提供绝对精确度。区域采样（1×1、3×3、5×5、11×11）可平滑 JPEG 压缩伪影，获取区域平均颜色。

所选颜色会出现在最近使用记录中，切换到上一个颜色即刻完成。高级用户可开启精准模式，实时显示像素坐标和各通道数值。

无妥协的颜色编辑器

编辑器同时显示 16 种颜色格式：HEX、HEX8、RGB、RGBA、HSL、HSLA、HSV/HSB、HWB、CMYK、LAB、LCH、OKLAB、OKLCH、Display P3、XYZ 和 Linear RGB。每种值均可直接编辑：修改 HSL，所有其他格式同步实时更新。色轮提供直观的可视化控制，数字滑块实现精确调整。

Alpha 透明度原生支持：使用专用滑块将不透明度从 0 调至 100%，所有格式立即反映变化。修改历史记录每次操作，支持撤销和重做。

智能色彩生成：超越简单选择

仅凭一种颜色，工具即可自动生成所有经典配色方案：互补色、类似色、三角色、四角色、互补分裂和单色。更进一步：深色变体、浅色变体、灰调变体、暖色和冷色变体自动生成。

「生成调色板」模式可将任意颜色转化为完整的设计系统：主色、次色、强调色、背景色、表面色、文字色、柔和色、边框色、成功色、警告色、错误色、信息色 — 每种均含 RGB、OKLCH 和 HEX 值。

图片 → 调色板：从照片提取颜色

拖入任意图片（照片、插图、截图），工具自动分析像素并提取调色板。五种提取模式：主色调（最高频颜色）、鲜艳（最高饱和度）、柔和（去饱和）、均衡（视觉和谐）和品牌（适合品牌视觉识别的颜色）。

提取结果包含 5 至 15 种颜色，每种标注其潜在角色（主色、强调色、深色、浅色）。这对需要从现有照片中提取设计系统的设计师来说是极大的加速器。

WCAG 无障碍检查

无障碍板块对比两种颜色（前景色与背景色），显示精确对比度比值及 WCAG AA 和 AAA 徽章，涵盖常规文字、大号文字和 UI 组件。若比值不达标，自动修复按钮将推荐最接近的合规颜色。

这是开发者遵循强制无障碍标准（RGAA、EN 301 549、ADA、Section 508）的必备工具。

色盲模拟器：为所有人设计

全球约有 3.5 亿色觉障碍者。模拟器展示了八种色盲类型所看到的颜色：红色盲、绿色盲、蓝色盲、全色盲及其轻度变体。这是验证界面是否真正无障碍的唯一方法。

渐变生成器：高级插值

创建线性、径向和锥形渐变，最多支持 10 个色标。RGB 插值生成经典渐变；HSL 提供更平滑的过渡；LAB 和 OKLCH 创建感知均匀的渐变，无可见色带。CSS 代码自动生成，一键复制。

混色器：颜色混合

以可配置的比例（从 0/100 到 100/0）混合两种颜色，支持四种模式：RGB（加法混合）、HSL（色相旋转）、LAB（感知色彩空间）和 OKLCH（最自然）。是创建中间色、阴影和自定义色调的理想工具。

ΔE 色差：专业级精度

对于设计师和印刷从业者，色差计算（Delta E）至关重要。工具显示 ΔE76、ΔE94 和 ΔE2000 及文字解读：不可察觉（ΔE < 1）、需仔细观察可辨别（1-2）、明显不同（2-10）、差异很大（10-50）和高对比（50+）。

颜色试验场：真实环境测试

试验场将你的颜色展示在真实界面组件上：按钮、卡片、徽章、输入框、提示、链接和文字。你可以立即看出颜色作为背景色、按钮色或文字色的效果 — 配有实时无障碍评分。

开发者导出：10 种代码格式

生成你选择的语言代码：CSS Variables、SCSS、Tailwind config、JSON design tokens、TypeScript、Swift (UIColor)、Kotlin (Color)、Flutter/Dart、React Native (StyleSheet) 和 Vue。每次导出包含变体（50-950）和角色（primary、secondary、accent 等）。

谁可以受益？

创建调色板和设计系统的 UI/UX 设计师；将颜色集成到 CSS、Tailwind 或 SCSS 中的前端开发者；从照片中提取品牌色彩的平面设计师；检查 WCAG 对比度的无障碍团队；计算 ΔE 的印刷从业者；以及任何想要专业探索颜色的创作者。

竞品对比

颜色选择器：哪个工具更值得选？

ColorSlurp、Adobe Color、Coolors 与 Volade — 核心功能对比。

Volade

16 种格式、取色器、配色方案、图片→调色板、OKLCH 渐变、WCAG + 自动修复、色盲模拟、混色、ΔE、试验场、10 种语言导出。免费、本地、无需账号。

ColorSlurp

取色器和格式支持优秀（OKLCH、LAB、P3）。无渐变、无色盲模拟、无试验场。原生付费应用。

Adobe Color

配色方案和序列化功能强大。格式较少（不支持 OKLCH）。无混色器、无 ΔE、无直接开发者导出。

Coolors

随机调色板生成功能出色。编辑器功能较弱，无 WCAG 自动修复，无试验场。免费但有限制。

一份高级订阅，解锁全部网页工具

订阅 Volade 即可解锁我们所有网页工具，还包括浏览器、CMS、桌面应用和脚本 — 适用所有设备。

查看价格 免费试用
一个许可证，整个优质生态 浏览器 · CMS · 桌面 · 移动 · 脚本 · API · 工具 · Database
一个许可证，通用于所有 升级到优质版 登录