如何使用十六进制颜色选择器
- 点击大色块打开系统自带的颜色选择器，或输入
#1E90FF这样的十六进制代码、tomato这样的颜色名称。 - 复制你需要的格式：HEX、RGB、HSL、HSV 或 CMYK。点击任意浅色、深色或配色方案色块，即可复制其十六进制代码。
- 查看对比度检测框，了解该颜色上的白色或黑色文字是否达到 WCAG AA 或 AAA 级标准。
十六进制颜色代码的原理
像 #FF6347 这样的十六进制颜色代码包含三个字节：红色（FF = 255）、绿色（63 = 99）和蓝色（47 = 71）。每个通道的取值范围是 00 到 FF，因此共有 256 × 256 × 256 = 16,777,216 种可能的颜色。三个通道数值相同时得到灰色——#000000 是黑色，#808080 是中灰色，#FFFFFF 是白色；数值越大，颜色越亮。
浅色、深色色阶与配色方案
浅色（tint）是在原色中混入白色，深色（shade）是在原色中混入黑色。取色器以 10% 为步长同时展示两者，非常适合用来制作与品牌色相协调的悬停状态、边框和背景色。
配色方案会在色轮上旋转色相，同时保持饱和度和亮度不变：
- 互补色（180°）——色轮上正对面的颜色，对比强烈，适合行动号召按钮。
- 类似色（±30°）——色轮上相邻的颜色，适合营造平和、统一的配色。
- 三角色（±120°）——色轮上等距分布的三种颜色，鲜明而又平衡。
颜色对比度与 WCAG 标准
Web 内容无障碍指南（WCAG）要求普通文本的对比度至少达到 4.5:1（AA 级），AAA 级则要求 7:1。大号文本（18 pt，或 14 pt 粗体）达到 3:1 即可满足 AA 级。对比度比较的是文字颜色与背景颜色的相对亮度，范围从 1:1（颜色完全相同）到 21:1（白底黑字）。
常见问题
什么是十六进制颜色代码？
十六进制颜色代码用六位十六进制数字描述一种颜色：两位表示红色，两位表示绿色，两位表示蓝色，例如 #FF6347（tomato，番茄红）。CSS、HTML、设计工具和图像编辑软件都支持这种写法。
十六进制颜色代码能表示多少种颜色？
256 × 256 × 256 = 16,777,216 种颜色。如果再加上两位 alpha 值（#RRGGBBAA），每种颜色还可以有 256 级透明度。
支持哪些 CSS 颜色名称？
支持 CSS 颜色模块（CSS Color Module）中全部 148 种命名颜色，从 aliceblue 到 yellowgreen，也包括 rebeccapurple。你可以在十六进制输入框中输入颜色名称，或者在工具下方的列表中筛选，点击颜色即可选中。