Panduan Membuat Color Picxel

Desain Grafis dan Percetakan
Color picker interaktif dilihat dari bentuk dan fungsinya memang sangat berbeda dengan tabel kode warna yang saya bahas pada waktu yang lalu dalam artikel cara buat tabel kode warna, bila belum baca anda bisa lihat DISINI.
Tabel kode warna yang ini lebih interaktif dan lebih banyak fungsinya, diantaranya adalah kita dapat menyesuaikan warna dengan menyeret panah keatas dan kebawah pada bar warna sebelah kanan, dan dapat menyesuaikan saturation dengan menarik lingkaran kecil disekitar area gradasi. Dan pada kotak output disebelah bawah selain muncul kode color Hex, juga kode color RGB, dan nilai-nilai HSV, serta dilengkapi sebuah kotak warna yang muncul sesuai dengan warna yang ada pada area gradasi ketika lingkaran kecil ditempatkan pada posisi tertentu.

Anda bisa lihat gambar Color picker interaktif dibawah ini :

2. Klik Rancangan dan pilih Elemen Laman

3. Tambah Gadget
4. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

5. Copy dan paste kode dibawah ini pada gadget tersebut :
<script type="text/javascript" src="http://www.switchonthecode.com/sites/default/files/64/source/javascript.js"></script>
<div style="position: relative; height: 430px; width: 295px; border: 2px solid rgb(171, 172, 172); background-color: rgb(232, 231, 234);">
      <div id="gradientBox" style="cursor: crosshair; top: 5px; position: absolute; left: 5px; width: 240px; height: 256px; border: 2px solid rgb(255, 255, 255); background-color: rgb(0, 255, 255);">
        <img id="gradientImg" style="display: block; width: 240px; height: 256px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_gradient.png">
        <img id="circle" style="position: absolute; height: 11px; width: 11px; left: 123px; top: 122.5px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_circle.gif">
      </div>

      <div id="hueBarDiv" style="position: absolute; left: 255px; width: 30px; border: 2px solid rgb(255, 255, 255); background-color: rgb(217, 216, 219); height: 255px; top: 5px;">
        <img style="position: absolute; height: 251px; width: 19px; left: 6px; top: 2px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_bar.png">
        <img id="arrows" style="position: absolute; height: 9px; width: 30px; left: 0px; top: 124.496px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_arrows.gif">
      </div>

      <div style="position: absolute; left: 5px; width: 145px; height: 50px; top: 280px;">
      <div style="position: absolute; border: 2px solid rgb(255, 255, 255); height: 50px; width: 150px; top: 0px; left: 0px;">
        <div id="quickColor" style="position: absolute; height: 50px; width: 140px; top: 0px; left: 0px; background-color: rgb(64, 128, 128);">

        </div>
        <div id="staticColor" style="position: absolute; height: 50px; width: 100px; top: 0px; left: 50px; background-color: rgb(64, 128, 128);">
        </div>
</div>
      </div>

<table style="position: absolute; left: 170px; top: 275px; height: 30px;" width="150px">
<tbody><tr>
<td><b>Hex: </b></td>
<td>
            <input size="8" id="hexBox" onchange="hexBoxChanged();" type="text">

</td>
</tr>
</tbody></table>

        <a href="http://www.carabuatwebgratis.com/" target="_blank"><img style="display: block; width: 25px; height: 25px; position: absolute; left: 265px; top: 307px;" src="https://lh5.googleusercontent.com/-11ZXOu0vmJ4/Tamx8COnUYI/AAAAAAAAAl4/kijyxzscHEY/s75/Logo%0A%0A%2Bcara%2Bbuat%2Bweb%2Bgratis.jpg"></a>

<table style="position: absolute; left: 5px; top: 340px; border: 2px solid rgb(255, 255, 255);" width="285px">
<tbody><tr>
 <td>Hue:</td>
  <td>
            <input size="8" id="hueBox" onchange="hueBoxChanged();" type="text">

</td>
  <td bgcolor="red"><span style="color: rgb(255, 255, 255);"> Red: </span></td>

  <td>
            <input size="8" id="redBox" onchange="redBoxChanged();" type="text">
</td>
</tr>
<tr>
<td>Saturation:</td>
  <td>

            <input size="8" id="saturationBox" onchange="saturationBoxChanged();" type="text">
</td>
 <td bgcolor="green"><span style="color: rgb(255, 255, 255);">Green:</span></td>

  <td>
            <input size="8" id="greenBox" onchange="greenBoxChanged();" type="text">
</td>
</tr>
<tr>
  <td>Value: </td>

  <td>
            <input size="8" id="valueBox" onchange="valueBoxChanged();" type="text">
</td>
<td bgcolor="blue"><span style="color: rgb(255, 255, 255);"> Blue:</span></td>

  <td>
            <input size="8" id="blueBox" onchange="blueBoxChanged();" type="text">
</td>
</tr>
</tbody></table>

    </div>
    <script type="text/javascript">
      fixGradientImg();
      var currentColor = Colors.ColorFromRGB(64,128,128);
      new dragObject("arrows", "hueBarDiv",
          arrowsLowBounds, arrowsUpBounds,
          arrowsDown, arrowsMoved, endMovement);
      new dragObject("circle", "gradientBox",
          circleLowBounds, circleUpBounds,
          circleDown, circleMoved, endMovement);
      colorChanged('box');
    </script>
</div>
Catatan :
Lebar tabel Color picker interaktif ini adalah 300px, jadi area gadget yang dibutuhkan tidak kurang dari 300px.

6. Simpan.
Selamat mencoba ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.
TotalPing | Google Ping | Ping Blog Search | Add Url | Google Master | Bing Master | Site Value | Seo Jerman | TotalPing