Cara menggunakan Pemilih Warna
- Geser di dalam kotak warna dan gerakkan slider hue, ketik nilai HEX, atau gunakan eyedropper untuk mengambil warna dari layarmu.
- Klik baris mana pun untuk menyalin warna sebagai HEX, RGB, HSL atau OKLCH.
- Gunakan shade dan harmoni untuk menyusun palet, lalu cek kontras teksnya.
- Untuk memasang pemilih di situsmu, atur opsinya di bagian Sematkan pemilih ini lalu salin kodenya.
Format warna mana yang sebaiknya saya pakai?
- HEX adalah bentuk singkat yang dipakai di CSS dan berbagai alat desain.
- RGB memberikan kanal merah, hijau dan biru, berguna saat sebuah alat meminta angka.
- HSL lebih mudah diatur secara manual: ubah lightness untuk mendapatkan tint atau shade.
- OKLCH terasa seragam secara persepsi, jadi langkah kecerahan yang sama akan terlihat sama. Semua browser utama saat ini mendukungnya.
Menyematkan pemilih
Kode embed berupa satu custom element mandiri tanpa library dan tanpa permintaan ke luar. Tempelkan ke halaman mana pun, dengarkan event input, lalu baca event.detail.value. Gayanya berada di shadow root, jadi tidak akan bentrok dengan situsmu. Di Webflow, Salin ke Webflow akan menempelkannya sebagai elemen Embed.
Butuh lebih? Konversi nilai dengan Color Converter, campur dua warna dengan Color Mixer, ambil palet dari foto dengan Image Color Palette, atau cek keterbacaan dengan Contrast Checker.
Juga dicari sebagai: color picker html, hex color picker, rgb color picker, color picker online, ambil warna dari layar, embed color picker, color picker javascript.
Tool yang cocok dipakai bersama Pemilih Warna
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
- Generator Warna Tailwind — Tempel satu warna brand dan dapatkan skala shade 11 langkah (50 sampai 950) yang seimbang, dibangun dengan OKLCH — lengkap dengan petunjuk kontras dan ekspor untuk Tailwind v3, v4, CSS, dan SCSS.
- Konverter HEX ke OKLCH — Tempel warna HEX dan dapatkan nilai OKLCH-nya untuk CSS.
- Konverter OKLCH ke HEX — Tempel nilai oklch() dan dapatkan padanan HEX-nya, plus RGB dan HSL.
Pertanyaan yang sering diajukan
Bagaimana cara mengambil warna dari layar saya?
Tekan tombol eyedropper di pemilih, lalu klik di mana saja pada layarmu. Fitur ini bekerja di Chrome dan Edge untuk desktop. Browser lain akan membuka dialog warna bawaannya sendiri, yang mungkin sudah menyertakan pemilih layar.
Bolehkah saya memakai pemilih yang disematkan di situs komersial?
Boleh. Kodenya gratis untuk proyek pribadi maupun komersial, dan tidak perlu mencantumkan atribusi.
Bagaimana cara membaca warna yang dipilih dari embed?
Tambahkan event listener input ke elemen tersebut lalu baca event.detail.value, atau baca properti value-nya kapan saja.
Apakah embed memuat sesuatu dari devpack?
Tidak. Semuanya ada di dalam snippet yang kamu tempelkan, jadi tetap berfungsi meskipun kamu offline.
Bisakah saya memasang Pemilih Warna sebagai aplikasi web dan memakainya offline?
Bisa. Pemilih Warna adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.