取色器图片色轮色表颜色库转换器RGB 转 HexHex 转 RGB工具对比度检查颜色混合器名称颜色名称MinecraftBukkitRoblox色表颜色库RGB 转 HexHex 转 RGB对比度检查颜色混合器颜色名称MinecraftBukkitRoblox
颜色代码

颜色取色器

浏览颜色、生成和谐配色、转换数值,并在一个简单的颜色工具中导出颜色代码。

Hex6DF3EA
RGB109, 243, 234
HSL176, 85, 69
OKLCH0.89, 0.12, 189
#
点击或拖动色轮来选取颜色。
#

颜色和谐

类似色

6DF39C6DF3EA6DAEF3

互补色

6DF3EAF36D76

分裂互补

6DF3EAF36DB9F3A76D

三色

6DF3EAEA6DF3F3EA6D

四色

6DF3EAA76DF3F36D76B9F36D

方形配色

6DF3EAA76DF3F36D76B9F36D

颜色变化

Tailwind

F0FEFDDFFCFACAFBF7B3F9F49CF7F187F5EE6DF3EA59C7C048A09A377A75275754

深色

6DF3EA62DBD357C2BB4CAAA441928C377A752C615E21494616312F0B1817000000

浅色

FFFFFFF0FEFDE2FDFBD3FBF9C5FAF7B6F9F5A7F8F299F7F08AF5EE7CF4EC6DF3EA

灰调

6DF3EA6FE8DF71DCD573D1CA75C5C077BAB578AEAA7AA3A07C97957E8C8B808080

颜色转换

代码
HTML/CSS

对比度检查

白色背景

1.34:1
1.34白色背景对比度
元素
AA
AAA
小字号文本
×
×
大字号文本
×
×
界面元素
×
×

黑色背景

15.66:1
15.66黑色背景对比度
元素
AA
AAA
小字号文本
大字号文本
界面元素

色盲模拟器

红色盲

6DF3EAA7A8EC

绿色盲

6DF3EA9F95ED

蓝黄色盲

6DF3EA74EEEE

全色盲

6DF3EACACACA

使用颜色取色器

使用这个颜色取色器可以直观选择颜色、直接输入数值、从图片取样,或通过色轮探索调色板。当前颜色会转换为 Hex、RGB、HSL、HSV 和 OKLCH,方便在 CSS、设计工具和导出代码之间使用。

使用 Hex 颜色取色器

你可以拖动选择点、编辑通道数值,或输入 Hex 代码来选择颜色。颜色变化时,色块、和谐配色、颜色变化、对比度预览和导出面板都会基于同一个当前值同步更新。

Hex 颜色有多少种?

Hex 颜色使用 #RRGGBB 形式的六位十六进制字符。每两位分别控制红、绿、蓝通道,范围从 00 到 FF,因此网页设计中可使用 16,777,216 种 RGB 颜色。

图片取色器

图片取色器可以直接从上传图片中取样。移动任意取色点即可捕获颜色、比较取样值,并在不离开页面的情况下导出选中的图片颜色。

色轮

当你想按色相工作时,色轮非常有用。拖动外环改变色相,再调整内部区域来细化饱和度和亮度,同时保持整个界面同步。

色阶、浅色和灰调

色阶会把所选颜色与黑色混合,浅色会与白色混合,灰调会让颜色靠近灰色。这些变化适合悬停状态、边框、背景、禁用状态和分层界面。

颜色和谐

和谐调色板基于色轮上的关系生成。类似色、互补色、分裂互补、三色、四色和方形组合,可以快速作为品牌配色、界面强调色、数据颜色和插画系统的起点。

颜色空间

RGB 通过红、绿、蓝光描述屏幕颜色。HSL 分离色相、饱和度和亮度,便于凭感觉调整颜色。HSV 常用于可视化取色器,因为它自然对应饱和度和明度。OKLCH 更贴近人眼感知,在构建现代 CSS 调色板时更稳定。

Hex 代码

