Pemilih Warna Online
Pilih warna secara visual dan dapatkan kode HEX, RGB, dan HSL-nya secara instan.
Mengapa menggunakannya
Color picker paling lengkap untuk desainer dan developer
Semua format
HEX, RGB, dan HSL secara bersamaan. Salin format yang Anda butuhkan dengan satu klik.
Privat
Tanpa server, tanpa log. Semua warna diproses di browser Anda.
Riwayat otomatis
Warna-warna yang terakhir dipilih disimpan secara lokal untuk memudahkan perbandingan dan penggunaan ulang.
Instan
Pratinjau warna secara real-time saat Anda menyesuaikan slider atau keyboard.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Pilih warna di picker visual
Gunakan color picker interaktif untuk memilih hue pada bilah warna dan menyesuaikan saturasi serta kecerahan di kotak warna. Anda juga bisa langsung mengetik nilai HEX, RGB, atau HSL di kolom teks.
Sesuaikan dengan presisi
Gunakan slider hue, saturasi, dan kecerahan untuk menyempurnakan warna secara tepat. Riwayat warna secara otomatis menyimpan warna-warna terakhir yang Anda pilih untuk memudahkan perbandingan.
Salin dalam format yang Anda butuhkan
Dapatkan kode warna dalam format HEX (#FF5733), RGB (rgb(255, 87, 51)), atau HSL (hsl(11, 100%, 60%)) dengan satu klik. Semua format tersedia secara bersamaan.
FAQ
Ada pertanyaan?
Color picker web modern umumnya bekerja dalam ruang HSV: kotak seleksi memetakan saturasi pada sumbu X (kiri = tanpa saturasi, kanan = saturasi penuh) dan kecerahan pada sumbu Y (atas = kecerahan maksimum, bawah = hitam). Bilah hue di sisi memungkinkan pemilihan sudut hue (0 hingga 360 derajat). Ketika Anda memilih titik dalam kotak, picker menghitung nilai HSV dan mengonversinya ke HEX dan RGB untuk ditampilkan. Color picker bawaan browser (input type color) menggunakan antarmuka sistem operasi yang mungkin berbeda antara Windows, macOS, dan Linux.
Riwayat warna adalah kumpulan warna-warna yang terakhir dipilih, disimpan untuk memudahkan penggunaan ulang dan perbandingan. Alat desain profesional seperti Figma dan Adobe XD menyimpan palet warna di tingkat berkas (warna dokumen) dan tingkat pengguna (pustaka warna pribadi). Dalam picker web, riwayat biasanya disimpan di localStorage browser agar tetap tersedia antar sesi. Palet warna adalah pilihan warna-warna terkait yang dikurasi: warna merek, warna tema, atau palet yang dibuat secara algoritmis.
Cara paling akurat adalah menggunakan eyedropper di DevTools browser. Di Chrome: buka DevTools (F12), tab Elements, klik nilai warna mana pun di panel Styles, lalu color picker muncul dengan eyedropper untuk menangkap piksel mana pun di layar. Di Firefox: DevTools lalu Styles lalu klik kotak warna lalu tombol eyedropper. Di macOS, aplikasi Digital Color Meter (termasuk dalam sistem) menangkap warna dalam format apa pun. Di Windows, PowerToys dari Microsoft menyertakan Color Picker (Win+Shift+C) yang menangkap warna dalam format HEX, RGB, dan HSL dari titik mana pun di layar.
Aksesibilitas warna terutama dievaluasi melalui rasio kontras, yang didefinisikan oleh WCAG (Web Content Accessibility Guidelines). WCAG 2.1 mengharuskan rasio kontras minimum 4,5:1 untuk teks normal dan 3:1 untuk teks besar (18pt atau 14pt tebal). Rasio kontras dihitung dengan membandingkan luminansi relatif dua warna menggunakan rumus (L1+0,05)/(L2+0,05). Untuk desain yang aksesibel, strategi efektif adalah menggunakan oklch: warna dengan nilai L yang sama dalam oklch memiliki luminansi yang setara secara perseptual, sehingga memudahkan pembuatan palet dengan kontras yang dapat diprediksi.
CSS mendefinisikan 140 warna dengan nama standar, yang diwarisi dari warna X11 MIT (1987). Warna dasar yang didefinisikan dalam CSS1 (1996) berjumlah 16: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. CSS Color Level 3 (2011) menstandarisasi 140 nama X11, termasuk keunikan historis seperti rebeccapurple yang ditambahkan pada 2014 untuk menghormati Rebecca Meyer. CSS Color Level 4 tidak menambahkan nama baru tetapi memperkenalkan transparent sebagai nilai warna dengan rgba(0,0,0,0), serta warna sistem OS seperti Canvas dan ButtonText.
Sejarah color picker: dari Photoshop 1.0 hingga DevTools
Color picker digital bermula dari alat pengeditan gambar pertama. Adobe Photoshop 1.0 (1990, eksklusif Mac) sudah menyertakan pemilih warna dengan palet HSB dan nilai RGB numeris. Antarmuka kotak warna ganda (warna latar depan/belakang) yang dipopulerkan Photoshop menjadi referensi visual desain digital selama beberapa dekade. Color picker sistem Windows muncul di Windows 3.1 (1992) dengan desain 48 warna dasar plus palet yang dapat dikustomisasi, sebuah desain yang tetap hampir tidak berubah hingga Windows 7. macOS memperkenalkan ColorSync Utility di Mac OS X 10.0 (2001), yang untuk pertama kalinya menyertakan picker dengan profil warna ICC dan dukungan untuk ruang warna di luar sRGB.
Design token telah mengubah cara tim modern bekerja dengan warna. Konsep ini dipopulerkan oleh Salesforce pada tahun 2014 ketika menerbitkan sistem Theo untuk mengelola design token Lightning Design System. Sebuah design token warna adalah variabel dengan nama semantik (--color-brand-primary, --color-feedback-error) alih-alih nilai mentah (#FF0000). Alat seperti Style Dictionary (Amazon), Theo (Salesforce), dan spesifikasi W3C Design Tokens (dalam pengembangan sejak 2019) menstandarisasi cara token ini didefinisikan, ditransformasi, dan didistribusikan ke berbagai platform (web, iOS, Android, Figma).
Eyedropper di browser web adalah fitur yang sangat diinginkan oleh desainer dan developer selama bertahun-tahun. Chrome DevTools memperkenalkan eyedropper di color picker terintegrasinya pada tahun 2013 (versi 28). Firefox menambahkan eyedropper ke DevTools pada versi 31 (2014). Pada tahun 2021, EyeDropper API diusulkan sebagai API web standar (WICG), diimplementasikan di Chrome 95 dan Edge 95 (Oktober 2021), yang memungkinkan aplikasi web mana pun meluncurkan eyedropper sistem native dengan satu baris JavaScript: const result = await new EyeDropper().open(). Firefox dan Safari belum mengimplementasikan EyeDropper API hingga tahun 2024, sehingga penggunaannya terbatas pada browser berbasis Chromium.