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 yaitu CSS (Cascade style sheet) yang dikolaborasikan dengan HTML, Kode HTML berfungsi sebagai cover yang membentuk krangka halaman situs, sedangkan arahan 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 arahan 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), bila menggunakan bahasa inggris maka warna yang didapat hanya warna-warna dasar, sedangkan bila menggunakan arahan 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 arahan hexadecimal supaya warna yang didapat yaitu warna yang tepat sesuai dengan yang diinginkan.

Trik Mendapatkan Kode Warna HTML dan CSS dengan tepat

Warna-warna yang tersedia pada teknologi komputer ketika 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 yaitu sebagai berikut:

1. Menggunakan Tool Inspeksi Elemen Browser Mozila Firefox

Browser mozila dari tahun ke tahun memang dibuat semakin canggih apalagi ketika 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 arahan pewarnaan dari halaman situs tersebut, langkah-langkahnya yaitu sebagai berikut:

 a. Silahkan buka halaman situs yang menurut anda desain warnanya cantik dan ingin anda contoh, misal saya akan menerima arahan 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:

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 arahan 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. arahan 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 arahan 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 arahan warna tersebut dan anda gunakan di template blog anda, namun bila 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:

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

2. Menggunakan Tool Software Photoshop

Alternatif kedua untuk menerima arahan warna css dan html yaitu dengan menggunakan tool yang terdapat didalam software photoshop, cara ini menurut saya yaitu cara yang paling efektif untuk menerima arahan warna hexadecimal html dan css dengan tepat, namun tentu saja software photosp harus sudah terinstal di komputer anda, bila anda sudah menginstal photoshop dikomputer anda, langkah-langkah menerima arahan warna hexadecimal di photoshop yaitu 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:

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

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

Tweet