Hex 代码简洁、易复制,并被浏览器和设计工具广泛支持。由于 Hex 和 RGB 描述的是同一组红、绿、蓝通道,二者互转不会改变颜色外观。

导出颜色代码

导出面板可以把当前可见调色板整理为 Tailwind、Figma、CSS 变量、带前缀的颜色函数和纯代码列表。点击色块可复制单个颜色,需要整组颜色时使用导出按钮。

WCAG 与无障碍

可读的配色取决于对比度。对比度检查器会比较当前颜色在浅色和深色背景上的表现,帮助你选择更易读的文字、边框和界面表面颜色。

色盲模拟器

模拟器会预览当前颜色在常见色觉差异下可能出现的变化。它能帮助你避免只依赖色相差异的配色,并鼓励使用更强的对比度、标签和辅助视觉提示。

深色和浅色主题

色阶、浅色、灰调和和谐配色都可以作为深浅主题的基础。从一个颜色开始,检查周围变化,再导出适合背景、前景、按钮和强调状态的数值。

使用色轮

色轮是一种直观理解颜色关系的工具。它把色相排列在圆环上,方便选择基础色、比较相邻颜色,并根据可预测的关系构建平衡调色板。

什么是色轮?

色轮将红、橙、黄、绿、蓝、紫排列在圆形光谱上。相邻颜色通常更协调柔和,而相对位置的颜色会形成更强的对比和能量。

如何使用这个色轮

拖动色轮选择色相,再在取色区域中调整饱和度和亮度。当前颜色会同步更新 Hex、RGB、HSL、HSV、OKLCH、顶部色条、和谐色块和导出面板。

原色

原色是许多颜色系统的起点。传统艺术理论中的原色是红、黄、蓝;在屏幕中,RGB 使用红、绿、蓝光来生成网站、应用和数字设计工具中的颜色。

二次色

二次色由两个原色混合而成。在传统色轮中,橙、绿、紫位于原色之间,帮助连接暖色、冷色和中性色调。

三次色

三次色位于原色和二次色之间,包括黄橙、红橙、红紫、蓝紫、蓝绿、黄绿等组合,让调色板比基础六色色轮更细腻。

暖色与冷色

红、橙、黄等暖色通常显得活跃、明亮且吸引注意;蓝、绿、紫等冷色则更冷静、更有空间感。强配色常以一种色温为基础,另一种作为强调。

互补色

互补色位于色轮相对位置,会形成高对比,适合按钮、高亮、徽章,以及需要从周围界面中突出显示的元素。

类似色

类似色调色板使用色轮上的相邻颜色。由于色相接近,效果通常更平滑自然,也更容易控制背景、卡片、图表和插画细节。

三角配色

三角配色使用色轮上等距的三个色相。当一个颜色作为主色,另外两个少量用于强调或辅助元素时,可以形成鲜明而平衡的方案。

分裂互补色

分裂互补配色从一个基础色开始,再使用其直接互补色两侧的两个颜色。它像互补配色一样有强对比,但范围更柔和也更灵活。

四色和方形配色

四色和方形配色使用色轮上的四个颜色。当设计需要多个强调色时很有用,但最好让一个颜色占主导,其余通过浅色或深色保持平衡。

色阶、浅色和灰调

选择色相关系后,可以用色阶、浅色和灰调让调色板更实用。较浅的颜色可用于背景,较深的颜色可用于文字或边框,柔和灰调可用于次级界面状态。

构建配色方案

从主色开始,选择一种和谐类型,再根据真实界面需求测试结果。完整方案通常包括主色、一两个强调色、中性表面、可读文字颜色和对比度安全状态。

导出色轮颜色

当调色板合适时,可以导出为 CSS 变量、Tailwind 值、Figma 友好对象、带前缀的颜色函数或纯代码列表。任何可见色块上的当前颜色也可以直接复制。

无障碍与对比度

颜色和谐不代表一定可读。请检查文字和重要控件的对比度,避免只依赖颜色传达信息,并用模拟器预览常见色觉差异下的调色板变化。

HTML 颜色代码颜色取色器

导出颜色代码

已复制到剪贴板