Ambil Warna dari Gambar: HEX, RGB, HSL, dan Palet

Setiap piksel di gambar digital menyimpan warna sebagai tiga angka: merah, hijau, dan biru. Alat ambil warna membaca angka-angka itu di titik pilihan Anda dan menampilkannya dalam format yang dipakai desainer dan developer. Jadi Anda mudah memakai ulang warna persis dari foto, logo, atau screenshot tanpa menebak-nebak dengan mata.

Mata mudah tertipu oleh warna sekitar dan kecerahan layar, jadi dua warna yang tampak sama bisa cukup berbeda kodenya. Mengambil langsung dari file menghilangkan tebak-tebakan.

Tiga cara menulis warna

Saat memilih antara HEX vs RGB vs HSL, ingat bahwa ketiganya menggambarkan warna yang sama. HEX adalah kode ringkas enam karakter yang dipakai di desain web dan sebagian besar aplikasi desain. RGB mencantumkan nilai merah, hijau, dan biru dari 0 hingga 255. HSL menggambarkan hue, saturasi, dan kecerahan, format termudah untuk membuat warna lebih terang atau gelap di CSS tanpa mengubah karakternya.

Tambahkan gambar dengan menariknya ke kotak, memilih file, atau menempel screenshot. Gerakkan kursor di atas gambar: warna di bawahnya langsung ditampilkan di bawah. Klik untuk memilihnya. Warna yang dipilih tampil dengan contoh warna besar serta kode HEX, RGB, dan HSL, masing-masing dengan tombol salin sendiri.

Setiap warna yang dipilih masuk ke riwayat singkat, jadi Anda bisa mengumpulkan beberapa warna dari satu gambar dan menyalinnya nanti. Klik contoh warna mana pun di riwayat untuk menampilkan kodenya lagi.

Menyalin kode

Untuk cepat mendapat kode HEX dari gambar, perbesar tampilan browser jika areanya kecil, klik piksel yang tepat, lalu tekan Salin HEX. Kodenya diawali tanda pagar dan langsung bisa dipakai di CSS, Figma, Canva, dan sebagian besar aplikasi lain.

Begitu Anda menambahkan gambar, alat ini menganalisis salinan kecilnya dan menemukan warna dominan dengan metode clustering. Hingga delapan warna muncul, diurutkan berdasarkan seberapa luas area yang ditempatinya. Klik salah satunya untuk melihat kode lengkap, atau salin semuanya sebagai daftar nilai HEX atau CSS custom properties yang siap ditempel ke stylesheet.

Membuat palet dari foto adalah cara cepat menyusun skema warna yang sudah tampak harmonis, karena warnanya berasal dari pemandangan nyata: senja, hutan, atau ruangan yang tertata apik.

Mengambil dari logo

Untuk menemukan warna brand dari logo, pakai file aslinya, bukan screenshot atau salinan terkompres yang bisa sedikit menggeser warna. Ambil dari area logo yang rata, bukan tepinya, tempat warna bercampur dengan latar.

Chrome, Edge, dan browser Chromium lain di komputer mendukung eyedropper layar. Tekan Ambil warna dari mana saja di layar, dan kursor berubah jadi kaca pembesar yang bisa digerakkan di atas jendela apa pun, termasuk aplikasi lain. Klik untuk memilih atau tekan Escape untuk batal. Ini alat ambil warna layar yang praktis saat warna yang Anda butuhkan ada di video, aplikasi desain, atau situs.

Firefox dan Safari belum menyediakan fitur ini, jadi tombolnya disembunyikan di sana dan Anda bisa mengambil warna dari gambar yang dibuka. Di HP, pakai screenshot: ambil screenshot, lalu tempel atau pilih di sini.

Foto vs grafis rata

Foto mengandung noise dan gradasi, jadi piksel yang bersebelahan bisa sedikit berbeda. Untuk warna yang mewakili sebuah foto, palet sering lebih baik daripada satu piksel karena merata-ratakan piksel yang mirip. Untuk logo dan grafis rata, satu klik sudah persis.

