不喜欢广告？ 去 无广告 今天
颜色色块表生成器
颜色开发人员图像
广告 移除？
广告 移除？
指导
颜色色块表生成器
粘贴一组颜色，即可立即预览为可打印的色卡表，带有十六进制标签。支持任何CSS颜色格式——短和长十六进制、rgb()、rgba()、hsl()、hsla()，或命名颜色如tomato——然后以高分辨率PNG或可缩放的SVG格式下载，用于手稿、打印或设计系统文档。
如何使用
- 在 颜色 文本区域中每行输入一个颜色，或点击 尝试一个示例 加载一个预设配色方案。
- 调整 列, 色块大小, 间距，并且 表单内边距 以满足您所需的布局。
- 选择表单背景色，并切换是否在每个色块上显示十六进制标签或匹配的CSS颜色名称。
- 选择标签的颜色方式—— 自动 使用与色块的对比度，或强制 始终为深色 或 始终为浅色.
- 点击 下载 PNG 用于2倍网格导出，或 Download SVG 用于可在Figma、Illustrator或任何浏览器中打开的矢量文件。
特征
- 多格式输入 ——接受十六进制（#abc，#aabbcc，#aabbccdd）、rgb()、rgba()、hsl()、hsla()和CSS命名颜色的列表。
- 实时SVG预览 ——边输入边重建表格，因此布局变化是即时的。
- 可配置网格 ——控制列数、色块宽度和高度、间距、内边距和角落圆角。
- 智能标签 ——显示十六进制代码，自动检测匹配的CSS颜色名称，并选择对比度或固定标签颜色。
- 透明颜色 ——带有透明度的色块会渲染在棋盘图案上，以便在导出时视觉上明显体现透明度。
- 两种导出格式 ——通过Canvas生成的高DPI PNG，以及可复制的SVG用于矢量使用。
- 完全客户端 ——颜色始终保留在浏览器中，因此适用于尚未发布的品牌配色方案。
常问问题
-
什么是十六进制颜色代码，为什么有时有8个字符？
十六进制颜色代码使用三组十六进制数字来编码sRGB颜色的红、绿、蓝通道（例如#FF5733）。每组数字范围从00到FF，即十进制中的0到255。可选的第四组数字编码透明度（alpha），范围从00（完全透明）到FF（完全不透明），从而形成现代CSS中使用的八字符形式#RRGGBBAA。
-
色块与其标签之间的对比度是如何决定的？
大多数对比度检查使用WCAG相对亮度公式，该公式将每个sRGB通道转换为线性值，然后按0.2126R + 0.7152G + 0.0722B加权。浅色背景（亮度大致高于0.5）更适合使用深色文本，而深色背景更适合使用浅色文本。这与用于无障碍审计的WCAG 2对比度比率计算相同。
-
为什么设计师更偏好SVG而非PNG用于色卡？
SVG将色块存储为矢量形状和文本，而不是固定像素网格，因此色卡在任何尺寸下都保持清晰，高DPI打印效果良好，并可在Figma或Illustrator等设计工具中继续编辑。PNG在需要单个静态位图图像用于幻灯片、屏幕截图或快速分享且无法假设矢量支持时仍然有用。
-
sRGB十六进制值与代码中看到的RGB值有何区别？
像#FF5733这样的十六进制值和等效的rgb(255, 87, 51)描述的是相同的sRGB三元组——十六进制只是紧凑的十六进制表示法。它们都指向网络上使用的标准sRGB色域。更宽色域的格式如display-p3或oklch描述超出该色域的颜色，不能与sRGB中的相同数值互换使用。
