Dengan warna kita bisa membuat halaman Web menjadi lebih menarik. Penggunaan warna juga dapat mememengaruhi respon pengguna. Dalam CSS, terdapat cara untuk mengubah warna suatu elemen.

Penulisan Warna

Warna HEX

Dalam CSS kita dapat menulis warna dalam kode HEX. Warna HEX diawali dengan #. Dalam Warna HEX, terdiri dari Red (Merah), Green (Hijau), dan Blue (Biru) dan Alpha. Cara kerjanya adalah menggabungkan red, green, dan blue menjadi satu warna sehingga menghasilkan warna baru. Alpha merupakan tingkat transparasi warna yang dihasilkan. Warna HEX bisa dituliskan sebagai berikut:

#aarrggbb
#rrggbb
#argb
#rgb

r mewakili merah (red), g mewakili hijau (green), b mewakili biru (Blue) dan a mewakili alpha/transparasi. Alpha merupakan opsional. Keempat entitas diatas harus ditulis dengan karakter 0-9 dan a-f. Nilai awal dari alpha merupakan ff. Contoh:

Untuk mempermudah pemilihan warna kalian dapat menggunakan HEX Color Selector.

Warna HTML

Berbeda dengan Warna HEX, Warna HTML mewakilkan warna dengan nama. Nama-nama tersebut sebagai berikut:

Fungsi rgb() dan rgba()

Fungsi rgb() dan rgba() merupakan merupakan fungsi untuk menghasilkan warna dengan R, G, B, dan A. Syntaksnya sebagai berikut:

rgb(r, g, b)
rgba(r, g, b, a)

Parameter r, g dan b harus diisi angka antara 1 - 255. Sedangkan a harus diisi angka desimal dari 0 - 1

Mengatur Warna Latar Belakang

Kita dapat mengatur warna latar belakang dengan properti background atau background-color.

Contoh:

<style>
.merah {
    background: red;
}

.biru {
    background: #0000Ff;
}

.hijau {
    background: rgb(0, 255, 0)
}

.kuning {
    background: rgba(255, 255, 0, 0.5)
}
</style>
<p class="merah">Saya akan berlatar belakang merah<p>
<p class="biru">Saya akan berlatar belakang biru</p>
<p class="hijau">Saya akan berlatar belakang hijau</p>
<p class="kuning">Saya akan berlatar belakang kuning sedikit transparan</p>

Menjadi:

Mengatur Warna Teks

Kita dapat mengatur warna teks dengan properti color. Contoh:

<style>
.merah {
    color: red;
}

.biru {
    color: #0000Ff;
}

.hijau {
    color: rgb(0, 255, 0)
}

.kuning {
    color: rgba(255, 255, 0, 0.5)
}
</style>
<p class="merah">Saya akan berwarna merah<p>
<p class="biru">Saya akan berwarna biru</p>
<p class="hijau">Saya akan berwarna hijau</p>
<p class="kuning">Saya akan berlatar berwarna sedikit transparan</p>

Menjadi:

Kesimpulan

Kita tidak hanya bisa mengatur warna dengan CSS. Kita juga bisa membuat animasi, bentuk, tata letak dan banyak hal keren lainya dengan CSS. OK Sekian.