Utilia

Generator Warna Acak

Buat warna acak atau palet acak yang harmonis, kunci warna favorit, salin kode HEX, RGB, atau HSL, lalu ekspor sebagai CSS, SCSS, JSON, atau Tailwind.

Rona (°)
Saturasi (%)
Kecerahan (%)

Kunci warna yang Anda suka, lalu buat lagi untuk mengganti warna lainnya saja.

Warna

    Cara memakai generator warna acak

    1. Atur Jumlah warna (1 sampai 20).
    2. Pilih Mode: - Acak dalam rentang menarik setiap warna secara terpisah. Persempit rentang Rona (°), Saturasi (%), dan Kecerahan (%) dengan kolom “dari” dan “sampai” agar tetap dalam satu keluarga warna, misalnya hanya warna pastel atau hanya biru. - Palet harmonis (OKLCH) menarik satu warna dasar acak dan menyusun warna lainnya dari sebuah harmoni warna. Pilih Harmoni (Komplementer, Analogus, Triadik, Komplementer terpisah, Tetradik, Persegi, Monokromatik) atau biarkan Kejutkan saya untuk mendapatkan harmoni yang berbeda setiap kali.
    3. Klik Buat warna. Setiap kartu menampilkan warna beserta kode HEX, RGB, dan HSL-nya; tombol kecil HEX, RGB, dan HSL menyalin kode yang sesuai.
    4. Klik Kunci pada warna yang ingin Anda simpan, lalu Buat warna lagi: hanya warna yang tidak terkunci yang berubah. Klik tombolnya lagi untuk Buka kunci warna.
    5. Pilih format di Ekspor sebagai (Daftar HEX, Variabel CSS, Variabel SCSS, Array JSON, atau Warna Tailwind) dan gunakan Salin atau Unduh untuk membawa seluruh set.

    Cara warna dipilih

    Pada mode Acak dalam rentang, rona, saturasi, dan kecerahan masing-masing ditarik secara merata di dalam rentang yang Anda atur, lalu dikonversi dari HSL ke RGB dengan rumus yang sama seperti yang dipakai browser untuk hsl(). Rentang rona dapat melewati warna merah: dari 330 sampai 30 menghasilkan merah muda, merah, dan oranye, melewati 0°. Beberapa pengaturan yang berguna:

    • Pastel: saturasi 40–80%, kecerahan 75–90%.
    • Warna gelap dan kalem: saturasi 10–40%, kecerahan 15–35%.
    • Hanya biru: rona 190–250.
    • Warna hangat: rona 330 sampai 60.

    Pada mode Palet harmonis (OKLCH), alat ini bekerja dalam OKLCH, model warna perseptual yang langkah kecerahan yang sama terlihat sama oleh mata. Warna terkunci pertama dipakai sebagai warna dasar; jika tidak ada yang terkunci, warna dasar acak dengan kecerahan sedang dan saturasi cukup tinggi ditarik. Warna lainnya mengikuti sudut rona harmoni tersebut (misalnya +120° dan +240° untuk triadik), dengan variasi acak kecil pada rona, kecerahan, dan kroma sehingga setiap klik menghasilkan hasil baru. Ketika Anda meminta lebih banyak warna daripada jumlah rona dalam harmoni, warna tambahan memakai ulang sudut itu dengan varian yang lebih terang dan lebih gelap. Monokromatik mempertahankan satu rona dan menyebarkan kecerahan dari gelap ke terang.

    Warna yang berada di luar jangkauan layar sRGB dikembalikan dengan menurunkan kromanya, sehingga setiap kode HEX yang Anda salin adalah warna nyata yang dapat ditampilkan.

    Kapan warna acak berguna

    Warna acak berguna untuk avatar dan grafik placeholder, data uji, seni generatif, eksplorasi desain saat Anda buntu di halaman kosong, atau memilih warna untuk proyek, tim permainan, atau label. Fitur kunci memungkinkan Anda memakainya seperti mesin slot: simpan yang cocok, putar sisanya. Keacakan berasal dari generator kriptografis browser Anda, dan tidak ada yang dikirim ke mana pun.

    Pertanyaan yang sering diajukan

    Bagaimana cara mendapatkan kode warna HEX acak?

    Atur Jumlah warna ke 1 dan klik Buat warna, lalu klik tombol HEX untuk menyalin kodenya, misalnya #3A7BD5.

    Bisakah saya mempertahankan beberapa warna dan membuat ulang yang lain?

    Bisa. Klik Kunci pada setiap warna yang ingin dipertahankan, lalu klik Buat warna. Warna terkunci tetap di tempatnya; pada mode harmoni, warna terkunci pertama juga menjadi dasar palet baru.

    Mengapa memakai mode harmoni OKLCH, bukan warna acak murni?

    Warna yang murni acak sering bertabrakan atau memiliki bobot visual yang sangat berbeda. Menyusun palet dari sebuah harmoni dalam OKLCH menghasilkan warna yang serasi dan memiliki kecerahan seimbang, sehingga lebih mudah dipakai dalam desain.

    Apa isi format ekspor?

    Daftar HEX memberi satu kode per baris, variabel CSS dan SCSS memberi deklarasi --color-1 atau $color-1, array JSON memberi daftar kode, dan warna Tailwind memberi objek colors dengan kunci 100, 200… untuk konfigurasi Anda.

    Apakah warnanya benar-benar acak?

    Warna berasal dari crypto.getRandomValues, generator aman kriptografis milik browser, sehingga tidak ada pola yang berulang di antara klik.