使用颜色取色器
使用这个颜色取色器可以直观选择颜色、直接输入数值、从图片取样,或通过色轮探索调色板。当前颜色会转换为 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 与无障碍
可读的配色取决于对比度。对比度检查器会比较当前颜色在浅色和深色背景上的表现,帮助你选择更易读的文字、边框和界面表面颜色。
色盲模拟器
模拟器会预览当前颜色在常见色觉差异下可能出现的变化。它能帮助你避免只依赖色相差异的配色,并鼓励使用更强的对比度、标签和辅助视觉提示。
深色和浅色主题
色阶、浅色、灰调和和谐配色都可以作为深浅主题的基础。从一个颜色开始,检查周围变化,再导出适合背景、前景、按钮和强调状态的数值。