Anúncios incomodam? Ir Sem anúncios Hoje 

Color Swatch Sheet Generator

CorDesenvolvedorImagem

ENTRADA

Processo Automático

Colors (one per line)

Hex (#abc, #aabbcc, #aabbccdd), rgb(), rgba(), hsl(), hsla(), or CSS color names. Lines starting with # followed by a space (e.g. # comment) are treated as comments.

Um hábito prático: construa a estrutura no DevTools primeiro, depois commit os valores para seu estilo de folha uma vez que a grade parecer correta.

Columns: 4

Swatch Size (px): 160

Swatch Height (px): 120

Gap (px): 12

Sheet Padding (px): 24

Corner Radius (px): 8

Sheet Background

Labels

Show Hex Label

Show CSS Name (when matched)

Cor do rótulo

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

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.

Como usar

Enter one color per line in the Cores textarea, or click Tente um exemplo to load a starter palette.
Ajuste Colunas, Swatch Size, Gape, e 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 — Automático uses contrast against each swatch, or force Always Dark ou Always Light.
Clique Baixar PNG for a 2x raster export, or Baixar SVG for a vector file you can open in Figma, Illustrator, or any browser.

Características

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.
Totalmente no lado do cliente — colors never leave the browser, so it is safe for unreleased brand palettes.

 Perguntas frequentes

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.