Daftar Kode Warna CSS dan HTML Lengkap Full Color

Mau tahu cara mengubah skema warna website kamu sendiri? Daftar kode warna CSS dan HTML lengkap full color ini bisa jadi referensi kamu.

Tampilan visual adalah salah satu elemen yang membuat pengunjung tertarik dan betah berlama-laman di website kita. Dan warna adalah salah satu faktor yang penting dalam membuat tampilan visual website yang baik.

Seberapa penting skema warna pada sebuah website? Cek saja dua contoh berikut ini. Kira-kira mana skema warna yang lebih baik?

Dibandingkan gambar pertama, gambar kedua menggunakan dua warna yang jauh lebih menarik. Dengan kontras yang tidak terlalu tinggi, teks akan lebih mudah dibaca dan nyaman saat dilihat lebih lama. Jadi jika kamu ingin memberi user experience yang baik, pilihlah skema warna yang baik pula.

Untungnya mengubah warna pada website dapat dilakukan dengan mudah.

Pada tema/template gratis opsinya mungkin akan sedikit terbatas dibanding versi premium. Namun hal ini bukanlah masalah besar jika kita bisa sedikit HTML dan CSS.

Dan jika kamu butuh inspirasi, daftar kode warna CSS dan HTML lengkap full color ini bisa kamu contek!

Daftar Kode Warna HTML Lengkap

Untuk membuat daftar kode warna CSS dan HTML lengkap mungkin tidak akan bisa dilakukan di sini karena kombinasi warna RGB bisa mencapai 16 juta warna.

Namun berdasarakan situs W3School, ada 140 nama warna yang disupport oleh hampir semua browser.

(Perhatikan, yang saya maksud NAMA WARNA yah! Jadi semua warna tetap bisa ditampilkan di browser apapun, namun jika kita ingin menggunakan warna pada CSS dengan memakai nama warna tersebut, hanya 140 warna ini saja yang bisa digunakan. Agar lebih jelas, kamu bisa melihat cara menggunakan kode warna HTML di bawah tabel ini!)

Sebagai informasi, kode HEX dengan deretan angka/huruf yang sama bisa ditulis sebagian saja. Sebagai contoh, kode warna #FFF sama dengan #FFFFFF yang digunakan untuk warna putih.

Alternatif Daftar Kode Warna CSS Lengkap

Jika warna di atas masih kurang lengkap (dan kayaknya iya), ada beberapa situs di mana kamu bisa melihat lebih banyak daftar kode warna CSS. Beberapa di antaranya adalah:

• W3School HTML Color Picker – Situs online ini dapat digunakan untuk memilih warna berdasarkan warna-warna dasar pada tabel di atas. Jika kita memilih salah satu warna tersebut, akan ada opsi warna lain yang lebih banyak berdasarkan tingkat saturasi warna yang dipilih. Setiap warna yang terpilih akan ditampilkan lengkap dengan kode warna RGB, HEX, dan HSL.
• Material Color – Situs ini menyediakan beragam tools untuk kamu yang ingin memiliki tampilan berdasarkan material design yang banyak digunakan pada beragam desain produk Google atau aplikasi Android. Di sini kamu bisa memilih warna-warna pilihan pada material palette yang disediakan. Untuk setiap warna yang dipilih, kamu juga akan mendapat dua rekomendasi warna lainnya yang saling melengkapi.
• HTML Color Code – Pada situs ini terdapat dua cara untuk memilih warna. pertama kita bisa cek kode warna populer dari HTML Color Chart. Kedua, kita bisa memilih warna secara random menggunakan HTML Color picker. Nantinya kita bisa melihat kode HEX warna yang kita pilih.

Cara Menggunakan Kode Warna HTML & CSS

Sebagai informasi pembuka, warna-warna di atas tidak hanya bisa digunakan pada teks saja tetapi juga bisa dipakai untuk mengubah warna background hingga border juga.

Jika kamu perhatikan, ada tiga kolom penting berisi kode yang bisa dipakai untuk menampilkan sebuah warna pada elemen website. Dengan tabel kode warna CSS di atas, kamu bisa menampilkan warna memakai nama warna, kode HEX, atau kode RGB.

Meski begitu, praktik yang umum digunakan adalah dengan menggunakan kode HEX yang terdiri dari kombinasi angka dan huruf.

1. Cara Menggunakan Kode Warna HTML pada Teks

Untuk menggunakan kode warna HTML pada setiap paragraf di sebuah website, kita bisa menambahkan kode berikut ini pada file CSS,

/* Menggunakan Kode Warna dengan Nama Warna */
p {color: MediumVioletRed;}
​
/* Menggunakan Kode Warna dengan kode HEX */
p {color: #C71585}
​
/* Menggunakan Kode Warna dengan kode RGB */
p {color: rgb(199, 21, 133)}

Jika kita hanya ingin menampilkan warna pada satu kata saja, kita bisa mengunakan inline CSS seperti contoh berikut.

<p>Perhatikan, hanya <span style="color:#C71585">teks</span> ini saja yang warnanya berbeda!</p>
​
/* Alternatif kode (hanya pada browser yang support HTML5 */
<p>Perhatikan, hanya <font color="#C71585">teks</font> ini saja yang warnanya berbeda!</p>

Jika berhasil, maka kamu bisa melihat contoh seperti ini,

Perhatikan, hanya teks ini saja yang warnanya berbeda!

2. Cara Menggunakan Kode Warna HTML pada Background

Untuk menggunakan kode warna HTML pada backgrond, kita bisa menggunakan background-color seperti pada contoh berikut ini

// Mengganti warna background dengan CSS //
.kotak {background-color: #F0F8FF}
​
// Mengganti warna background dengan inline CSS //
<p style="background-color:#F0F8FF">Teks dalam paragraf ini akan memiliki warna background yang berbeda.</p>

Jika berhasil, kamu akan melihat contoh sebagai berikut,

Teks dalam paragraf ini akan memiliki warna background yang berbeda.

3. Cara Menggunakan Kode Warna HTML pada Border

Untuk mengganti warna border, kita bisa menggunakan kode CSS seperti pada contoh berikut ini,

// Mengganti warna background dengan CSS //
.kotak {border:2px solid #FF6347}
​
// Mengganti warna background dengan inline CSS //
<p style="border:2px solid #FF6347">Teks dalam paragraf ini akan memiliki warna border yang berbeda.</p>

Jika berhasil, kamu akan melihat contoh sebagai berikut,

Teks dalam paragraf ini akan memiliki warna border yang berbeda.

4. Cara Menggunakan Warna Transparan di HTML dan CSS

Selain warna-warna solid, kita juga bisa menggunakan warna transparan pada kode HTML dan CSS. Dengan warna ini, sebuah elemen akan terlihat menyatu dengan warna yang ada di belakangnya.

Untuk menggunakannya, kita bisa memakai kode warna seperti pada contoh berikut ini,

p {background-color: transparent}

atau, jika kita ingin mengatur tingkat transparansinya,

p {opacity: 0.5}

Bagaimana, mudah kan mengganti warna dengan kode warna HTML dan CSS lengkap full color di atas?

Dari pengalaman saya, mengetahui cara mengganti warna secara manual akan sangat membantu sekali jika kita menggunakan template/tema gratisan pada blog kita. Dengan begitu kita tidak perlu bergantung pada developer tema jika hanya ingin mengubah warna pada salah satu elemen website.