Color Picker

1. 01Pilih warna atau tempel HEXGunakan color picker atau ketik kode HEX seperti #3B82F6. Kode singkat seperti #0F0 juga berfungsi.
2. 02Dapatkan HEX, RGB, dan HSLKode otomatis diterjemahkan ke semua format, lengkap dengan palet yang disarankan dan cek kontras.
3. 03Salin dan pakaiKlik kode yang Anda inginkan untuk menyalinnya, lalu pakai di situs web, desain, atau presentasi.

• Desain situs web dan CSSSalin HEX atau variabel CSS langsung ke kode atau stylesheet Anda.
• Branding dan desain grafisPilih warna brand yang konsisten dan salin ke Canva, presentasi, atau tools desain lainnya.
• Menyesuaikan kontrasCek apakah lebih baik pakai teks terang atau gelap di atas warna background yang Anda pilih, supaya tetap mudah dibaca.

• #3B82F6 (biru)Biru yang nyaman untuk tombol dan link. Diterjemahkan menjadi rgb(59, 130, 246).
• #22C55E (hijau)Hijau untuk status berhasil atau konfirmasi. Anda juga mendapat nilai HSL untuk penyesuaian yang lebih halus.
• #F97316 (oranye)Oranye yang energik untuk tombol call-to-action. Bisa dijadikan dasar palet terang dan gelap.

• Cek kontrasnyaSebaiknya cek kontras antara warna teks dan background, supaya teks tetap mudah dibaca.
• Jaga konsistensi brandUntuk sebuah brand, sebaiknya pakai 2-4 warna tetap dan tidak sering menggantinya.
• Beda layar bisa beda tampilanWarna yang terlihat bagus di satu layar bisa terlihat sedikit berbeda di layar lain. Sebaiknya cek di beberapa perangkat.

HEX adalah kode enam digit (seperti #3B82F6) yang umum dipakai di situs web dan CSS. RGB menjelaskan warna berdasarkan intensitas merah, hijau, dan biru. HSL menjelaskannya berdasarkan hue (rona), saturation (saturasi), dan lightness (kecerahan), dan sangat praktis saat ingin membuat warna lebih terang, lebih gelap, atau mencari warna komplementer. Alat ini mengonversi semuanya secara otomatis.

Semua konversi berjalan di browser memakai rumus standar konversi warna, tanpa memanggil server dan tanpa menyimpan data. Palet warna diturunkan dari warna yang Anda pilih, dan cek kontras memakai perhitungan kecerahan relatif (WCAG).

Apa itu color picker?

Alat yang memungkinkan Anda memilih warna dan mendapatkan kodenya dalam HEX, RGB, dan HSL, lengkap dengan palet yang disarankan dan cek kontras.

Apa bedanya HEX, RGB, dan HSL?

HEX adalah kode yang umum dipakai di situs web. RGB menjelaskan warna berdasarkan merah-hijau-biru. HSL menjelaskannya berdasarkan hue, saturation, dan lightness, dan praktis untuk membuat warna lebih terang atau gelap. Semuanya merepresentasikan warna yang sama.

Bagaimana cara menyalin kode warna?

Klik kode yang Anda inginkan (HEX, RGB, HSL, atau variabel CSS), dan kode itu akan disalin ke clipboard dengan tanda "Tersalin".

Bisakah warnanya langsung dipakai di CSS?

Ya. Anda bisa menyalin HEX atau variabel CSS siap pakai (seperti --color: #3B82F6;) dan menempelkannya langsung ke kode Anda.

Apakah warna yang saya pilih disimpan?

Tidak. Semua dihitung di browser saja, tanpa data yang disimpan. Me-refresh halaman mengatur ulang pilihan Anda.

Kenapa warna terlihat berbeda di layar yang berbeda?

Layar yang berbeda menampilkan warna sedikit berbeda karena kalibrasi, kecerahan, dan teknologi layarnya. Kodenya sama, tapi tampilannya bisa berbeda.