Color Swatch Sheet Generator
指导
Color Swatch Sheet Generator
Paste a list of colors and instantly preview them as a printable swatch sheet with hex labels. Mix any CSS color format you like — short and long hex, rgb(), rgba(), hsl(), hsla(), or named colors such as tomato — then download the sheet as a high resolution PNG or scalable SVG for handoff, print, or design system documentation.
如何使用
- Enter one color per line in the 颜色 textarea, or click 尝试一个示例 to load a starter palette.
- 调整 列, Swatch Size, Gap，并且 Sheet Padding to match the layout you need.
- Pick a sheet background color and toggle whether to show hex labels or matched CSS color names on each swatch.
- Choose how labels are colored — 自动 uses contrast against each swatch, or force Always Dark 或 Always Light.
- 点击 下载 PNG for a 2x raster export, or Download SVG for a vector file you can open in Figma, Illustrator, or any browser.
特征
- Multi-format input — accepts hex (#abc, #aabbcc, #aabbccdd), rgb(), rgba(), hsl(), hsla(), and CSS named colors in the same list.
- Live SVG preview — the sheet rebuilds as you type, so layout changes are instant.
- Configurable grid — control columns, swatch width and height, gap, padding, and corner radius.
- Smart labels — show hex codes, automatically detect matching CSS color names, and choose contrast or fixed label colors.
- Transparent colors — swatches with alpha render over a checker pattern so opacity is visually obvious in exports.
- Two export formats — high-DPI PNG via Canvas, plus a copyable SVG for vector use.
- 完全客户端 — colors never leave the browser, so it is safe for unreleased brand palettes.
常问问题
-
What is a hex color code and why are there sometimes 8 characters?
A hex color code uses three pairs of hexadecimal digits to encode the red, green, and blue channels of an sRGB color (for example #FF5733). Each pair ranges from 00 to FF, which is 0 to 255 in decimal. An optional fourth pair encodes alpha (opacity) from 00 (fully transparent) to FF (fully opaque), giving the eight-character form #RRGGBBAA used in modern CSS.
-
How is contrast between a swatch and its label decided?
Most contrast checks use the WCAG relative luminance formula, which converts each sRGB channel to a linear value, then weights them as 0.2126R + 0.7152G + 0.0722B. Light backgrounds (luminance roughly above 0.5) read better with dark text, and dark backgrounds read better with light text. This is the same calculation behind the WCAG 2 contrast ratio used for accessibility audits.
-
Why do designers prefer SVG over PNG for color swatches?
SVG stores swatches as vector shapes and text rather than a fixed grid of pixels, so the sheet stays sharp at any size, prints cleanly at high DPI, and remains editable in design tools like Figma or Illustrator. PNG is still useful when you need a single flat raster image for slides, screenshots, or quick sharing where vector support cannot be assumed.
-
What is the difference between sRGB hex values and the RGB you see in code?
Hex values like #FF5733 and the equivalent rgb(255, 87, 51) describe the same sRGB triplet — hex is just a compact base-16 notation. They both refer to the standard sRGB gamut used on the web. Wider gamut formats such as display-p3 or oklch describe colors outside that gamut and are not interchangeable with the same numbers in sRGB.
