跳到主要内容

在线颜色工具

颜色选择器、调色板和颜色代码，一站搞定

选择任意颜色并复制其 HEX、RGB、HSL 或 OKLCH 代码，用配色规则创建调色板，从照片中提取颜色，并检查 WCAG 对比度。

免费，无需注册。一切都在你的浏览器中运行：你的图片永远不会离开你的设备。

打开颜色选择器查看全部工具

处理颜色所需的一切

超过 900 个现成调色板

按颜色或风格（粉彩、复古、霓虹……）筛选，收藏你喜欢的，并在色轮中打开任意调色板进行调整。

浏览调色板

从第一种颜色到最终代码

HEX
#E4572E
RGB
rgb(228, 87, 46)
HSL
hsl(14, 77%, 54%)
OKLCH
oklch(0.6372 0.1838 36.48)
CMYK
C0 M62 Y80 K11

1. 各种格式的颜色代码

同一种颜色在不同场景中写法不同。直接在这里试一种颜色，复制你需要的格式。

用于网页的 HEX

CSS 和设计工具中最常用的格式：井号后跟六位数字。

用于调整的 RGB 和 HSL

RGB 以 0 到 255 分别表示红、绿、蓝。HSL 使用色相、饱和度和亮度，制作变体非常容易。

用于现代色阶的 OKLCH

最新的 CSS 格式：亮度变化的感知是均匀的，非常适合色阶。

HEX 转 RGBRGB 转 HEX

2. 行之有效的搭配

好的调色板不靠运气：它建立在色轮上各色调之间的关系之上。

配色规则

类似色效果平和，互补色带来对比，三分色让设计充满活力。

混色与渐变

混合两种颜色找到中间色，或创建线性、径向和锥形 CSS 渐变。

Tailwind 和 Material 颜色

查看官方色阶，并在真实的界面组件中测试。

打开色轮创建渐变

3. 为所有人设计

约 8% 的男性有某种色盲，而且很多屏幕是在有反光的环境下观看的。检查颜色也是设计的一部分。

WCAG 对比度

计算文字与背景的对比度，检查普通文本和大文本的 AA 与 AAA 等级。

色盲模拟器

查看你的调色板在红色盲、绿色盲、蓝色盲或全色盲人士眼中的样子。

检查对比度模拟色盲

Matizly 的全部工具

12 个免费工具，在浏览器中运行，直接给你可粘贴的代码。

  • 颜色选择器选取任意颜色，复制 Hex、RGB、HSL 或 OKLCH，并查看阴影与和谐色。
  • 色轮在交互色轮上探索和谐配色，从单一基色生成均衡色板。
  • 图片取色从任意图片取色，基于照片生成色板。
  • 颜色混合器混合两种颜色，得到可立即复制的中间色。
  • CSS 渐变实时创建线性、径向或锥形 CSS 渐变。
  • 调色板浏览现成色板，并在本设备保存收藏。
  • 颜色名称浏览 HTML/CSS 命名颜色，一键复制 Hex、RGB 与 HSL。
  • Tailwind 颜色浏览 Tailwind CSS 与 Material Design 色表。
  • UI 颜色在真实 UI 组件中预览 Tailwind 色系。
  • WCAG 对比度检查文字与背景的 WCAG 对比度，提升界面无访问性。
  • 色盲模拟模拟不同色觉类型下颜色的呈现效果。
  • Hex ↔ RGB即时将 Hex 转为 RGB，适用于 CSS、设计与交接。

按色系查看颜色代码

每种颜色代表色调的代码，以及基于它构建的数百个调色板。

查看全部 148 种 HTML 命名颜色

常见问题

打开颜色选择器，或在本页“试一种颜色”输入框中输入颜色（例如 #E4572E、rgb(228, 87, 46) 或 tomato），即可看到它的 HEX、RGB、HSL、OKLCH 和 CMYK 代码。如果颜色在照片里，请使用图片取色器。

它们描述的是同一种颜色。HEX 使用六位十六进制数字（#E4572E），RGB 使用三个 0 到 255 的数字（rgb(228, 87, 46)）。两者可以无损互相转换。

从一种基色出发，用色轮应用一种配色规则：类似色、互补色、三分色……你也可以浏览现成的调色板，或从照片中提取。

不需要。Matizly 的所有工具都直接在你的浏览器中运行，无需注册。

不会。所有处理（包括图片分析）都在你的浏览器中完成。我们不会发送或保存任何内容。

可以。在色轮和颜色选择器中，你可以导出 Tailwind CSS 变量和 Figma 对象，或直接复制代码。

能。对比度检查器会计算两种颜色之间的 WCAG 对比度，并告诉你是否达到 AA 和 AAA。

开始使用颜色

所有工具都免费，并在你的浏览器中运行。

浏览调色板打开颜色选择器