取色器与转换器
选取颜色并在 HEX、RGB、HSL 与 OKLCH 之间转换。
⚠ This OKLCH value falls outside the sRGB gamut and was clamped.
Pick a color from an image
WCAG contrast
Color schemes & harmonies
Tints & shades
Color blindness simulation
Runs entirely in your browser. Nothing is uploaded.
完全在浏览器中运行的免费颜色转换器与拾色器
这款免费颜色转换器可将任何颜色即时转换为您所需的所有格式。粘贴一个十六进制代码、输入RGB值、拖动颜色轮，或用吸管对任意像素取样 — 即可同时看到HEX、RGB、HSL、HSV、CMYK和OKLCH的结果。每个字段均可编辑且双向同步：修改任一格式，其他所有格式将实时更新，无需页面刷新，无需服务器请求，零延迟。
ColorHexa.com、RapidTables、convertingcolors.com和cssgradient.io等网站各自覆盖了部分功能。本工具将日常使用场景——格式转换、可视化取色、无障碍检查和调色板生成——整合到一个实时界面中，只需输入一次颜色即可看到一切。所有处理均在本地进行，不上传任何数据。
双向即时转换 HEX、RGB、HSL、HSV、CMYK 和 OKLCH
每个字段均可编辑且保持同步。粘贴十六进制代码，RGB、HSL、HSV、CMYK和OKLCH的值会立即更新。修改任意一个，其余随即跟进。这使它同时成为一个快速的HEX转RGB转换器、RGB转HEX工具、RGB转CMYK转换器以及HSL/HSV/OKLCH转换器，全部集中在一个视图中 — 非常适合设计文件提供一种格式而样式表、印刷作业或设计系统需要另一种格式的情况。
所有输出均为有效的HTML和CSS值 — #hex、rgb(…)、hsl(…)、hsv(…)、cmyk(…)和oklch(…) — 每个都配有一键复制按钮。工具还会自动识别最接近的CSS命名颜色，让您能即时描述色调，或确认自定义十六进制是否与标准关键字匹配。
从图片中取色 — 或直接从屏幕上取色
需要从照片、Logo、截图或设计稿中获取精确颜色？使用图片取色器：上传文件、拖放，或从剪贴板粘贴（Ctrl+V / Cmd+V），然后将鼠标移到图片上并点击即可捕捉任意像素。内置的放大镜可放大显示以实现像素级精准取色，每次点击的颜色都会保存在"从图片取色"条中，让您无需担心丢失之前的取样而从单张图片构建调色板。图片通过HTML canvas在本地处理，永远不会离开您的设备 — 在包括Firefox和Safari在内的所有浏览器中均可使用。
更喜欢从屏幕其他地方取色？吸管在Chrome 95+和Edge 95+中通过原生EyeDropper API对屏幕上的任意像素取样 — 点击它，指向屏幕上任意像素，该颜色即时加载到所有字段中。最近使用颜色条和交互式颜色轮提供了完整的取色选项，无需安装任何软件。
配色方案、色彩和谐、色调与阴影
将一种颜色扩展为完整调色板。工具基于色轮和谐关系生成六种匹配的配色方案：互补色、类似色、三角色、四角色、分裂互补色和单色。点击任意色块将其设为新的基准色并继续探索，使工具成为构建品牌一致组合的快速调色板生成器。
色调与阴影比例尺从基准色生成一系列更浅和更深的步骤 — 适用于悬停状态、激活状态、禁用状态、边框和背景填充。点击任意步骤将其设为活动颜色并显示完整的格式分解。调色板生成和色调/阴影比例尺在每次颜色变化时无需服务器请求即可即时更新。
WCAG对比度检查与色盲模拟
无障碍功能内置于每个颜色选择中。WCAG对比度检查器计算您的颜色与白色和黑色背景之间基于亮度的对比度比值，然后显示普通文字、大文字和UI组件的AA和AAA通过/失败徽章 — WCAG 2.1的三个级别，用于确定前景/背景颜色对是否符合无障碍标准。在您调整颜色时实时更新，无需切换到单独的工具。
色盲模拟器预览您的颜色在患有红色盲（Protanopia）、绿色盲（Deuteranopia）、蓝色盲（Tritanopia）和全色盲（Achromatopsia）的人眼中的效果 — 使用标准Brettel/Viénot模拟算法计算并实时更新。对比度检查和色盲模拟相结合，有助于确保您的设计选择对每位观众都保持清晰可辨。
了解OKLCH — CSS颜色的未来
OKLCH是一个感知均匀的颜色空间，通过CSS Color Level 4规范进入了主流CSS。它将颜色表示为明度(L)、色度(C)和色相(H)，其中明度根据人类感知进行校准，而非线性光能量。这意味着具有相同L值的两种颜色，无论色相如何，在人眼中看起来都一样亮 — 这在HSL或RGB中并不成立。对于构建系统化调色板的设计师来说，这意味着您可以为"主要背景"定义一个L值，将其应用于调色板中的每种色相，无需手动调整即可获得视觉上均衡的结果。
OKLCH还描述了比sRGB更大的色域 — 它可以表示大多数十六进制、RGB和HSL值所使用的sRGB三角形之外的Display P3和Rec.2020颜色。现代浏览器（Chrome、Safari、Firefox）现在原生支持oklch() CSS函数，使OKLCH成为CSS颜色工作面向未来的格式。当您输入的OKLCH值超出sRGB范围并会被旧浏览器截断时，本工具会显示色域警告，让您在部署到生产环境前提早得到提醒。
Google拾色器、Adobe Color和在线工具的免费替代品
大多数拾色器都埋藏在更大的产品中。Google拾色器仅出现在特定查询的搜索结果中，无法收藏或独立使用。Adobe拾色器内置于Photoshop、Illustrator或Adobe Color（color.adobe.com），需要Adobe账户并将数据同步到Adobe服务器。ColorHexa和RapidTables是参考网站而非交互工具。convertingcolors.com支持小众颜色空间但缺乏取色和调色板功能。cssgradient.io适合渐变生成但不适合单色管理。
这是一款独立的免费拾色器和颜色转换器，一键即可打开，适用于任何设备，无需登录，完全在您的浏览器中运行。无论您是需要匹配品牌十六进制的开发者、调整HSL调色板的设计师、检查CMYK近似值的印刷专业人员，还是验证WCAG对比度的无障碍工程师 — 本工具在一个快速、私密的页面上完成所有工作。OKLCH支持、无障碍检查和调色板生成均默认包含，这些功能大多数替代品收费或根本不提供。
Frequently asked questions
这款颜色转换器是免费的吗？
是的 — 完全免费，无需注册、无需账户、无使用限制。它完全在您的浏览器中运行，因此您选取、粘贴或采样的颜色永远不会离开您的设备。无需安装任何内容，不需要订阅。所有功能 — 转换、吸管、图片取色器、WCAG对比度检查、色调与阴影、色盲模拟和配色方案生成 — 从第一次访问起即可免费使用，无需账户。
如何将HEX代码转换为RGB？
将您的十六进制代码（带或不带前导#）粘贴到HEX字段中，RGB、HSL、HSV、CMYK和OKLCH值会立即更新。例如，粘贴#3b82f6，您会立即在RGB字段中看到rgb(59, 130, 246)，在HSL字段中看到hsl(217, 91%, 60%)。转换是双向的：输入RGB值，HEX和所有其他字段以同样的方式更新。
此工具可以在哪些颜色格式之间转换？
该工具在六种格式之间进行双向转换：HEX（HTML和CSS中使用的#rrggbb代码）、RGB（红绿蓝值0–255）、HSL（色相0–360°，饱和度和亮度为百分比）、HSV/HSB（色相-饱和度-明度，大多数设计应用拾色器使用的模型）、CMYK（印刷预览的青品黄黑百分比）和OKLCH（现代感知均匀颜色空间）。修改任意字段，其他五个立即更新。
我可以从图片或照片中取色吗？
可以 — 这是一个完整的图片拾色器。上传照片、拖放，或从剪贴板粘贴（Ctrl+V / Cmd+V），然后将光标移到图片上并点击即可捕捉任意像素的精确颜色。内置放大镜可放大实现像素级精准取色。图片使用HTML canvas在浏览器中本地处理，永远不会上传到任何服务器。
它会检查无障碍对比度（WCAG）吗？
会。WCAG对比度检查器计算您选择的颜色与白色和黑色背景之间基于亮度的对比度比值，并显示普通文字、大文字和UI组件的AA和AAA通过/失败徽章。WCAG AA要求普通文字4.5:1（大文字3:1）；WCAG AAA要求7:1（大文字4.5:1）。当您调整任何颜色字段时，检查器会实时更新。
什么是OKLCH，为什么要使用它？
OKLCH是CSS Color Level 4中引入的现代感知均匀颜色空间。与RGB或HSL不同，后者中等量的数值变化不会在人眼中产生等量的感知差异，而OKLCH经过校准，使明度值(L)固定增减产生视觉上一致的结果，无论色相如何。这使它非常适合构建无障碍、均衡的调色板。OKLCH还能表示宽色域颜色（Display P3），并在现代浏览器中原生支持。
拾色器在iPhone和Android上可以使用吗？
可以。整个工具可在任何现代移动浏览器中运行 — iPhone/iPad上的Safari和Android上的Chrome。颜色轮、格式输入字段、图片拾色器、WCAG对比度检查器、色调/阴影比例尺和配色方案生成器在移动端均正常工作。屏幕吸管在移动浏览器上不可用（这是仅限桌面Chrome/Edge的API），但图片取色器和剪贴板粘贴在移动端完美工作。
Related tools
查看全部工具
新 毛玻璃效果生成器
设计磨砂玻璃卡片并复制 CSS，实时预览效果。
新 CSS 文字阴影生成器
调校 CSS 文字阴影，实时预览并复制代码。
新 颜色混合器
以任意比例混合两种颜色，并复制结果或任一中间色。
新 图片取色器
从图片中拾取任意颜色，并提取主色调色板为 HEX、RGB 和 HSL。
新 Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
新 Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.