Bagaimana Cara Menggunakan Pemilih Warna Google Chrome?


Google Chrome hadir dengan Chrome DevTools, yang merupakan kumpulan alat pengembang web. Di antara semua alat yang dapat diakses, pemilih warna yang tersedia di Chrome sangat berguna.

Tapi, bagaimana cara mengaksesnya? Bagaimana kamu menggunakannya? Apa saja fitur yang ditawarkan bersama dengan alat tersebut?

Pada artikel ini, kita akan menjelajahi alat ini dan fitur-fiturnya.

Bagaimana Cara Meluncurkan Pemilih Warna Chrome?

Anda dapat mengakses alat chrome pemilih warna menggunakan pintasan keyboard atau GUI (Graphical User Interface).

tekan Ctrl + Shift + I saat menggunakan keyboard untuk mendapatkan DevTools dan kemudian menuju ke pemilih warna. Jika Anda menggunakan mac, Anda perlu menekan, Perintah + Opsi + I.

Menggunakan mouse, Anda perlu melakukan klik kanan dan kemudian klik “Memeriksa” untuk menavigasi melalui DevTools.

chrome devtools

Anda juga dapat menyetel Chrome DevTools agar terbuka otomatis dengan setiap tab baru. Jadi, Anda dapat dengan cepat mengakses pemilih warna untuk setiap tab di browser Anda.

Untuk mencapai itu, Anda perlu meluncurkan instance baru Chrome menggunakan baris perintah sambil meneruskan tanda berikut:

--auto-open-devtools-for-tabs

Beginilah tampilannya saat meluncurkan chrome dengan DevTools yang terbuka otomatis melalui terminal di Linux:

google-chrome-stable --auto-open-devtools-for-tabs

Cara Menggunakan Warna Pemilih di Chrome?

Setelah Anda meluncurkan DevTools, Anda harus menavigasi jalan Anda untuk mengakses alat yang diperlukan untuk mengidentifikasi warna pada halaman web atau desain yang ingin Anda kerjakan.

Secara default, Anda seharusnya dapat melihat “Gaya” aktif di bagian bawah DevTools, seperti yang ditunjukkan pada tangkapan layar.

gaya devtools

Jika Anda memiliki sesuatu yang lain yang dipilih, pastikan untuk mengklik “Gaya” untuk mengakses kode CSS halaman web.

Di sini, Anda perlu menggulir ke bawah melalui kode CSS yang tersedia dan mencari kotak warna berlabel latar belakang atau warna di bawah bagian tubuh. Ini adalah pemilih warna yang Anda cari.

Cukup klik pada kotak warna; itu akan memberi Anda lebih banyak opsi, seperti yang ditunjukkan pada tangkapan layar di bawah.

pemilih warna

Itu dia! Voila, Anda memiliki pemilih warna di browser yang siap membantu Anda.

Di sini, Anda harus menemukan kode hex atau nilai RGB dari warna dan mendapatkan kemampuan untuk memilih elemen CSS lain untuk menjelajahi dan memeriksa desain di halaman web.

Fitur di Color Picker di Chrome

Pemilih warna bawaan Chrome memberi Anda berbagai informasi selain kode hex untuk mengidentifikasi warna.

Inilah yang dapat Anda harapkan darinya. Beberapa fitur utama meliputi:

Palet warna: Alih-alih bersepeda melalui banyak corak warna, Anda mendapatkan beberapa palet warna yang telah ditentukan sebelumnya untuk menerapkan beberapa pilihan dengan cepat.

palet warna pemilih warna

Format warna: Anda mendapatkan kemampuan untuk beralih dari kode hex ke nilai RGBA dan nilai warna HSLA juga.

format warna

Penitis mata: Saat Anda mengakses pemilih warna, Anda dapat menelusuri halaman web dan memilih elemen apa saja untuk mendapatkan kode hex warna tersebut. Anda dapat mengklik sakelar pemilih warna untuk mengaktifkan/menonaktifkannya.

pemilih warna penetes mata

Anda mendapatkan lebih banyak opsi untuk mengubah warna dan mendapatkan warna yang akurat sesuai pilihan Anda. Di sini mereka:

  • Menyalin ke clipboard: Anda dapat menyalin kode warna yang diidentifikasi dengan cepat ke clipboard Anda.
  • Gradien warna: Anda dapat mengubah bayangan warna dan menelusuri kemungkinan kombinasi warna yang Anda sukai.
  • Kontrol opasitas: Anda dapat mengatur tingkat transparansi agar terlihat solid atau minimal.
  • Pemilih warna latar belakang: Untuk memilih warna latar belakang yang sesuai untuk kontras yang sempurna.
  • rasio kontras: Menyesuaikan kontras atau mengoreksinya agar teks/elemen terlihat.

Catatan: Alat pemilih warna tidak terbatas pada Google Chrome tetapi dapat digunakan pada browser web berbasis Chrome seperti Brave.

Bagaimana Cara Menggunakan Pemilih Warna Chrome dengan Google Slide?

Anda dapat menavigasi untuk mengakses alat pemilih warna jika Anda melakukan klik kanan pada bagian header halaman web Google Slides. Meskipun Google Slides tidak menawarkan alat pemilih warna bawaan, ini sudah cukup.

pemilih warna slide google

Jika Anda tidak nyaman menggunakan DevTools dengan Google Slides, Anda juga dapat mencoba beberapa ekstensi chrome untuk pekerjaan itu.

Ekstensi Chrome sebagai Alternatif untuk Color Picker

Meskipun ekstensi dapat berguna, perlu dicatat bahwa ekstensi tidak diperbarui atau dipelihara secara aktif. Mengingat mereka memerlukan akses ke data browser Anda, Anda harus berhati-hati saat memasang ekstensi apa pun, bahkan yang direkomendasikan di sini.

Namun, ada dua ekstensi populer yang mungkin menarik untuk Anda coba:

#1. ColorZilla

ekstensi colorzilla

Ekstensi ColorZilla menawarkan semua fungsi penting yang Anda dapatkan dengan pemilih warna bawaan chrome. Sebagai bonus, Anda juga mendapatkan kemampuan untuk memeriksa riwayat warna terakhir yang dipilih.

Jadi, ini akan berguna untuk setiap kasus penggunaan, tidak hanya dengan Google Slide.

#2. ColorPick Eyedropper

pipet pemilih warna

Jika Anda menghadapi masalah dengan alat pipet menggunakan DevTools, Anda dapat mencoba ColorPick Eyedropper untuk mendapatkan pipet tanpa mengakses alat web.

Saat Anda memilih warna, itu akan menampilkan nilai RGB dan opsi untuk menghasilkan palet warna. Mirip dengan ekstensi di atas, Anda juga dapat memeriksa riwayat warna yang Anda pilih.

Kata-kata Akhir

Pemilih Warna Chrome DevTools adalah alat yang berguna. Anda tidak memerlukan alat profesional untuk membantu Anda mengidentifikasi warna dan kode atau nilai terkait. Alat bawaan Chrome membuatnya mudah tanpa memerlukan ekstensi pihak ketiga.

Mulai dari desainer grafis hingga pengembang web yang membuat templat situs web, semua orang akan merasa terbantu.

Tentu saja, Anda dapat memilih untuk menggunakan ekstensi pihak ketiga yang tersedia juga. Namun, kecuali Anda membutuhkannya, kami sarankan Anda menjelajahi semua fitur dengan DevTools.



Source link

domainpbn
Design

Leave a Comment

Your email address will not be published. Required fields are marked *