Pendahuluan
Pada bagian ini merupakan hal yang sangat penting untuk teman-teman ketahui, yaitu warna pada CSS. Bagaimana cara mengatur warna dan apa saja jenis warna yang dapat digunakan di CSS. Lansung saja kita akan bahas di tutorial kali ini
CSS Colors
Warna pada CSS dapat ditentukan menggunakan nama warna yang telah di tentukan sebelumnya atau nilai seperti RGB
, HEX
, HSL
, RGBA
, HSLA
Menggunakan Nama Warna
Jika teman-teman ingat, pada materi sebelumnya kita sudah menggunakan beberapa nama warna. Nah sekarang kita akan bahas kembali untuk mengatur warna di CSS. CSS mendukung penamaan warna sebanyak 140 standard nama warna. Teman-teman dapat mengunjungi website ini untuk melihat nama warna yang di dukung HTML color Names
Contoh :
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Hasil :
RGB Color
Nilai warna RGB mewakili campuran warna antara Red, Green, dan Blue. Di CSS, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:
rgb(red, green, blue)
Setiap parameter (Red, Green, Blue) mendefenisikan intensitasa warna dari 0
sampai dengan 255
.
Sebagai contoh rgb(255,0,0)
di tampilkan sebagai merah, karena merah di atur ke nilai tertinggi (255)
dan yang lainnya di atur ke nilai 0
.
Untuk menampilkan warna hitam, atur semua parameter warna menjadi 0
seperti ini rgb(0,0,0)
.
Sebaliknya untuk menampilkan warna menjadi warna putih dapat mengatur nilainya menjadi rgb(255,255,255)
RGB Color Generator
RGBA Value
RGBA adalah singkatan dari RGB dengan tambahan Alpha yang merupakan opasitas untuk warna. Nilai RGBA ditentukan dengan seperti berikut :
rgba(red, green, blue, alpha)
RGBA Color Generator
CSS HEX Colors
Warna menggunakan HEX adalah menentukan kode warna dengan nilai hexadesimal dengan rumus seperti berikut :
#rrggbb
Nilai dari warna tersebut adalah #RRGGBB yang berarti RR
(red), GG
(green), BB
(blue).
3 Digit HEX Value
Kita juga dapat menggunakan kode warna hexadesimal dengan 3 digit. Sebagai contoh seperti berikut :
body {
background-color: #fc9;
}
h1 {
color: #f0f;
}
p {
color: #b58;
}
HSL Value
HSL merupakan singkatan dari Hue, Saturation, dan Lightness. Pada CSS, warna dapat ditentukan menggunakan HSL dalam bentuk rumus seperti berikut :
hsl(hue, saturation, lightness)
- Hue adalah drajat dari 0 samapi 360. 0 adalah merah, 120 adalah hijau, dan 240 adalah biru.
- Saturasi adalah nilai persentase, 0% berarti bayangan abu-abu, dan 100% adalah warna penuh.
- Lightness juga persentase, 0% hitam, 50% tidak terang atau gelap, 100% putih
Contoh menggunakan HSL sebagai pengaturan warna pada CSS
h1{
hsl(0, 100%, 50%) /* warna merah */
}
Kesimpulan
Cukup banyak pilihan yang diberikan oleh CSS untuk dapat kita gunakan untuk mengatur warna. Dari berbagai macam jenis warna yang bisa kita gunakan, manakah yang sering kamu gunakan untuk menentukan warna tampilan website kamu?