Kode Warna HTML | Color Picker

Untuk Anda yang sedang membutuhkan dan sedang mencari kode warna hex untuk keperluan blog, Photoshop, atau keperluan yang lainnya, silahkan Anda dapat menggunakan tool kode warna hex di bawah ini.

Cukup tempatkan pointer dari mouse komputer atau laptop Anda pada warna yang Anda inginkan, lalu cukup salin kode yang didapatkan pada bidang kode.

Untuk Anda yang juga ingin membuat tool kode warna pada website atau blog Anda seperti kode warna yang terlihat pada halaman ini, silahkan Anda salin kode di bawah Tool Kode Warna ini pada halaman atau posting HTML Mode blog Anda. Untuk Judul Posting sesuai keinginan Anda terserah, contoh: Tool Kode Warna, atau Kode Warna Hex. Untuk Anda ketahui bahwa tool kode warna ini sudah valid dengan HTML5.

.color-code{text-align: center;margin:20px auto;width:60%;}
.color-responsive {position: relative;padding-bottom: 100%;height: 0;overflow: hidden}
.color-responsive object {position: absolute;top: 0;left: 0;width:100%;height:100%;border:0}

Cara Membuat

Buat postingan seperti biasanya, atau Anda dapat membuat pada halaman statis terserah Anda.
Kemudian dalam mode HTML, silahkan gunakan kode dibawah ini untuk membuat kode warna yang valid HTML5:

<object style="height:420px;width:420px" data="http://www.2createawebsite.com/build/color.swf"></object>
<object style="height:420px;width:420px" data="http://www.2createawebsite.com/build/col.swf"></object>

Setelah itu silahkan Anda publikasikan dan lihat hasilnya.
Dan untuk Anda yang ingin membuat postingan kode warna ini responsive alias dapat di tampilkan pada ukuran layar apapun, silahkan Anda gunakan kode dibawah ini:

<div style="text-align: center;">
<div class="color-code">
<div class="color-responsive">
<object height="420" width="420" data="https://googledrive.com/host/0Bz4YdwRI3rnCc01fUWNaNGNHbjQ/"></object> </div>
</div>
<div class="color-code">
<div class="color-responsive">
<object height="420" width="420" data="https://googledrive.com/host/0Bz4YdwRI3rnCNDVYN2tlcFF1b3c/"></object> </div>
</div>
</div>

Dan tambahkan CSS berikut ini:

.color-code{text-align: center;margin:20px auto;width:60%;}
.color-responsive {position: relative;padding-bottom: 100%;height: 0;overflow: hidden}
.color-responsive object {position: absolute;top: 0;left: 0;width:100%;height:100%;border:0}

Dan hasilnya kurang lebih menjadi seperi ini:

<object style="height:420px;width:420px" data="http://www.2createawebsite.com/build/color.swf"></object>
<object style="height:420px;width:420px" data="http://www.2createawebsite.com/build/col.swf"></object>
<style type="text/css">
.color-code{text-align: center;margin:20px auto;width:60%;}
.color-responsive {position: relative;padding-bottom: 100%;height: 0;overflow: hidden}
.color-responsive object {position: absolute;top: 0;left: 0;width:100%;height:100%;border:0}
</style>

Selamat mencoba!

Pencarian Masuk:

  • cara menggunakan whatsapp sniffer
  • file manager android terbaik

Leave a Reply

0 Shares
+1
Share
Tweet
Pin
Stumble