Trik Mendapatkan Kode Warna HTML dan CSS dengan tepat

Bahasa pemrograman yang paling berperan sekali dalam mendesain serta mengatur tata letak  halaman website, blog atau situs ialah CSS (Cascade style sheet) yang dikolaborasikan dengan HTML, Kode HTML berfungsi sebagai cover yang membentuk krangka halaman situs, sedangkan aba-aba CSS berfungsi untuk mengatur tata letak dan mendesain halaman situs, dengan cara memanipulasi tag-tag HTML yang digunakan sehingga sesuai dengan tata letak dan desain yang diinginkan baik itu warna maupun desain bentuknya.
Ketika berinteraksi dengan kode CSS dan HTML mau tidak mau kita akan sering sekali berinteraksi dengan warna, untuk menunjukkan pewarnaan  di dalam aba-aba CSS maupun HTML mampu menggunakan nama dalam bahasa inggris (seperti: red, green, blue, ciyan dll), atau mampu juga menggunakan 3 atau 6 digit hexa decimal yang didahului uleh tanda # (seperti: #fff, #bebebe, dll), kalau menggunakan bahasa inggris maka warna yang didapat hanya warna-warna dasar, sedangkan kalau menggunakan aba-aba hexadecimal maka warna apapun mampu kita peroleh.
Sepertinya untuk menggunakan warna dasar sangat mudah sekali tinggal menentukan warna dasar yang ingin kita gunakan namun dalam bahasa inggris, namun untuk warna-warna tertentu yang tercipta dari kombinasi beberapa warna harus menggunakan aba-aba hexadecimal supaya warna yang didapat ialah warna yang tepat sesuai dengan yang diinginkan.

Trik Mendapatkan Kode Warna HTML dan CSS dengan tepat

Warna-warna yang tersedia pada teknologi komputer dikala ini memang sangat berbagai dan tidak mampu kita hapal satu persatu, semakin canggih grafik komputer maka kombinasi warna pun akan semakin beragam bahkan mampu berjumlah ratusan juta warna yang tidak mungkin mampu dihapal, ketika mendesain halaman situs, kadang kita memerlukan beberapa pewarnaan yang harus sesuai dengan warna yang diinginkan, ada banyak cara untuk menerima warna yang sesuai dengan keinginan, diantaranya ialah sebagai berikut:

1. Menggunakan Tool Inspeksi Elemen Browser Mozila Firefox

Browser mozila dari tahun ke tahun memang dibuat semakin canggih apalagi dikala ini sudah dilengkapi dengan tool untuk menerima warna yang diinginkan dari sebuah halaman situs tertentu, tujuannya tentu saja untuk mempermudah developer web supaya lebih mudah melaksanakan tes dan ujicoba warna untuk halaman web yang sedang dibuatnya, tool tersebut mampu kita gunakan untuk menentukan juga untuk menerima warna yang diinginkan, namun untuk menggunaan tool ini anda harus memiliki sample tampilan halaman situs yang ingin anda dapatkan aba-aba pewarnaan dari halaman situs tersebut, langkah-langkahnya ialah sebagai berikut:

 a. Silahkan buka halaman situs yang menurut anda desain warnanya cantik dan ingin anda contoh, misal saya akan menerima aba-aba warna yang saya gunakan di situs . maka pertama saya akan buka situs tersebut

b. Jika halaman situs sudah terbuka dengan sempurna, klik kanan pada halaman situs tersebut, kemudian pilih menu "Inspek Elemen", Anda akan melihat tampilan browser ibarat gambar dibawah ini:

Inspect elemen untuk menerima aba-aba warna html css


c. Cara Menggunakannya, silahkan anda klik pada tombol yang saya sudah tandai dengan no 1, ibarat gambar diatas.

d. Kemudian klik pada elemen halaman situs yang ingin anda dapatkan aba-aba warnanya, lihat gambar yang ditandai dengan no 2 diatas, saya ingin menerima warna pada goresan pena "Seting dasar Blogspot yang wajib anda lakukan" maka akan saya sorot goresan pena tersebut. aba-aba perintah CSS dari elemen yang dipilih akan ditampilkan di sudut kanan bawah yang saya tandai dengan no 3, lihat gambar diatas.

d. Pada kotak kanan bawah, yang menampilkan aba-aba css dari elemen yang dipilih, anda cari dan scroll ke bawah, untuk menemukan tanda lingkaran warna ibarat pada gambar diatas yang ditandai dengan no 3.

e. Jika warna yang anda inginkan persis ibarat itu anda tinggal kopi paste aba-aba warna tersebut dan anda gunakan di template blog anda, namun kalau anda menginginkan warna kobinasinya atau warna yang lain, silahkan anda klik pada gambar bundar warna tersebut, ibarat no 3 gambar diatas, silahkan anda klik pada lingkaran warna tersebut, maka akan ditampilkan panel pilihan warna ibarat gambar berikut:

Cara menerima aba-aba warna hexadecimal css dan html

f.untuk menerima warna yang diinginkan anda tinggal klik pada panel warna yang tersedia, aba-aba warna akan ditampilkan di samping lingkaran warna yang siap anda kopi paste, namun kalau anda menginginkan warna lainnya yang tersedia dihalaman situs yang ingin anda tumpuan tersebut, silahkan anda gunakan pipet warna, klik pada tombol pipet ibarat terlihat pada gambar diatas yang ditunjukan oleh arah panah merah, kalau berhasil maka akan ditampilkan tool ibarat beling pembesar untuk memilih warna, silahkan anda sorot elemen di halaman situs yang bersangkutan yang ingin anda peroleh aba-aba warnanya.

2. Menggunakan Tool Software Photoshop

Alternatif kedua untuk menerima aba-aba warna css dan html yaitu dengan menggunakan tool yang terdapat didalam software photoshop, cara ini menurut saya ialah cara yang paling efektif untuk menerima aba-aba warna hexadecimal html dan css dengan tepat, namun tentu saja software photosp harus sudah terinstal di komputer anda, kalau anda sudah menginstal photoshop dikomputer anda, langkah-langkah menerima aba-aba warna hexadecimal di photoshop ialah sebagai berikut:

a. Buka jadwal photoshop anda

b. Pada tool disebelah kiri, Klik tombol "set foreground color", maka akan ditampilkan panel warna ibarat terlihat pada gambar dibawah ini:

Cara menerima aba-aba warna css dan html menggunakan photoshop

c. Untuk menerima warna anda tingga klik pada panel warna yang tersedia, aba-aba warna dari warna yang anda pilih akan ditampilkan dan mampu anda kopi, jangan lupa awali aba-aba tersebut dengan tanda # ketika hendak digunakan.

Demikian artikel sederhana ihwal Trik Mendapatkan Kode Warna HTML dan CSS dengan tepat, semoga bermanfaat.


Komentar

Postingan populer dari blog ini

Cara Mudah Mengetahui Jumlah Pageview Blog

Ini Cara Membuat Teks Pesan Whatsapp Tebal, Miring dan coret!

Ingin Membuat Website Sendiri, Ini Script yang harus anda pelajari!