CodeKitHubApa Itu Alat Ini?
Color picker mengubah pilihan visual — warna biru ini, piksel tepat di logo itu — menjadi kode numerik yang dipahami perangkat lunak. Warna yang sama memiliki beberapa notasi yang setara: HEX (#3b82f6) mendominasi CSS dan serah terima desain, RGB (59, 130, 246) sesuai dengan cara layar dan kode merepresentasikan warna, dan HSL (217°, 91%, 60%) menggambarkan hue, saturation, dan lightness dengan cara yang mudah dinalar manusia.
Bagian kedua alat ini adalah eyedropper gambar. Unggah tangkapan layar, logo, atau foto dan klik titik mana pun untuk mengambil warna di bawah kursor — cara standar untuk menjawab "warna apa persisnya ini?". Jika browser mendukung EyeDropper API, kaca pembesar bawaan akan digunakan; di browser lain, alat ini membaca nilai piksel dari salinan gambar di canvas. Dalam kedua kasus, prosesnya berjalan lokal: gambar tidak pernah diunggah.
Mengapa Menggunakannya?
- Tiga format sekaligus: setiap warna yang dipilih ditampilkan sebagai HEX, RGB, dan HSL secara bersamaan, masing-masing dengan tombol salin sekali klik — tanpa langkah konversi terpisah.
- Ambil dari gambar: unggah gambar apa pun dan klik untuk mengambil warna piksel yang tepat — ideal untuk mengekstrak warna merek dari logo atau mencocokkan warna yang terlihat di tangkapan layar.
- Menggunakan EyeDropper bawaan browser dengan kaca pembesar jika tersedia, dan beralih ke pembacaan piksel canvas yang presisi di browser lain.
- Swatch pratinjau langsung menampilkan warna saat ini sekilas, sehingga kamu bisa memverifikasi pilihan sebelum menyalin.
- Gratis, instan, dan sepenuhnya lokal: warna dihitung dan gambar dibaca di browsermu — tidak ada yang diunggah, disimpan, atau dicatat.
Cara Menggunakan
- Pilih warna dengan kolom warna, atau tempel/edit nilainya langsung.
- Untuk mengambil warna dari gambar, unggah gambar dan klik titik yang warnanya ingin kamu ambil.
- Baca nilai HEX, RGB, dan HSL, yang ditampilkan bersama swatch pratinjau langsung.
- Klik tombol salin di sebelah format yang kamu butuhkan — HEX untuk CSS, RGB atau HSL untuk kode.
Contoh
Input
Mengklik area biru pada logo yang diunggahOutput
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Ketiga baris menggambarkan warna yang identik. Gunakan HEX di stylesheet dan alat desain, RGB di tempat kode mengharapkan nilai channel, dan HSL saat kamu ingin membuat varian lebih terang atau gelap hanya dengan mengubah angka terakhir.
Format warna mana untuk pekerjaan apa
CSS modern menerima ketiganya di mana pun warna diperbolehkan, jadi pilihannya soal alur kerja, bukan kompatibilitas. Tim biasanya menstandarkan HEX untuk design token, lalu memakai HSL saat mengeksplorasi variasi — ubah lightness 10–15 poin untuk mendapatkan state hover yang bisa dipakai tanpa menggeser hue-nya.
| Format | Contoh | Cocok untuk |
|---|---|---|
| HEX | #3b82f6 | CSS, alat desain, berbagi warna di chat dan spesifikasi |
| RGB | rgb(59, 130, 246) | Kode yang memanipulasi channel, menggambar di canvas, transparansi rgba() |
| HSL | hsl(217, 91%, 60%) | Membuat varian lebih terang/gelap/hover, menyusun palet |
Dari warna terpilih hingga CSS jadi
Mengambil warna biasanya cuma langkah pertama dari tugas styling. Jika kamu butuh warna yang sama dalam notasi lain — CMYK untuk cetak atau nilai OKLCH untuk CSS gamut lebar — Konverter Warna melanjutkan dari titik picker ini berhenti.
Warna yang diambil sering langsung dipakai untuk efek visual: Box Shadow Generator memakai nilai HEX untuk bayangan yang realistis, dan kartu bersudut membulat yang dibuat dengan Border Radius Generator melengkapi tampilannya.
→ Konverter Warna · Box Shadow Generator · Border Radius Generator
Pertanyaan yang Sering Diajukan
Apa perbedaan antara HEX, RGB, dan HSL?
Ketiganya adalah notasi berbeda untuk model warna yang sama. HEX mengemas channel merah, hijau, dan biru menjadi enam digit heksadesimal (#3b82f6) dan merupakan bentuk paling umum di CSS dan alat desain. RGB mencantumkan tiga channel yang sama sebagai angka desimal dari 0 sampai 255. HSL menyatakan ulang warna sebagai hue (0–360°), saturation, dan lightness — jauh lebih intuitif ketika kamu ingin "warna yang sama, tapi lebih terang". Mengonversi antar format ini tidak pernah mengubah warnanya.
Bagaimana cara kerja pengambilan warna dari gambar?
Gambar yang diunggah digambar ke canvas tak terlihat di browsermu. Saat kamu mengklik, alat ini membaca nilai merah, hijau, dan biru dari piksel di posisi tersebut dan mengonversinya ke HEX, RGB, dan HSL. Di browser yang mendukung EyeDropper API (Chrome dan Edge di desktop), kaca pembesar bawaan terbuka sehingga kamu bisa memilih dengan presisi piksel di mana pun di layar.
Apakah gambarku diunggah ke suatu tempat?
Tidak. Gambar dibuka langsung oleh browsermu dan dibaca secara lokal dari canvas; tidak ada file maupun data warna yang pernah dikirim atau disimpan. Kamu bisa memuat halaman, mematikan koneksi internet, dan picker maupun eyedropper gambar tetap berfungsi — sehingga aman untuk desain yang belum dirilis dan tangkapan layar internal.
Mengapa warna yang diambil tidak persis sama dengan yang terlihat di layar?
Ada dua alasan umum. Anti-aliasing: piksel di tepi teks dan bentuk dicampur dengan latar belakang, sehingga mengklik satu piksel meleset menghasilkan warna di antaranya — ambil dari bagian tengah area yang solid sebagai gantinya. Manajemen warna: file JPG/PNG dengan profil warna yang tidak biasa bisa tampil sedikit berbeda di berbagai layar; alat ini melaporkan nilai piksel sebagaimana tersimpan di file, yaitu nilai yang kamu butuhkan untuk pekerjaan desain.
Format mana yang sebaiknya kusalin untuk CSS?
HEX adalah pilihan default paling aman — semua browser dan alat menerimanya. Gunakan HSL saat kamu berencana membuat varian hover atau mode gelap, karena hanya menyesuaikan komponen lightness menjaga hue dan saturation tetap konsisten. RGB terutama berguna saat kode membuat warna dari channel numerik, atau saat menambahkan transparansi, di mana rgba(59, 130, 246, 0.5) lebih mudah dibaca daripada HEX delapan digit.