Profil warna dan layar

Kode berasal dari data gambar sebagaimana dibuka oleh browser. Gambar dengan gamut sangat lebar bisa tampak sedikit berbeda di layar yang berbeda, tapi kode itulah yang Anda butuhkan untuk mereproduksi warna di web dan aplikasi desain.

Gambar terkompres

JPEG yang terkompres berat menimbulkan artefak kotak-kotak di sekitar tepi. Ambil dari tengah area yang rata, atau pakai versi gambar berkualitas lebih tinggi jika ada.

Gambar Anda tetap di memori browser; tidak ada yang diunggah, dicatat, atau disimpan. File JPG, PNG, WebP, GIF, dan BMP didukung, dan area transparan diabaikan saat menyusun palet.

Alat ini gratis dan tanpa batas, tanpa watermark, dan tidak memakai kredit EnhancerPro. Jika ingin mengubah palet pilihan jadi logo atau ikon, pembuat favicon dan alat ubah gambar ke SVG kami adalah langkah berikutnya yang pas.

Memakai warna di CSS

Tempel kode HEX langsung ke properti warna, atau salin palet sebagai variabel CSS dan panggil dengan var(--color-1). Nilai HSL memudahkan membuat varian lebih terang dengan menaikkan persentase lightness.

Mulai dari satu warna kuat

Sebagian besar skema yang bagus dimulai dari satu warna utama, sering diambil dari logo atau foto utama. Ambil di sini, lalu tentukan warna netral terang dan gelap untuk latar dan teks. HSL memudahkannya: pertahankan hue dan saturasi, lalu naikkan lightness untuk warna latar atau turunkan untuk aksen yang pekat.

Warna pendukung dari palet

Palet hasil ekstraksi biasanya berisi satu atau dua warna mencolok dan beberapa warna kalem. Warna kalem cocok untuk latar, garis tepi, dan tombol sekunder, sedangkan warna mencolok cocok untuk ajakan bertindak dan sorotan. Karena berasal dari gambar yang sama, warna-warna itu cenderung serasi dengan sendirinya.

Cek kontras

Teks harus terbaca oleh semua orang. Teks gelap di atas warna terang, atau teks putih di atas warna pekat, biasanya berhasil. Cek kombinasi penting dengan pemeriksa kontras sebelum publikasi, terutama untuk tombol dan teks kecil. Warna yang tampak tegas di foto bisa terlalu terang untuk teks di halaman putih.

Simpan catatannya

Simpan kode akhirnya di style guide atau sebagai variabel CSS. Menyalin palet sebagai CSS custom properties memberi titik awal siap pakai yang bisa diganti namanya, misalnya primary, accent, dan surface, agar setiap halaman situs memakai warna yang persis sama.

Warna untuk cetak

Warna layar memakai RGB, sedangkan printer memakai tinta CMYK. Kode di sini sempurna untuk layar; untuk bahan cetak, minta percetakan mengonversinya atau mencocokkan dengan contoh warna cetak, karena sebagian warna layar yang cerah tidak bisa dicetak persis.

Berbagi warna dengan tim

Desainer, developer, dan klien sering menyebut warna dengan cara berbeda: kode hex di file desain, nilai RGB di slide presentasi, nilai HSL di stylesheet. Menyalin ketiganya dari pilihan yang sama mencegah selisih kecil yang muncul saat nilai dikonversi manual. Tempel kodenya di catatan proyek bersama gambar sumbernya, agar siapa pun bisa melihat asal setiap warna dan mengambilnya lagi nanti jika palet perlu disesuaikan.

Palet musiman dan suasana

Foto adalah sumber suasana yang hebat. Sawah menguning memberi warna kuning dan hijau hangat, pemandangan pantai memberi warna pasir dan toska, dan kota di malam hari memberi biru pekat dengan aksen neon. Coba ambil palet dari beberapa gambar yang cocok dengan nuansa yang Anda inginkan, lalu simpan warna yang muncul berulang kali. Kumpulan warna yang berulang itu biasanya menjadi skema yang kuat dan padu.