Color Picker

挑一个颜色,立刻拿到它的色值代码

颜色代码在网页设计、平面设计和编程中无处不在。当你看中一个颜色想要使用或还原它时,就需要知道它的代码——可能是CSS用的HEX值,Photoshop用的RGB三元组,或是用来做程序化色彩处理的HSL表示法。这个工具能一次性给出你选中颜色的这三种格式。

三种颜色代码格式

HEX(十六进制)是网页开发中使用最广泛的格式。它是一个由数字0-9和字母A-F组成的六位字符串,前面加一个井号。每两位字符代表一个颜色通道:#RRGGBB。比如#FF5733,红色通道是最大值(FF=255)、绿色通道中等(57=87)、蓝色通道较低(33=51)。当每一对字符两位相同时,HEX代码还可以写成缩写形式:#FF5500可以简写成#F50。

RGB(红、绿、蓝)把每个颜色通道表示成0(无)到255(最大)之间的整数。这是数字屏幕的原生格式,因为屏幕正是通过红绿蓝三种光混合发光的。rgb(255, 87, 51)和#FF5733是同一个颜色。RGB值被广泛用于CSS(rgb(r, g, b))、JavaScript、Python以及大多数图像编辑软件。

HSL(色相、饱和度、明度)是对人来说更直观的格式。色相是纯粹的颜色,用色轮上0°到360°的角度表示:0°是红色,120°是绿色,240°是蓝色。饱和度表示颜色有多鲜艳或多灰(0%是灰色,100%是完全饱和)。明度表示颜色有多亮或多暗(0%是黑色,100%是白色,50%是"正常"的完全饱和色)。HSL特别适合系统性地调整颜色:提高明度得到浅色调,降低明度得到深色调。

使用方法

点击色块打开浏览器自带的颜色选择器,用鼠标直观地挑选颜色,或者直接输入已知的颜色值,HEX、RGB和HSL三种代码会立刻同步更新,随时可以复制到你正在使用的工具或代码里。因为选色器用的是浏览器原生界面而不是自定义控件,操作体验和你预期的完全一致,在各种设备上都表现稳定。

该用哪种格式

CSS和网页设计:HEX和RGB都被广泛支持,但HSL越来越受欢迎,因为调整起来特别直观——想让一个颜色亮10%,在HSL里很简单,而在RGB里则需要重新计算三个通道的数值。

印刷设计:印刷通常用CMYK(青、品红、黄、黑)表示颜色,这个工具并不涉及。做数字到印刷的转换,建议用Adobe Illustrator这类专业软件。

编程:RGB是大多数图形库的原生格式,而HSL在程序化生成配色方案时特别好用。

色彩理论基础

了解一些色彩理论,能帮你更好地用这个工具:

互补色:色轮上正相对(相差180°)的两个颜色,组合起来对比度最强,比如红色(0°)和青色(180°)。

类似色:色轮上相邻(相差30到60度)的颜色,组合起来和谐、对比度低。

三分色:三个在色轮上均匀相隔120度的颜色,组合起来鲜艳而均衡。

浅色调与深色调:把HSL的明度调高到50%以上得到浅色调(更亮的版本),调低到50%以下得到深色调(更暗的版本)。

无障碍与对比度

网页无障碍标准要求文字和背景色之间要有足够的对比度。WCAG 2.1指南规定,普通文字最低对比度要达到4.5:1,大号文字要达到3:1。可以把这里选出的颜色代码放进专门的对比度检测工具里验证是否符合无障碍要求。

更多设计常用配色方案

除了前面提到的基本配色组合,设计工作中还有几种常见搭配。单色配色方案用同一色相下不同的明暗和饱和度变化组成,做法是保持色相和饱和度不变,只调整HSL明度——这是打造统一协调配色而不担心冲突的可靠方法。分裂互补配色则是取一个基础色,再加上它互补色两侧相邻的两个颜色,能带来接近直接互补色的视觉对比,同时观感更柔和、更有层次。

CSS命名颜色

CSS定义了147种可以直接使用的命名颜色,可以代替十六进制或RGB值,从red、blue、black这类显而易见的名字,到cornflowerblue、papayawhip、rebeccapurple这类比较少见的名字——最后这个是2014年为纪念CSS开发者Eric Meyer的女儿Rebecca Meyer而命名的。用这个工具挑一个颜色,再对照最接近的CSS命名颜色,是快速确认某个色调是否已经有现成标准名字的好办法。

私密且即时

颜色选择器完全在你的浏览器中通过原生颜色输入控件运行,结果即时呈现,你选择的任何颜色都不会被发送到服务器、记录或分享。