Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Lembar Warna

WarnaPengembangGambar

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Warna (satu per baris)

Hex (#abc, #aabbcc, #aabbccdd), rgb(), rgba(), hsl(), hsla(), atau nama warna CSS. Baris yang dimulai dengan # diikuti oleh spasi (misalnya # komentar) dianggap sebagai komentar.

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.

Kolom: 4

Ukuran Swatch (px): 160

Tinggi Swatch (px): 120

Jarak (px): 12

Peninggalan Lembar (px): 24

Jari-jari Sudut (px): 8

Latar Belakang Lembar

Label

Tampilkan Label Hex

Tampilkan Nama CSS (ketika cocok)

Warna Label

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Generator Lembar Warna

Tempelkan daftar warna dan segera lihat pratinjau mereka sebagai lembaran cetak dengan label heksadesimal. Gabungkan format warna CSS apa pun yang Anda sukai — hex pendek dan panjang, rgb(), rgba(), hsl(), hsla(), atau nama warna seperti tomato — lalu unduh lembaran tersebut sebagai PNG dengan resolusi tinggi atau SVG yang dapat diperbesar untuk digunakan dalam transfer, pencetakan, atau dokumentasi sistem desain.

Cara Penggunaan

Masukkan satu warna per baris di Warna textarea, atau klik Coba contoh ini untuk memuat palet awal.
Atur Kolom, Ukuran Swatch, Jarakdan Peninggalan Lembar untuk sesuai dengan tata letak yang Anda butuhkan.
Pilih warna latar belakang lembar dan aktifkan tampilan label heksadesimal atau nama warna CSS pada setiap swatch.
Pilih cara pencahayaan label — Otomatis menggunakan kontras terhadap setiap swatch, atau paksa Selalu Gelap atau Selalu Terang.
Klik Unduh PNG untuk ekspor 2x raster, atau Unduh SVG untuk file vektor yang dapat dibuka di Figma, Illustrator, atau browser apa pun.

Fitur

Input multi-format — menerima hex (#abc, #aabbcc, #aabbccdd), rgb(), rgba(), hsl(), hsla(), dan warna CSS berdasarkan nama dalam daftar yang sama.
Pratinjau SVG secara langsung — lembaran diperbarui saat Anda mengetik, sehingga perubahan tata letak menjadi instan.
Grid yang dapat disesuaikan — kendalikan jumlah kolom, lebar dan tinggi swatch, jarak, peninggalan, serta jari-jari sudut.
Label pintar — tampilkan kode heksadesimal, otomatis deteksi nama warna CSS yang sesuai, dan pilih warna kontras atau warna tetap label.
Warna transparan — swatch dengan alpha ditampilkan di atas pola kotak sehingga kecerahan secara visual jelas dalam ekspor.
Dua format ekspor — PNG dengan resolusi tinggi melalui Canvas, ditambah SVG yang dapat dikopi untuk penggunaan vektor.
Sepenuhnya sisi klien — warna tidak meninggalkan browser, sehingga aman untuk palet merek yang belum dirilis.

 Tanya Jawab Umum

Apa itu kode warna hexa dan mengapa kadang ada delapan karakter?

Kode warna hexa menggunakan tiga pasangan angka heksadesimal untuk mengkodekan saluran merah, hijau, dan biru dari warna sRGB (misalnya #FF5733). Setiap pasangan berkisar dari 00 hingga FF, yang setara dengan 0 hingga 255 dalam desimal. Pasangan tambahan opsional mengkodekan alpha (kekerasan) dari 00 (sepenuhnya transparan) hingga FF (sepenuhnya tidak transparan), memberikan bentuk delapan karakter #RRGGBBAA yang digunakan dalam CSS modern.
Bagaimana kontras antara swatch dan label-nya ditentukan?

Pemeriksaan kontras terbanyak menggunakan rumus luminansi WCAG, yang mengubah setiap saluran sRGB menjadi nilai linear, lalu memberi bobot pada 0.2126R + 0.7152G + 0.0722B. Latar belakang terang (luminansi sekitar di atas 0.5) lebih mudah dibaca dengan teks gelap, sedangkan latar belakang gelap lebih mudah dibaca dengan teks terang. Perhitungan ini sama dengan rumus rasio kontras WCAG yang digunakan dalam audit aksesibilitas.
Mengapa desainer lebih memilih SVG daripada PNG untuk swatch warna?

SVG menyimpan swatch sebagai bentuk vektor dan teks, bukan sebagai grid piksel tetap, sehingga lembar tetap tajam pada berbagai ukuran, mencetak dengan jelas pada DPI tinggi, dan tetap dapat diedit di alat desain seperti Figma atau Illustrator. PNG masih berguna ketika Anda membutuhkan satu gambar raster untuk presentasi, tangkapan layar, atau pembagian cepat di mana dukungan vektor tidak dapat diasumsikan.
Perbedaan antara nilai hexa sRGB dan nilai RGB yang Anda lihat dalam kode?

Nilai hexa seperti #FF5733 dan nilai rgb(255, 87, 51) menggambarkan pasangan tiga warna sRGB yang sama — hexa hanyalah notasi kompak berbasis-16. Keduanya merujuk pada kisaran warna standar sRGB yang digunakan di web. Format kisaran warna yang lebih luas seperti display-p3 atau oklch menggambarkan warna di luar kisaran tersebut dan tidak dapat ditukar dengan angka yang sama dalam sRGB.