Generator palet warna
Mulai dari satu warna dan dapatkan palet yang serasi, setiap swatch dengan nilai HEX dan RGB serta kontrasnya terhadap putih dan hitam.
Berjalan sepenuhnya di browser Anda
Palet acak
Lima warna dari generator angka acak browser Anda. Kunci warna yang ingin dipertahankan, lalu acak lagi. Tekan tombol Spasi untuk mengacak saat tidak ada kolom teks yang aktif.
Ekspor
Palet dibuat di ruang warna OKLCH dan ditampilkan sebagai HEX sRGB, jadi warna yang terlalu tajam untuk layar diturunkan chroma-nya. Angka kontras memakai rumus WCAG 2, yang hanya mengukur kontras kecerahan.
Cara membuat palet warna
- Pilih warna dasar dengan pemilih warna, atau ketik nilai seperti
#1636a3atauf60di kolom HEX. - Lihat palet harmoni di bawahnya. Setiap swatch menampilkan HEX, RGB dan apakah teks hitam atau putih di atasnya lolos WCAG AA atau AAA.
- Pilih palet di bagian Ekspor lalu salin atau unduh sebagai CSS custom properties, array JSON atau daftar biasa. Gunakan Palet acak dan tombol kunci untuk bereksplorasi.
Cara harmoni warna dibuat
Generator palet warna ini membuat harmoni warna, yaitu sekumpulan warna yang rona (hue)-nya berada pada sudut tetap di sekeliling roda warna. Warna analog bertetangga, berjarak 30 derajat. Warna komplementer berjarak 180 derajat, pasangan komplementer terpisah berada 150 dan 210 derajat jauhnya, triad berjarak 120 derajat satu sama lain, dan tetrad memakai empat rona yang berjarak 90 derajat. Palet monokromatik mempertahankan rona dan mengubah lightness bertahap dari tint yang pucat hingga shade yang gelap.
Roda warna yang dipakai di sini adalah OKLCH, bentuk silindris dari ruang warna OKLab karya Björn Ottosson. Konversinya berjalan dari sRGB ke cahaya linear, lalu melalui matriks OKLab, dan kembali lagi dengan pengecekan gamut. Jika warna hasil putaran berada di luar jangkauan sRGB, chroma-nya diturunkan sedikit demi sedikit sampai muat, sehingga lightness dan rona yang Anda pilih tetap dipertahankan.
Kontras ditampilkan untuk setiap swatch terhadap putih maupun hitam, karena pertanyaan pertama tentang sebuah warna palet biasanya adalah teks apa yang bisa diletakkan di atasnya. Rasio dan keterangan AA atau AAA selalu ditulis, sehingga informasinya tidak bergantung pada kemampuan melihat warna.
Tips
- Butuh warna yang sama dalam HSL, CMYK atau nama CSS? Gunakan Konverter warna dan kontras.
- Ubah dua warna palet menjadi latar belakang dengan Generator gradien CSS.
- Ingin warna yang diambil dari foto, bukan dari roda warna? Coba Ambil warna dari gambar.
Pertanyaan umum
Mengapa OKLCH, bukan HSL?
Di HSL, kuning dan biru dengan nilai lightness yang sama terlihat sangat berbeda kecerahannya. OKLCH dirancang agar langkah lightness yang sama terlihat sama, sehingga bobot swatch dalam satu palet tetap seimbang. Rona (hue) adalah sudut yang dipakai untuk harmoni, jadi warna komplementer berada 180 derajat dari warna dasar Anda di OKLCH, bukan di HSL.
Apa yang terjadi jika sebuah warna tidak bisa ditampilkan di layar?
Memutar rona sambil mempertahankan lightness dan chroma kadang menghasilkan warna di luar rentang sRGB yang bisa ditampilkan layar biasa. Alat ini lalu menurunkan chroma, dengan lightness dan rona tetap, sampai warnanya muat. Itulah sebabnya swatch hasil putaran bisa tampak sedikit kurang tajam dibanding warna dasar.
Apa arti label AA dan AAA?
Label itu menunjukkan rasio kontras WCAG 2 untuk teks putih atau hitam di atas swatch tersebut. Rasio 4,5 atau lebih berarti AA untuk teks normal, 7 atau lebih berarti AAA, dan 3 sampai 4,5 hanya lolos AA untuk teks besar. Swatch yang gagal untuk hitam maupun putih adalah latar yang buruk untuk teks.
Bagaimana cara kerja palet acak?
Lima warna diambil dengan generator angka acak aman milik browser: rona disebar di sekeliling roda, dengan lightness dan chroma acak dalam rentang yang menghindari warna hampir hitam dan hampir putih. Kunci sebuah swatch untuk mempertahankannya, lalu tekan Palet acak atau tombol Spasi untuk mengganti yang lain.
Format ekspor mana yang sebaiknya saya pakai?
CSS custom properties bisa langsung ditempel ke blok :root di stylesheet. Array JSON cocok untuk design token atau skrip, dan daftar biasa berisi satu HEX per baris untuk alat yang menerima warna yang ditempel. Ketiganya memakai nilai HEX yang ditampilkan.
Apakah HEX singkat dan huruf kapital didukung?
Ya. #abc, abc, #AABBCC dan aabbcc semuanya bisa dibaca. Nilai dengan pasangan alfa, seperti delapan digit, tidak diterima di sini; gunakan Konverter warna dan kontras untuk membuang alfanya terlebih dahulu.