Pemilih & Konverter Warna

Ya — sepenuhnya gratis tanpa pendaftaran, tanpa akun, dan tanpa batas penggunaan. Alat ini berjalan seluruhnya di browser Anda sehingga warna yang Anda pilih, tempel, atau cuplik tidak pernah meninggalkan perangkat Anda. Tidak ada yang perlu diinstal dan tidak perlu langganan. Berbeda dengan sejumlah alat desain yang mengunci fitur lanjutan di balik paywall, semua fitur di sini — konversi, eyedropper, image picker, cek kontras WCAG, tint dan shade, simulasi buta warna, dan pembuatan skema warna — tersedia gratis sejak kunjungan pertama.

Tempel kode hex Anda (dengan atau tanpa awalan #) ke kolom HEX, dan nilai RGB, HSL, HSV, CMYK, serta OKLCH langsung diperbarui. Misalnya, tempel #3b82f6 dan Anda akan segera melihat rgb(59, 130, 246) di kolom RGB, hsl(217, 91%, 60%) di kolom HSL, dan seterusnya. Semua format selalu tersinkron — Anda hanya perlu memasukkan warna satu kali. Konversinya dua arah: ketik nilai RGB dan kolom HEX serta semua kolom lain diperbarui dengan cara yang sama. Ini menjadikannya konverter hex-ke-rgb dan rgb-ke-hex yang cepat dalam satu tampilan.

Ketik atau tempel nilai RGB ke kolom RGB — misalnya 59, 130, 246 (angka saja, dipisah koma) atau bentuk CSS lengkap rgb(59, 130, 246) — dan kode HEX langsung diperbarui. Outputnya selalu berupa kode hex enam karakter yang valid dengan awalan #, siap disalin ke stylesheet atau file desain. Konversi dari RGB ke HEX bersifat matematis eksak: setiap kanal (0–255) dikonversi ke nilai heksadesimal dua digit lalu digabungkan. Tanpa kesalahan pembulatan, tanpa tebak-tebakan.

Alat ini mengonversi dua arah antara enam format: HEX (kode #rrggbb yang dipakai HTML dan CSS), RGB (nilai merah-hijau-biru 0–255), HSL (hue 0–360°, saturasi dan lightness dalam persen), HSV/HSB (hue-saturation-value, model yang dipakai di sebagian besar pemilih warna aplikasi desain), CMYK (persentase cyan-magenta-yellow-black untuk pratinjau cetak), dan OKLCH (ruang warna modern yang seragam secara perseptual dari CSS Color Level 4). Ubah satu kolom dan lima kolom lainnya langsung diperbarui. Ini mencakup hampir semua format warna yang akan Anda temui dalam pengembangan web, desain aplikasi, dan pekerjaan cetak.

ColorHexa.com adalah situs referensi warna lama yang menghasilkan halaman kaya per warna, mencakup komplementer, shade, tint, harmoni triadik, pratinjau buta warna, dan banyak turunan lain — sangat baik untuk riset warna mendalam. Perbedaan utamanya adalah interaktivitas dan alur kerja: alat ini memperbarui semua format secara real time saat Anda mengetik dan memungkinkan pemilihan warna secara visual dengan roda warna, eyedropper, atau image picker, alih-alih membuka URL baru untuk setiap warna. ColorHexa menghasilkan permalink per warna (berguna untuk berbagi), sedangkan alat ini dioptimalkan untuk kerja warna iteratif yang cepat. Keduanya berharga; alat ini lebih cepat untuk iterasi, ColorHexa lebih dalam untuk referensi.

RapidTables memiliki kumpulan konverter satu format yang populer — halaman terpisah untuk hex-ke-rgb, rgb-ke-hex, rgb-ke-hsl, dan seterusnya — masing-masing melakukan satu konversi, sehingga Anda harus berpindah halaman untuk mendapatkan hasil dalam beberapa format. Alat ini menampilkan semua format sekaligus dalam satu tampilan langsung: masukkan warna sekali dan lihat HEX, RGB, HSL, HSV, CMYK, dan OKLCH pada saat yang sama. Alat ini juga menambahkan fitur yang tidak dimiliki RapidTables — eyedropper, image color picker, cek kontras WCAG, pembuatan skema warna, skala tint/shade, dan simulasi buta warna — sehingga menjadi pusat kerja warna yang lengkap, bukan sekadar kalkulator satu fungsi.

convertingcolors.com menyediakan rincian mendetail dalam banyak format, termasuk ruang warna khusus seperti CIELab, XYZ, dan Hunter Lab yang tidak dicakup alat ini. Ia sumber yang baik untuk riset ilmu warna. Perbedaan utamanya adalah alur kerja: convertingcolors menampilkan halaman statis per warna, sedangkan alat ini adalah konverter interaktif langsung di mana perubahan pada kolom mana pun langsung memperbarui semua kolom lain. Alat ini juga menambahkan fitur desain praktis — eyedropper, image picker, kontras WCAG, tint/shade, skema warna, dan pratinjau buta warna — yang tidak disediakan convertingcolors. Untuk konversi ruang warna profesional di CIELab atau XYZ, convertingcolors lebih menyeluruh; untuk kerja warna web dan desain sehari-hari, alat ini jauh lebih cepat.

cssgradient.io pada dasarnya adalah generator gradien CSS dengan komponen pemilih warna bawaan — sangat baik untuk membuat gradien latar belakang CSS, tetapi bukan konverter warna serbaguna. Alat ini berfokus pada konversi warna individual antar semua format utama, membangun palet yang aksesibel, dan memeriksa kontras. Jika tujuan Anda menghasilkan kode gradien CSS, cssgradient.io memang dibuat untuk itu; jika tujuan Anda memahami sebuah warna di berbagai format, menemukan rasio kontras yang aksesibel, atau membangun palet lengkap dari satu warna dasar, konverter inilah pilihan yang tepat. Keduanya melayani kebutuhan yang saling melengkapi namun berbeda.

Bisa. Eyedropper bawaan memungkinkan Anda mengklik piksel mana pun di layar — termasuk warna di tab browser lain, aplikasi, gambar, atau video yang sedang diputar — dan memuat warna piksel itu ke semua kolom konversi sekaligus. Eyedropper menggunakan EyeDropper API native browser yang didukung di Chrome 95+ dan Edge 95+. Di Firefox dan Safari, eyedropper belum tersedia karena keterbatasan dukungan API platform, tetapi roda warna, kolom format, dan image picker tetap berfungsi normal di semua browser. Di perangkat mobile, gunakan image picker: ambil tangkapan layar lalu pilih warnanya dari gambar tersebut.

Bisa — ini adalah image color picker lengkap. Unggah foto, seret dan lepas, atau tempel dari clipboard (Ctrl+V / Cmd+V), lalu arahkan kursor ke gambar dan klik untuk mengambil warna persis dari piksel mana pun. Loupe pembesar memperbesar tampilan untuk pemilihan presisi tingkat piksel, dan setiap warna yang Anda klik disimpan ke strip khusus sehingga Anda bisa membangun palet dari satu gambar tanpa kehilangan pilihan sebelumnya. Gambar dibaca secara lokal di browser Anda menggunakan HTML canvas dan tidak pernah diunggah ke mana pun — fitur ini berfungsi di semua browser termasuk Firefox dan Safari yang tidak mendukung eyedropper layar.

Ada. Kontrol pemilih warna menampilkan spektrum dan gradien lightness/saturation yang dapat Anda geser untuk menemukan corak yang diinginkan secara visual. Strip warna terbaru mengingat warna yang telah Anda gunakan dalam sesi berjalan sehingga Anda bisa kembali ke pilihan sebelumnya seketika. Roda warna dan kolom format bekerja bersama secara real time — geser roda dan keenam kolom format diperbarui serentak, atau ketik nilai di kolom mana pun dan roda melompat ke posisi tersebut. Sinkronisasi dua arah ini berarti Anda bisa mulai dari format apa pun dan langsung melihat hasilnya secara visual.

OKLCH adalah ruang warna modern yang seragam secara perseptual, diperkenalkan dalam CSS Color Level 4. Berbeda dengan RGB atau HSL, di mana perubahan angka yang sama tidak menghasilkan perbedaan yang sama di mata manusia, OKLCH dikalibrasi sehingga menaikkan atau menurunkan nilai lightness (L) dengan jumlah tetap menghasilkan efek visual yang konsisten apa pun hue-nya. Ini membuatnya ideal untuk membangun palet warna yang aksesibel dan seimbang — nilai L yang sama pada hue berbeda tampak sama terangnya bagi persepsi manusia. OKLCH juga dapat merepresentasikan warna gamut lebar (Display P3, Rec.2020) dan didukung secara native di browser modern melalui fungsi CSS oklch(). Alat ini memperingatkan Anda ketika nilai OKLCH berada di luar gamut sRGB dan perlu di-clamp demi kompatibilitas mundur.

Ya. Pemeriksa kontras WCAG menghitung rasio kontras berbasis luminansi antara warna pilihan Anda dengan latar putih dan hitam, lalu menampilkan lencana lulus/gagal AA dan AAA untuk teks normal (di bawah 18pt), teks besar (18pt+ atau tebal 14pt+), dan komponen UI. WCAG AA mensyaratkan rasio 4,5:1 untuk teks normal (3:1 untuk teks besar); WCAG AAA mensyaratkan 7:1 (4,5:1 untuk teks besar). Pemeriksa ini diperbarui langsung saat Anda menyesuaikan kolom warna mana pun, memudahkan iterasi menuju corak yang aksesibel tanpa beralih ke alat pemeriksa aksesibilitas terpisah. Fitur ini melampaui yang ditawarkan ColorHexa atau RapidTables untuk kerja warna berfokus aksesibilitas.

Bisa. Generator tint dan shade menghasilkan skala tint yang semakin terang (warna dicampur ke arah putih) dan shade yang semakin gelap (dicampur ke arah hitam) dari warna dasar Anda. Klik tingkat mana pun pada skala untuk menjadikannya warna aktif baru dan langsung melihat nilai HEX, RGB, HSL, dan OKLCH-nya. Ini cara cepat membangun rentang warna lengkap yang dibutuhkan design system — latar terang, state hover, state active, garis tepi gelap — tanpa menghitung setiap tingkat secara manual. Skala dihitung ulang pada setiap perubahan warna tanpa permintaan ke server, tidak seperti alat desain cloud yang memerlukan koneksi jaringan.

Bisa. Dari warna dasar apa pun, alat ini membangun enam skema warna serasi berdasarkan harmoni roda warna standar: komplementer (hue berlawanan), analog (hue berdekatan), triadik (tiga hue berjarak sama), tetradik (empat hue membentuk persegi panjang), split-complementary (warna dasar plus dua hue di sisi komplemennya), dan monokromatik (hue sama dengan saturasi dan lightness berbeda). Klik swatch mana pun dalam skema untuk menjadikannya warna dasar baru dan terus bereksplorasi — sehingga alat ini berfungsi sebagai generator palet warna lengkap untuk membangun kombinasi yang kohesif dan sesuai merek. Setiap swatch menampilkan kode hex-nya untuk langsung disalin.

Ya. Simulator buta warna menampilkan pratinjau warna pilihan Anda sebagaimana terlihat oleh penyandang empat jenis utama defisiensi penglihatan warna: protanopia (buta merah), deuteranopia (buta hijau), tritanopia (buta biru), dan achromatopsia (buta warna total / tanpa penglihatan warna). Simulasi dihitung menggunakan algoritma standar Brettel/Viénot dan diperbarui langsung pada setiap perubahan warna. Dikombinasikan dengan pemeriksa kontras WCAG, ini membantu memastikan pilihan warna Anda tetap dapat dibedakan dan aksesibel bagi semua pengguna — penting untuk visualisasi data, grafik, peta, dan indikator status UI.

Ya. Saat Anda memilih atau memasukkan warna, alat ini menampilkan warna CSS bernama terdekat — kecocokan paling mirip dari daftar lengkap 148 warna bernama yang didefinisikan dalam spesifikasi CSS Color. Misalnya, #3b82f6 paling dekat dengan RoyalBlue, #228B22 persis ForestGreen, dan #FFB6C1 adalah LightPink. Ini berguna untuk mendeskripsikan warna dengan bahasa sehari-hari, menemukan alternatif bernama yang mirip dengan hex kustom, atau memeriksa apakah warna Anda persis cocok dengan kata kunci CSS standar.

Bisa. Konverter CMYK menampilkan persentase cyan, magenta, yellow, dan black bersama semua kolom format lain, dan sepenuhnya dapat diedit dua arah — ubah nilai CMYK mana pun dan lima format lainnya langsung diperbarui. Konversinya menggunakan rumus matematika standar yang independen dari perangkat, cocok untuk pratinjau perkiraan hasil cetak di layar. Untuk output cetak yang eksak — terutama warna spot atau cetak offset profesional — gunakan profil CMYK yang ditentukan oleh percetakan Anda, karena pencocokan warna layar-ke-cetak memerlukan profil warna ICC yang melampaui rumus sederhana. Warna spot Pantone/PMS tidak didukung karena bergantung pada pustaka swatch berlisensi.

Ya. Pemilih warna Google hanya muncul di hasil pencarian Google tertentu dan tidak bisa di-bookmark atau dipakai mandiri. Adobe Color (color.adobe.com) memerlukan akun Adobe dan menyinkronkan data Anda ke server Adobe. Ini adalah pemilih dan konverter warna mandiri yang gratis, terbuka dalam satu klik, tanpa akun, berfungsi di perangkat apa pun (desktop, tablet, ponsel), dan menyediakan konversi, pemeriksaan aksesibilitas, serta pembuatan palet di satu tempat — fitur yang tersebar di beberapa alat Adobe dan beberapa fitur pencarian Google terpisah. Semuanya berjalan lokal di browser Anda tanpa komunikasi ke server.

Sepenuhnya privat. Setiap operasi — memilih, mengonversi, menghitung kontras, membuat tint/shade, membuat skema, mengambil sampel dari gambar — terjadi secara lokal di browser Anda. Tidak ada yang Anda masukkan, cuplik, atau unggah yang dikirim ke server mana pun. Warna terbaru disimpan hanya di local storage browser Anda sendiri dan tidak pernah ditransmisikan. Ini perbedaan berarti dibanding alat desain berbasis cloud seperti Adobe Color atau pemilih warna Figma yang menyinkronkan riwayat warna Anda ke server mereka. Apa yang Anda pilih di sini tetap di perangkat Anda.

Tempel kode hex Anda ke kolom HEX — misalnya #3b82f6 — dan nilai HSL langsung muncul: hsl(217, 91%, 60%). Anda juga bisa sebaliknya: ketik hue (0–360), saturasi (0–100%), dan lightness (0–100%) di kolom HSL, dan kode hex serta semua format lain diperbarui sekaligus. Konversinya matematis eksak. HSL sangat berguna di CSS karena penyesuaian lightness bersifat intuitif — untuk membuat warna 10% lebih terang, cukup tambahkan 10 ke nilai L. Inilah yang menjadikan HSL format favorit untuk membangun state hover dan active dalam design system.

Ya. Seluruh alat berjalan di browser mobile modern apa pun — Safari di iPhone/iPad dan Chrome di Android. Roda warna, kolom input format, image color picker, pemeriksa kontras WCAG, skala tint/shade, dan generator skema warna semuanya berfungsi normal di mobile. Eyedropper layar tidak tersedia di browser mobile (fitur ini hanya ada di Chrome/Edge desktop), tetapi image picker dan tempel dari clipboard berfungsi sempurna di mobile — ambil tangkapan layar warna yang ingin Anda cuplik, tempel atau unggah, lalu pilih dari gambar. Alat ini sepenuhnya ramah sentuhan dengan area ketuk yang besar.

Alat ini menghasilkan nilai warna CSS yang valid di semua format yang didukung — #hex, rgb(…), hsl(…), hsv(…), cmyk(…), dan oklch(…) — masing-masing dengan tombol salin sekali klik. Anda bisa menempelkan salah satunya langsung ke definisi variabel CSS atau memakainya dalam sintaks arbitrary value Tailwind, misalnya bg-[#3b82f6] atau text-[rgb(59,130,246)]. Alat ini juga menampilkan kata kunci warna CSS bernama terdekat, sehingga Anda bisa memakai nama warna langsung di CSS atau kelas warna bernama Tailwind. Nilai palet bawaan Tailwind (seperti blue-500) tidak dipetakan otomatis, tetapi Anda dapat membandingkan warna Anda secara visual dengan swatch Tailwind menggunakan roda warna dan skala tint/shade.