🟥 颜色可视化（色值列表生成色卡）Visualize Colors (Colour List to Swatches)
粘贴一组颜色值，立即生成色卡：支持 HEX（#f00、#ff0000、#ff000080、不带 # 的 6 位色值）、rgb() / rgba()、hsl()、CSS 颜色名（red、teal…）以及现代 CSS 颜色写法，用换行、逗号、空格或分号分隔都可以；可选网格色卡、横条或连续色带布局，标注 HEX、RGB、HSL 或原始写法，透明色显示在棋盘格上，导出 PNG，并输出统一格式的色值列表。适合整理配色方案、品牌色和设计稿，全程在浏览器本地完成。Paste a list of colour values and get swatches straight away. HEX (#f00, #ff0000, #ff000080, or six digits without #), rgb() / rgba(), hsl(), CSS colour names (red, teal…) and modern CSS colour syntax all work, separated by new lines, commas, spaces or semicolons. Choose a swatch grid, stripes or a continuous band, label each colour as HEX, RGB, HSL or as written (transparent colours show on a checkerboard), export a PNG, and get the list back in one consistent format. Great for organising palettes, brand colours and design specs, all locally in your browser.
使用说明与常见问题How-to & FAQ
「颜色可视化（色值列表生成色卡）」是什么？What is the Visualize Colors (Colour List to Swatches) tool?
粘贴一组颜色值，立即生成色卡：支持 HEX（#f00、#ff0000、#ff000080、不带 # 的 6 位色值）、rgb() / rgba()、hsl()、CSS 颜色名（red、teal…）以及现代 CSS 颜色写法，用换行、逗号、空格或分号分隔都可以；可选网格色卡、横条或连续色带布局，标注 HEX、RGB、HSL 或原始写法，透明色显示在棋盘格上，导出 PNG，并输出统一格式的色值列表。适合整理配色方案、品牌色和设计稿，全程在浏览器本地完成。Paste a list of colour values and get swatches straight away. HEX (#f00, #ff0000, #ff000080, or six digits without #), rgb() / rgba(), hsl(), CSS colour names (red, teal…) and modern CSS colour syntax all work, separated by new lines, commas, spaces or semicolons. Choose a swatch grid, stripes or a continuous band, label each colour as HEX, RGB, HSL or as written (transparent colours show on a checkerboard), export a PNG, and get the list back in one consistent format. Great for organising palettes, brand colours and design specs, all locally in your browser.
如何使用「颜色可视化（色值列表生成色卡）」？How do I use the Visualize Colors (Colour List to Swatches) tool?
在「颜色可视化（色值列表生成色卡）」中，按需设置「布局」、「标注」、「色块大小」、「每行个数」等选项，然后点击「下载 PNG」、「复制色值」按钮即可。In the Visualize Colors (Colour List to Swatches): Set "Layout", "Labels", "Swatch size", "Per row", then click "Download PNG", "Copy values".
支持哪些颜色写法？Which colour formats are supported?
HEX：#rgb、#rgba、#rrggbb、#rrggbbaa，以及不带 # 的 6 位或 8 位色值（如 ff8800）；rgb() / rgba()（逗号或空格写法都行）；hsl() / hsla()；所有 CSS 颜色名（red、tomato、rebeccapurple…）；浏览器支持的话，还能识别 hwb()、lab()、lch()、oklch() 等新写法。无法识别的项会单独列出，不会混进色卡。HEX as #rgb, #rgba, #rrggbb or #rrggbbaa, and 6 or 8 digits without # (such as ff8800); rgb() / rgba() with commas or spaces; hsl() / hsla(); every CSS colour name (red, tomato, rebeccapurple…); and, where your browser supports them, newer forms such as hwb(), lab(), lch() and oklch(). Anything that can't be read is listed separately and left out of the swatches.
颜色之间怎么分隔？How should colours be separated?
换行、逗号、分号、空格、顿号或竖线都可以，括号里的逗号和空格不会被当作分隔，所以“rgb(0, 128, 255)”是一个颜色。可以直接粘贴设计稿、CSS 变量或配色网站复制来的列表。New lines, commas, semicolons, spaces, the Chinese list comma or vertical bars all work; commas and spaces inside brackets don't count, so "rgb(0, 128, 255)" is one colour. Paste lists straight from design files, CSS variables or palette websites.
下载的色卡是什么样的？What does the downloaded image look like?
网格模式按“每行个数”排列方块，横条模式每个颜色一条，色带模式所有颜色连成一条横带。标注文字会根据颜色深浅自动用黑色或白色，半透明颜色画在棋盘格上，导出为 PNG。下方的色值列表会把所有颜色转换成同一种格式，方便复制。Grid lays out squares by the Per row setting, Stripes gives each colour a bar, and Band joins all colours into one strip. Labels switch automatically between black and white depending on the colour, semi-transparent colours sit on a checkerboard, and the export is PNG. The colour list below converts every colour into one format for easy copying.
「颜色可视化（色值列表生成色卡）」免费吗？需要注册吗？Is the Visualize Colors (Colour List to Swatches) free? Do I need an account?
「颜色可视化（色值列表生成色卡）」完全免费，无需注册或安装，打开网页即可使用，手机和电脑都能用；输入的内容只在你的浏览器本地处理。The Visualize Colors (Colour List to Swatches) is completely free with no sign-up or install and works on phones and desktops; what you enter is processed only in your browser.