Color Picker

Color Picker Web adalah pemilih warna online gratis terbaik di 2026. Ini mendukung lebih dari 20 format warna termasuk HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB, dan lainnya. Ini mencakup roda warna langsung, pemeriksa kontras WCAG, simulator buta warna, generator palet, pemilih warna gambar, dan 6 jenis harmoni — semuanya sepenuhnya gratis tanpa perlu mendaftar.

Untuk menemukan kode warna HEX dari sebuah gambar, gunakan Image Color Picker di Color Picker Web. Unggah foto apa saja, arahkan kursor pada area yang ingin Anda ambil sampelnya, dan klik untuk mengekstrak kode HEX, RGB, dan HSL yang tepat dari setiap piksel. Anda juga dapat menghasilkan palet warna lengkap dari gambar hanya dengan satu klik.

Alat pemilih warna memungkinkan Anda memilih, mengubah, dan menganalisis warna. Alat ini menampilkan nilai warna dalam berbagai format (HEX, RGB, HSL, CMYK), menghasilkan palet warna komplementer, memeriksa rasio kontras aksesibilitas WCAG, mensimulasikan buta warna, dan mengekstrak warna dari gambar yang diunggah. Alat ini sangat penting bagi desainer web, pengembang, dan desainer merek.

Untuk mengubah HEX ke RGB, gunakan alat konversi di atas. Masukkan kode HEX apa saja (misalnya #9333ea) dan dapatkan output RGB secara instan (147, 51, 234). Secara manual: pisahkan HEX menjadi 3 pasangan (93, 33, ea), konversi masing-masing dari heksadesimal ke desimal. R=147, G=51, B=234. Color Picker Web melakukan ini secara instan untuk semua format lebih dari 20.

Menurut WCAG 2.2, rasio kontras warna minimum untuk teks normal adalah 4,5:1 (Level AA) dan 7:1 (Level AAA). Untuk teks besar (18pt+ atau 14pt+ tebal), minimum adalah 3:1 untuk AA dan 4,5:1 untuk AAA. Komponen UI dan ikon memerlukan kontras minimal 3:1 terhadap warna di sekitarnya. Gunakan WCAG Contrast Checker di atas untuk menguji warna Anda.

Untuk memilih warna dari sebuah situs web: (1) Gunakan DevTools browser — klik kanan pada elemen mana pun, pilih 'Inspect', dan klik kotak warna di panel CSS. (2) Gunakan ekstensi browser seperti ColorZilla. (3) Ambil tangkapan layar dan unggah ke Color Picker Web menggunakan Image Color Picker untuk mengambil sampel dari piksel mana pun. Chrome DevTools juga memiliki alat pipet bawaan di panel pemilih warna.

HSL adalah singkatan dari Hue, Saturation, dan Lightness. Hue (0°–360°) adalah jenis warna pada roda warna. Saturation (0%–100%) menunjukkan seberapa cerah atau keabu-abuan warna tersebut. Lightness (0%–100%) menunjukkan seberapa gelap atau terang warna tersebut terlihat. Contoh: hsl(270, 81%, 56%) adalah ungu sedang. HSL adalah format terbaik untuk animasi CSS dan tema warna dinamis karena setiap properti dapat disesuaikan secara independen.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

Alat pemilih warna adalah utilitas digital yang memungkinkan pengguna untuk memilih warna apa pun dan mendapatkan kode pastinya dalam berbagai format — HEX, RGB, HSL, CMYK, dan lainnya. Alat ini digunakan setiap hari oleh desainer UI/UX untuk memilih warna antarmuka, pengembang web untuk mengkode nilai warna CSS, desainer merek untuk menjaga konsistensi warna, fotografer untuk mengekstrak warna dari gambar, dan seniman digital untuk pembuatan palet. Color Picker Web adalah pemilih warna gratis paling komprehensif yang tersedia pada tahun 2026, mendukung lebih dari 20 format warna, pemeriksaan aksesibilitas WCAG, simulasi buta warna, dan 18 bahasa.

Kode warna HEX adalah representasi heksadesimal 6 karakter dari sebuah warna yang digunakan dalam desain web dan CSS. Kode ini diawali dengan simbol # diikuti oleh tiga pasang karakter (00–FF), yang masing-masing mewakili intensitas saluran Merah, Hijau, dan Biru. Misalnya: #FF0000 adalah merah murni (R=255, G=0, B=0), #FFFFFF adalah putih (semua saluran pada maksimum), dan #000000 adalah hitam (semua saluran pada nol). Kode HEX 3-digit singkat seperti #F00 diperluas menjadi #FF0000. HEX adalah format warna yang paling didukung secara universal di HTML, CSS, SVG, dan alat desain seperti Figma.

Untuk memilih warna untuk sebuah situs web: (1) Mulailah dengan warna utama merek Anda dan buat skala warna lengkap dengan 9 tingkatan (50–900) menggunakan penyesuaian HSL. (2) Terapkan aturan 60-30-10 — 60% latar belakang netral, 30% warna sekunder, 10% aksen untuk CTA. (3) Verifikasi semua kombinasi teks/latar belakang memenuhi kontras WCAG AA (minimum 4,5:1 untuk teks normal). (4) Hasilkan warna aksen yang harmonis menggunakan alat Harmoni Warna — skema triadik atau komplementer-terpisah bekerja paling baik untuk situs web. (5) Uji setiap kombinasi warna dengan simulator buta warna untuk memastikan aksesibilitas bagi semua pengguna.

Untuk memilih warna merek: (1) Teliti psikologi warna — biru membangun kepercayaan, hijau menandakan pertumbuhan, merah menciptakan urgensi, ungu menunjukkan kemewahan dan kreativitas. (2) Analisis industri Anda — merek teknologi cenderung menggunakan biru dan abu-abu, merek kesehatan menggunakan hijau, merek mewah menggunakan emas, hitam, atau ungu tua. (3) Pilih warna utama merek yang mencerminkan emosi inti merek Anda. (4) Bangun skala warna penuh dari warna utama menggunakan metode HSL. (5) Pilih warna sekunder dan aksen menggunakan teori harmoni. (6) Verifikasi semua kombinasi memenuhi standar aksesibilitas WCAG. Dokumenkan sebagai token desain untuk konsistensi di semua platform.

HEX, RGB, dan HSL adalah tiga cara untuk merepresentasikan warna yang sama: HEX (#9333ea) adalah format heksadesimal 6-digit yang ringkas, ideal untuk CSS dan HTML — paling banyak didukung. RGB (rgb(147, 51, 234)) mendefinisikan warna berdasarkan nilai saluran Merah, Hijau, dan Biru dari 0–255 — terbaik untuk kanvas JavaScript, SVG, dan rendering layar. HSL (hsl(270, 81%, 56%)) mendefinisikan warna berdasarkan sudut Hue (0–360°), Saturasi (0–100%), dan Kecerahan (0–100%) — paling intuitif bagi desainer karena setiap properti dapat disesuaikan secara independen, menjadikannya ideal untuk animasi CSS dan theming dinamis. Ketiga properti ini menggambarkan warna yang sama tetapi melayani alur kerja yang berbeda.

RGB dan CMYK secara mendasar adalah model warna yang berbeda untuk jenis keluaran yang berbeda. RGB (Merah, Hijau, Biru) adalah model warna aditif yang digunakan untuk layar digital — menggabungkan warna menambahkan cahaya, dan mencampur semua saluran pada maksimum menghasilkan putih. CMYK (Sian, Magenta, Kuning, Hitam/Key) adalah model warna subtraktif yang digunakan dalam percetakan fisik — pencampuran tinta menyerap cahaya, dan menggabungkan semuanya menghasilkan warna hitam. Selalu desain dalam RGB untuk output digital/layar. Konversikan ke CMYK sebelum mengirim file ke percetakan komersial. Konversi tidak pernah sempurna — beberapa warna RGB (terutama warna cerah dan jenuh) tidak dapat direproduksi dalam cetakan CMYK.

HSB (Hue, Saturation, Brightness) dan HSV (Hue, Saturation, Value) adalah model warna yang sama dengan nama berbeda. Hue (0°–360°) mengidentifikasi keluarga warna. Saturation (0–100%) mengontrol kecerahan dari abu-abu hingga warna yang benar-benar cerah. Brightness/Value (0–100%) mengontrol seberapa banyak cahaya yang tampak dipancarkan oleh warna, dari hitam (0%) hingga sepenuhnya cerah (100%). HSB adalah model default di Adobe Photoshop, Illustrator, dan pemilih warna Figma, sehingga penting bagi desainer yang menggunakan alat ini. Model ini berbeda dari HSL dalam cara perhitungan Lightness dan Brightness — di HSL, 50% lightness adalah warna murni, sedangkan di HSB, 100% brightness adalah warna murni.

LAB (CIELAB) dan XYZ (CIEXYZ) adalah ruang warna yang independen dari perangkat, seragam secara perseptual, berdasarkan ilmu penglihatan manusia. XYZ adalah dasar dari semua ilmu warna modern — ia memetakan warna ke bagaimana mata manusia mempersepsinya menggunakan tiga konus (X, Y, Z yang kira-kira sesuai dengan sensitivitas merah, hijau, biru). LAB diturunkan dari XYZ dan dirancang sehingga jarak numerik yang sama mewakili perbedaan warna yang sama yang dirasakan, menjadikannya ideal untuk perbandingan warna, pemrosesan gambar, pembelajaran mesin, dan kontrol kualitas cetak. Keduanya digunakan dalam manajemen warna profesional, profil warna ICC, dan alur kerja pengeditan gambar tingkat lanjut. CSS sekarang mendukung keduanya melalui sintaks color(xyz …) dan lab(…) di browser modern.

Pemilih Warna Gambar di Color Picker Web memungkinkan Anda mengekstrak warna yang tepat dari foto, tangkapan layar, logo, atau karya seni apa pun. Unggah file gambar apa pun, lalu klik pada piksel mana pun untuk langsung mengekstrak nilai HEX, RGB, dan HSL-nya. Alat ini juga secara otomatis menghasilkan palet warna lengkap dari warna dominan dalam gambar Anda. Ini berguna untuk mencocokkan warna merek dari materi yang ada, membuat palet dari papan suasana, mengekstrak warna dari foto produk, dan membalikkan skema warna dari situs web pesaing. Tidak perlu akun atau instalasi perangkat lunak — bekerja sepenuhnya di browser.

Color Picker Web mendukung semua enam jenis harmoni warna utama berdasarkan teori roda warna: Komplementer — dua warna yang langsung berlawanan (180° terpisah), kontras maksimum. Komplementer Terpisah — satu warna dasar ditambah dua warna yang bersebelahan dengan komplemennya (150° dan 210°). Triadik — tiga warna yang jaraknya sama (120° terpisah), seimbang dan cerah. Analog — tiga warna bersebelahan (30° terpisah), harmonis dan alami. Monokromatik — variasi dari satu rona dengan tingkat saturasi dan kecerahan yang berbeda. Tetradik — empat warna yang terpisah sama rata (90°), kompleks dan kaya. Semua harmoni dihitung secara matematis secara real-time saat Anda memilih warna.

Ya, Color Picker Web sepenuhnya gratis untuk digunakan — setiap fitur termasuk pemilih warna, generator palet, pemilih warna gambar, pemeriksa kontras WCAG, simulator buta warna, harmoni warna, generator rona dan bayangan, serta semua 20+ konversi format warna tersedia tanpa biaya. Tidak diperlukan akun, alamat email, atau pendaftaran. Tidak ada iklan, tidak ada batasan penggunaan, dan tidak ada tingkat premium — semua fitur sepenuhnya gratis selamanya. Alat ini juga tersedia dalam 18 bahasa: Inggris, Hindi, Spanyol, Rusia, Prancis, Jerman, Italia, Portugis, Bengali, Jepang, Korea, Melayu, Polandia, Indonesia, Arab, Bulgaria, Turki, dan Swedia.

Persyaratan kontras warna WCAG (Web Content Accessibility Guidelines) memastikan bahwa teks dapat dibaca oleh pengguna dengan penglihatan rendah, buta warna, atau mata yang menua. Rasio kontras mengukur perbedaan luminansi antara warna teks dan latar belakangnya — berkisar dari 1:1 (tidak ada kontras) hingga 21:1 (maksimal, hitam di atas putih). WCAG 2.2 Tingkat AA mengharuskan rasio minimum 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Tingkat AAA mengharuskan 7:1 untuk teks normal. Ketidakpatuhan dapat mengakibatkan tanggung jawab hukum di bawah ADA (AS), EAA (Eropa), dan Bagian 508. Lebih dari 4.600 gugatan aksesibilitas diajukan di AS hanya pada tahun 2023, dengan kegagalan kontras termasuk di antara masalah yang paling sering dikutip.

Color Picker Web meniru 8 jenis kelainan penglihatan warna: Protanopia — buta warna merah (1,3% pria). Protanomali — sensitivitas merah berkurang (1,3% dari pria). Deuteranopia — buta warna hijau (1,2% pria). Deuteranomali — sensitivitas terhadap warna hijau berkurang (5% dari pria, jenis yang paling umum). Tritanopia — kebutaan biru (0,001% dari populasi). Tritanomali — sensitivitas biru berkurang (jarang). Akromatopsia — buta warna total, hanya melihat skala abu-abu (0,003% dari populasi). Akromatomali — penurunan persepsi warna di semua saluran (sangat jarang). Setiap simulasi menggunakan matriks transformasi warna klinis yang diterapkan pada warna yang Anda pilih secara real time.

Psikologi warna dalam desain UI mempelajari bagaimana warna memengaruhi emosi, persepsi, dan perilaku pengguna. Asosiasi kunci: Biru — kepercayaan, keandalan, ketenangan (digunakan oleh Facebook, Twitter, PayPal, LinkedIn). Hijau — pertumbuhan, kesehatan, alam, kesuksesan (digunakan oleh Spotify, WhatsApp, merek makanan utuh). Merah — urgensi, gairah, energi, nafsu (digunakan untuk spanduk penjualan, merek makanan, CTA). Ungu — kemewahan, kreativitas, kebijaksanaan (digunakan oleh Cadbury, Hallmark, merek kecantikan). Kuning — optimisme, kehangatan, perhatian (digunakan untuk peringatan, sorotan penjualan). Oranye — antusiasme, keramahan (digunakan oleh Amazon, Fanta, Harley-Davidson). Psikologi warna memengaruhi tingkat konversi, persepsi merek, dan retensi pengguna.

Membangun palet warna sistem desain melibatkan 5 langkah: (1) Tentukan warna merek utama Anda dan konversikan ke HSL. (2) Buat skala warna 9 tingkat (50–900) dengan menyesuaikan kecerahan secara sistematis — tingkat yang lebih terang (50–300) untuk latar belakang dan tint, tingkat yang lebih gelap (600–900) untuk teks dan mode gelap. (3) Ulangi untuk warna sekunder, aksen, sukses, peringatan, kesalahan, dan netral. (4) Buat token semantik (--color-primary, --color-primary-hover, --color-surface) yang merujuk pada tingkatan skala Anda. (5) Verifikasi setiap kombinasi teks/latar belakang memenuhi standar WCAG AA. Gunakan Color Picker Web untuk menghasilkan skala Anda, memverifikasi kontras, dan mengekspor nilai HEX/HSL sebagai token desain untuk Figma atau CSS.

Aturan 60-30-10 adalah prinsip desain klasik untuk menciptakan skema warna yang seimbang dan menarik secara visual. 60% — warna dominan/netral (latar, dinding, permukaan besar) — biasanya netral terang yang menentukan nada keseluruhan. 30% — warna sekunder (perabot, header, sidebar) — melengkapi warna dominan dan menambah kedalaman. 10% — warna aksen (CTA, tombol, sorotan, tautan penting) — menciptakan minat visual dan menarik perhatian ke tindakan kunci. Dalam desain web ini diterjemahkan menjadi: 60% latar belakang dan permukaan dasar, 30% area konten dan elemen UI sekunder, 10% tombol utama, status aktif, dan sorotan penting. Rasio ini mencegah kelebihan visual sambil menjaga hierarki.

Kecerahan relatif mengukur kecerahan yang terlihat dari suatu warna pada skala 0 (hitam) hingga 1 (putih). Perhitungannya: (1) Ubah setiap saluran RGB (0–255) menjadi desimal (0–1) dengan membagi 255. (2) Hapus koreksi gamma: jika nilai ≤ 0,04045, bagi dengan 12,92; jika tidak, gunakan (nilai + 0,055) / 1,055 dipangkatkan 2,4. (3) Terapkan rumus berbobot: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Bobot ini mencerminkan sensitivitas mata manusia — paling sensitif terhadap hijau, kurang sensitif terhadap merah, paling sedikit terhadap biru. (4) Rasio kontras = (L_terang + 0,05) / (L_gelap + 0,05). Offset 0,05 mewakili cahaya sekitar pada layar biasa. Color Picker Web melakukan perhitungan ini secara instan.

HSL (Hue, Saturation, Lightness) dan HSB/HSV (Hue, Saturation, Brightness/Value) keduanya menggunakan Hue dan Saturation tetapi berbeda pada saluran ketiga. Dalam HSL, Kecerahan 50% adalah warna murni yang sepenuhnya jenuh; 0% adalah hitam dan 100% adalah putih. Ini simetris. Dalam HSB/HSV, Kecerahan/Nilai 100% adalah warna murni; 0% selalu hitam terlepas dari nilai lainnya. HSB lebih intuitif untuk memilih warna karena Anda dapat pertama-tama memilih warna cerah pada kecerahan 100% dan kemudian menggelapkannya — menjadikannya default di Photoshop, Figma, dan Illustrator. HSL lebih intuitif untuk CSS karena Anda dapat secara mulus menginterpolasi antara versi gelap dan terang dari warna yang sama.

Pencampuran warna aditif (RGB) dan pencampuran warna subtraktif (CMYK) adalah dua model warna dasar. Aditif (RGB) — digunakan oleh perangkat pemancar cahaya (layar, proyektor, LED). Warna dibuat dengan menambahkan cahaya. Menggabungkan ketiga saluran pada maksimum (R=255, G=255, B=255) menghasilkan warna putih. Tidak ada cahaya (R=0, G=0, B=0) menghasilkan warna hitam. Subtraktif (CMYK) — digunakan dalam percetakan. Tinta menyerap (mengurangi) panjang gelombang cahaya. Menggabungkan semua tinta dalam jumlah maksimum menyerap semua cahaya, menghasilkan warna hitam (secara teori — dalam praktik, tinta K/hitam ditambahkan karena pencampuran tinta tidak sempurna). Implikasi praktis: desain karya digital dalam RGB, kemudian konversi ke CMYK untuk cetak — dengan catatan bahwa beberapa warna RGB cerah tidak dapat direproduksi dalam CMYK.

Temperatur warna menggambarkan kehangatan atau kedinginan suatu warna, diukur dalam Kelvin (K) untuk sumber cahaya dan dipersepsikan secara visual untuk warna desain. Warna hangat (merah, oranye, kuning — warna 0°–60° dan 300°–360°) terasa energik, mendesak, dan mengundang. Mereka maju secara visual — elemen dengan warna hangat tampak lebih dekat. Warna dingin (biru, hijau, ungu — rona 120°–240°) terasa tenang, dapat dipercaya, dan profesional. Mereka mundur secara visual — elemen dengan warna dingin tampak lebih jauh. Netral (putih, abu-abu, krem, hijau kebiruan dekat 90°–120°) seimbang dan serbaguna. Dalam desain UI, warna hangat mendorong tindakan (CTA), warna dingin membangun kepercayaan (header, latar belakang), dan warna netral memberikan struktur. Bagian Tentang Warna di Color Picker Web menunjukkan suhu yang dipersepsikan dari warna yang dipilih.