JavaScript Pengacak Warna

Tabel Konten
  1. Kode Heksa Warna Acak 
  2. Deret Warna Terdaftar 
  • Pembaharuan 
    1. Penggunaan 
  • Kode Heksa Warna Acak 

    "#"+((1<<24)*Math.random()|0).toString(16);

    Deret Warna Terdaftar 

    Mendapatkan warna secara acak berdasarkan barisan warna yang sudah terdaftar:

    // Deret warna
    var colors = ["#345", "#292222", "#990000", "black", "#ffa500", "#fff3db"];
    // Mengambil warna secara acak dari array `colors`
    // dan memasukkan hasilnya ke dalam variabel `a`
    var a = colors[Math.floor(Math.random()*colors.length)];

    Pembaharuan 

    Yang ini sedikit panjang, tapi hasilnya lebih stabil dibandingkan dengan yang pertama, serta bisa menghasilkan urutan warna yang lebih indah. Dalam beberapa kesempatan, Saya melihat kode pengacak warna yang pertama menghasilkan warna yang tidak valid (pengacak warna hanya menggenerasikan lima digit kode saja, bukannya enam digit seperti yang seharusnya):

    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split(''),
            color = '#';
        for (var i = 0; i < 6; ++i) {
            color += letters[Math.round(Math.random() * 15)];
        }
        return color;
    }

    Penggunaan 

    document.body.style.backgroundColor = getRandomColor();

    Referensi: SO - Random Color Generator in JavaScript

    18 Komentar

    • Beben Koben

      iki opo toh :p*

    • Unknown

      apakah ini akan bisa membuat warna background berubah2 secara acak, saat menampilkan sebuah halaman ? :p*

      • Taufik Nurrohman

        Bisa. Coba saja taruh kode ini di atas tag </body> lalu simpan:

        <script type='text/javascript'>
        //<![CDATA[
        document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
        //]]>
        </script>
        • Unknown

          wohohoho,, keren nih..

        • Yusril Ibnu Maulana

          Wow keren, kalau yg itu kan untuk tag <body> kalau ingin tag <div id> (minsalnya footer) bagaimana agar backgrounnya berubah ubah ?

          • Taufik Nurrohman

            <div id="footer"> ... </div>
            document.getElementById('footer').style.background = "#"+((1<<24)*Math.random()|0).toString(16);
            • Yusril Ibnu Maulana

              \o/ \o/ \o/

            • budkalon

              Hoh, :D Ternyata memang bisa! :D

            • Unknown

              Kang bisa ngak warna tertentu tidak boleh ada dalam background ini karena misal ini kita gunakan pada header takutnya sama dengan warna color pada title

              • Taufik Nurrohman

                Masukkan ke dalam kondisional:

                var randomColor = "#"+((1<<24)*Math.random()|0).toString(16);
                // Buat pengecualian untuk warna hitam
                if (randomColor != "#000000") {
                document.getElementById('site-header').style.background = randomColor;
                } else {
                document.getElementById('site-header').style.background = "#ffffff";
                }
                • Unknown

                  terima kasih mas sudah berhasil....oh ya mas kode kode di atas kan dalam bentuk id (#)bagaimana kalau dalam bentuk class(.) mas misal kita akan merubah tampilan judul sidebar kan biasanya bentuk kode nya kaya gini .sidebar h2{....

    • Unknown

      Kalo ingin mengubah warna background berdasarkan deretan warna terdaftar gimana ya mas?

      • Taufik Nurrohman

        <script>
        var colors = ["#345", "#292222", "#990000", "black", "#ffa500", "#fff3db"];
        document.body.style.background = colors[Math.floor(Math.random()*colors.length)];
        </script>

        Bisa juga untuk latar gambar acak. Tinggal ubah deret-deret warna menjadi URL gambar:

        <script>
        var bg = [
        "#fff url('gambar-1.jpg') repeat",
        "#000 url('gambar-2.jpg') repeat",
        "#39f url('gambar-3.jpg') repeat"
        ];
        document.body.style.background = bg[Math.floor(Math.random()*bg.length)];
        </script>
        • Unknown

          mas ini kan warnanya berubah, tapi teksturnya background yang ada jadi tertutup warna, bisa ga kalo mengubah warna tanpa menghilangkan/ menutup tekstur background yang telah ada?

          • Taufik Nurrohman

            Jangan memakai properti background, cukup properti backgroundColor saja:

            var colors = ["#345", "#292222", "#990000", "black", "#ffa500", "#fff3db"];
            document.body.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
    • Unknown

      Mas, kalau warna acak untuk text di kotak blockquote, gimana ?

    Komentar telah ditutup.