Apa itu Pemilih Warna?

Pilih warna apa pun secara visual dan dapatkan nilai hex, RGB, serta HSL-nya. Klik atau seret untuk menemukan warna yang tepat, lalu salin kodenya.

Geser di kotak saturation/brightness untuk mengubah tone, geser bar hue untuk berpindah keluarga warna, lalu tool memunculkan nilai hex, RGB, dan HSL yang bisa disalin sekali klik. Mengetik kode hex di kolom membuat kotak melompat ke titik itu juga, jadi kamu bisa menyetel warna brand yang sudah ada tanpa memulai dari warna acak.

Cara menggunakan

1. Klik area warna atau seret pemilih untuk menemukan warna Anda
2. Sesuaikan dengan penggeser hue dan kontrol opasitas opsional
3. Salin nilai hex, RGB, atau HSL dengan satu klik

Kapan menggunakan

• Memilih warna aksen untuk CSS situs tanpa membuka aplikasi desain.
• Mengubah hex dari brand guide menjadi HSL untuk design system.
• Membuat palet kecil berisi warna-warna tetangga dengan menggeser slider hue.

Hasil

Pilih oranye hangat: #E67E22, rgb(230, 126, 34), hsl(28, 80%, 52%).

FAQ

Apa beda HSL dan HSB (HSV)?

HSL bergerak dari hitam ke putih lewat warna murni pada lightness 50%, jadi enak untuk tint dan shade yang simetris. HSB ala Photoshop bergerak dari hitam ke warna murni pada brightness 100%, lebih mirip cara orang mencampur cat.

Kenapa warna di layar berbeda dengan hasil cetak?

Layar pakai RGB (cahaya yang ditambahkan), cetakan pakai CMYK (tinta yang menyerap). Hijau cerah dan biru elektrik khususnya tidak punya padanan persis di CMYK. Selalu minta proofing di medium sebenarnya sebelum disetujui.

Apakah hex-nya otomatis aman WCAG?

Tidak, aksesibilitas ditentukan oleh pasangan warna, bukan satu warna saja. Padukan hex foreground dengan hex background, lalu cek rasio kontras: minimal 4,5:1 untuk teks utama, 3:1 untuk teks besar.

Bagaimana mengambil warna yang sudah ada di layar?

Klik Ambil dari layar dan pipet membiarkanmu mengambil sampel piksel mana pun di layarmu — kode hex yang persis langsung masuk ke pemilih warna, jadi kamu bisa menyetel saturasi, kecerahan, atau transparansi. (Tombol pipet hanya muncul di tempat yang mendukungnya; kalau tidak, baca hex dengan pengukur warna sistemmu — Digital Color Meter di macOS, PowerToys di Windows, Chrome DevTools — lalu tempel ke kolom masukan.)

Apakah picker ini mendukung transparansi?

Ya. Di bawah bilah hue ada slider Opasitas yang mengatur alpha dari 0 hingga 100%. Di belakang sampel pratinjau ada motif papan catur agar tingkat transparansi langsung terlihat, dan tombol salin RGB serta HSL otomatis berganti ke rgba() dan hsla() ketika alpha turun di bawah 100%.

Alat terkait