Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Color Swatch Sheet Generator

WarnaPengembangGambar

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

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.

yang berada di samping Computed dan Styles, Anda dapat mengontrol apa yang ditampilkan oleh lapisan tersebut: nomor baris, nama baris, nama area, dan garis yang diperluas melebihi batas grid. Ketika tata letak gagal, mengaktifkan nomor baris sambil memperhatikan lapisan tersebut biasanya mengungkapkan jalur yang tidak sesuai secara langsung — jauh lebih cepat daripada membaca nilai-nilai mentah di panel Styles.

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)

Warna Label

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

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.

Cara Penggunaan

Enter one color per line in the Warna textarea, or click Coba contoh ini to load a starter palette.
Atur Kolom, Swatch Size, Gapdan 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 — Otomatis uses contrast against each swatch, or force Always Dark atau Always Light.
Klik Unduh PNG for a 2x raster export, or Unduh SVG for a vector file you can open in Figma, Illustrator, or any browser.

Fitur

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.
Sepenuhnya sisi klien — colors never leave the browser, so it is safe for unreleased brand palettes.

 Tanya Jawab Umum

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.