𝗙𝗿𝗲𝗲𝗧𝗼𝗼𝗹 DEV

Generator Palet Warna

Buat palet warna harmonis secara online. Hasilkan warna acak atau tematik, kunci favorit Anda, lihat skala nada, periksa kontras dan simulasi buta warna, lalu ekspor dalam CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL atau OKLCH.

Klik palet untuk membukanya di editor

Edit warna

Tentang alat ini

Buat palet warna harmonis dalam hitungan detik. Jelajahi galeri palet yang dibuat secara otomatis atau buka editor untuk membuat variasi, mengunci warna favorit, menyesuaikan jumlah warna, dan mengekspor untuk proyek Anda. Warna dihitung dalam ruang warna perseptual Okhsl, yang menjaga nada tetap seimbang secara visual dan menghindari distorsi umum pada HSL tradisional.

Fitur utama

Hasilkan palet acak atau tematik — pastel, cerah, gelap, vintage, dan bumi
Kunci warna favorit, buat variasi baru, dan sesuaikan ukuran palet
Lihat skala nada perseptual, periksa kontras WCAG, dan simulasikan buta warna
Ekspor dalam HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON atau Tailwind dan bagikan lewat tautan

Penggunaan umum

  • Menemukan palet dan kombinasi baru untuk antarmuka dan design system, dengan nada yang seimbang secara perseptual dan siap digunakan
  • Menentukan skema warna untuk presentasi, postingan, dan materi pemasaran dengan harmoni visual
  • Menyalin nilai warna dalam HEX, RGB, HSL atau OKLCH langsung ke CSS, tanpa menghitung warna secara manual
  • Menguji berbagai harmoni warna (analogus, monokromatik, komplementer, triadik, tetradik) dalam desain ulang antarmuka sebelum menyelesaikan proyek
  • Memeriksa aksesibilitas kontras dan memvisualisasikan bagaimana palet terlihat oleh penyandang buta warna

Cara menggunakan

1

Jelajahi galeri

Halaman dibuka dengan beberapa palet yang dibuat secara otomatis. Pilih antara mode acak dan tematik, tekan tombol Spasi untuk menghasilkan opsi baru, atau klik 'Muat lebih banyak' untuk memperluas galeri.

2

Buka di editor

Klik palet untuk membukanya di editor. Kunci warna yang ingin Anda pertahankan dan buat ulang untuk memvariasikan hanya yang lain.

3

Sesuaikan dan ekspor

Sesuaikan jumlah warna, lihat skala nada, periksa kontras dan buta warna, lalu ekspor dalam format yang Anda butuhkan atau bagikan melalui tautan.

Catatan teknis

Beberapa detail membantu menjelaskan bagaimana warna dihasilkan dan mengapa tetap seimbang:

Warna dihasilkan dalam ruang Okhsl, yang seragam secara perseptual: memvariasikan kecerahan menghasilkan langkah-langkah yang terlihat merata, tidak seperti HSL di mana nilai kecerahan yang sama terlihat lebih terang pada kuning daripada biru
Mengklik 'lihat skala warna' pada sebuah warna menghasilkan rampa dari 50 hingga 900 dengan mempertahankan rona dan saturasi tetap serta hanya memvariasikan kecerahan perseptual — siap untuk skala design system dan dapat disalin sebagai CSS atau Tailwind
Pemeriksaan kontras menggunakan rasio WCAG antara warna dan teks yang dapat dibaca di atasnya; lencana AA menunjukkan rasio minimal 4,5:1
Simulasi buta warna adalah perkiraan untuk tinjauan cepat dan tidak menggantikan pengujian dengan pengguna nyata

Pertanyaan umum

Bagaimana cara membuat palet warna?

Halaman sudah dibuka dengan beberapa palet yang dibuat secara otomatis. Tekan bilah spasi (atau tombol Buat baru) untuk membuat lebih banyak, atau pilih tema seperti pastel atau gelap. Mengklik palet akan membuka editor untuk mengunci warna dan menyesuaikannya sesuai keinginan.

Apa perbedaan antara mode acak dan mode tematik?

Dalam mode acak, warna dapat berasal dari titik mana pun dalam spektrum. Dalam mode tematik, pembuatan diarahkan ke tampilan tertentu — pastel menggunakan warna terang dan lembut, gelap menggunakan nada kecerahan rendah, vintage menggunakan nada yang sudah menua dan desaturasi, dan seterusnya.

Apa itu ruang warna Okhsl dan mengapa penting?

Okhsl adalah model warna yang seragam secara perseptual. Dalam praktiknya, ini berarti menyesuaikan kecerahan warna menghasilkan perubahan yang mata anggap sebagai langkah merata, menghasilkan palet dan nada yang lebih seimbang daripada HSL tradisional — terutama saat membandingkan warna yang sangat berbeda seperti kuning dan biru.

Bagaimana cara menyimpan atau berbagi palet?

Di editor, tombol Bagikan menyalin tautan dengan warna yang dikodekan dalam URL. Siapa pun yang membuka tautan itu akan melihat palet yang sama persis di editor. Anda juga dapat mengekspor warna sebagai CSS, SCSS, JSON, Tailwind, atau daftar HEX.

Lihat juga