Pilih warna
Pilih secara visual, masukkan nilai HEX, atau ambil sampel warna langsung dari layarmu.
Nilai siap pakai
Klik nilai untuk menyalinnya lengkap dengan fungsi CSS-nya.
Pemeriksa kontras
Warna aktif diperlakukan sebagai teks di atas latar di bawah ini.
Warna pendamping kontras aman
Cari penyesuaian warna paling minim ke arah hitam atau putih hingga mencapai target kontras.
Palet harmoni
Hasilkan kombinasi warna yang serasi dari pilihan aktif. Klik swatch mana pun untuk memakainya.
Pratinjau persepsi warna
Simulasi visual cepat untuk melihat tampilan warna aktif pada berbagai kondisi persepsi warna yang umum.
Pratinjau ini hanyalah perkiraan, bukan pengganti pengujian antarmuka menyeluruh bersama pengguna dan alat bantu aksesibilitas.
Riwayat palet
Warna pilihan terakhirmu hanya disimpan di browser ini.
Pilih warna untuk mulai mencatat riwayat palet di browser ini.
Panduan kontras dan aksesibilitas WCAG
Batas acuan dasar untuk keterbacaan web: butuh minimal 4,5:1 untuk teks isi dan 3:1 untuk teks besar (18pt atau tebal 14pt).
Tingkat kontras lanjutan: butuh 7:1 untuk teks isi dan 4,5:1 untuk teks besar, sangat disarankan untuk bacaan panjang dan antarmuka penting.
Menghitung penyesuaian kecerahan minimal ke arah hitam atau putih guna mencapai target kontras tanpa mengubah corak warna dasarnya.
Hitungan kontras adalah titik awal yang objektif. Selalu uji teks tipis, ukuran kecil, dan pantulan layar langsung bersama pembaca.
Memenuhi standar kontras WCAG memastikan kontenmu tetap nyaman dan mudah dibaca di berbagai perangkat serta kondisi pencahayaan.
Cara menggunakan Color Picker
Pilih atau ambil sampel warnamu
Pilih secara visual dari palet, ketik nilai HEX 3 atau 6 digit, atau ambil sampel piksel mana pun dari layarmu dengan eyedropper.
Cek kontras & harmoni
Pastikan rasio teks nyaman dibaca di atas latar terang atau gelap dan buat skema harmoni yang serasi untuk aksen UI.
Salin format CSS & warna
Klik kode warna mana pun untuk menyalin nilai HEX, RGB, HSL, HWB, atau OKLCH, atau ambil variabel CSS siap pakai untuk stylesheet-mu.
Mengenal format warna modern
HEX dan RGB adalah standar universal dalam desain digital, sementara HSL dan HWB memberikan kontrol intuitif untuk menyesuaikan corak, saturasi, dan kecerahan.
OKLCH menghadirkan penyesuaian warna yang seragam secara perseptual, menjaga kecerahan visual tetap konsisten di semua corak serta membuka spektrum warna luas P3 yang kaya di layar modern.
Proses lokal privat
Seluruh konversi, kalkulasi kontras, pratinjau persepsi warna, dan penyimpanan palet berjalan langsung di browsermu. Tidak ada data warna atau link yang di-upload ke server.
Riwayat palet terakhirmu tersimpan privat di penyimpanan lokal browser, sehingga warnamu tetap tersedia saat kamu kembali tanpa perlu membuat akun.