-->

Iklan bawah header

Belajar CSS : Cara Mendefinisikan Warna di CSS

Belajar CSS

Dalam tutorial kali ini kita akan membahas tentang bagaimana cara untuk menentukan warna pada dokumen HTML. Ada banyak cara untuk menentukan warna pada CSS, salah satunya adalah dengan menuliskan nama warna dalam bahasa inggris.

Misalnya, kita ingin membuat sebuah teks paragraf yang berwarna biru, maka kita bisa berikan color : blue.

Selain menggunakan nama warna untuk menentukan warna pada CSS, terdapat juga cara yang lainnya yang bisa digunakan seperti fungsi rgb(), kode heksa, dll.

Untuk lebih jelasnya mari kita bahas satu persatu ...

Jenis-jenis Pewarnaan Pada CSS

Seperti yang sudah dijelaskan di awal tadi bahwa di dalam CSS ada beberapa metode atau cara yang digunakan untuk menentukan jenis-jenis pewarnaan pada CSS, salah satunya yang paling sering digunakan adalah Hex Code. Berikut penjelasannya:

1. Color Name

Color Name merupakan cara perwanaan dalam CSS dengan menuliskan nama warnanya secara langsung. Cara ini merupakan cara yang paling mudah dalam menggunakan warna di CSS.

Terdapat 16 macam warna standar color name CSS, yaitu black, blue, aqua, fuchsia, gray, green, lime, navy, maroon, olive, purple, silver, red, white, yellow dan teal.


header {
	background: teal;
}

2. HEX Value

HEX Value merupakan metode perwarnaan dengan menggunakan bilangan heksa desimal, memiliki nilai dari 0 sampai f (16 dalam desimal). Dalam pewarnaannya, kita akan mengikuti kode #RRGGBB. Dimana RR mewakili warna merah, GG mewakili warna hijau, dan BB mewakili warna biru.

h1 { color: 3cb371; }

3. RGB Value

RGB Value merupakan pewarnaan CSS dengan 3 elemen yaitu R adalah red (merah), G adalah green (hijau) dan B adalah blue (biru). Kode RGB memiliki rentang nilai dari 0~255, semakin besar nilai yang diberikan, maka semakin kuat nilai warna tersebut.

Contoh penggunaan RGB Value.


h3 {
	color: rgb(88, 21, 255);
}

Pada contoh diatas, nilai parameter ketiga (red) diberikan secara maksimal, maka nanti hasilnya warna merah akan menjadi warna dominan.

4. HSL

HSL merupakan metode perwarnaan pada CSS dengan menggunakan komposisi (hue, saturation, lightness). Pertama kita bahas dulu apa itu hue. Hue adalah derajat pewarnaan yang nilainya dimulai dari 0~360.

Kemudian saturation menunjukan suatu kemurnian warna dan terakhir lightness mengatur kecerahan warna. Untuk nilai dari saturation dan lightness menggunakan persen, dari 0%~100%.

Contoh penggunaan fungsi HSL :

 
p {
	color: hsl(60,20%,34%) ;
	background-color: hsl(180,50%,50% ;
}

RGBA HSLA Value

Yang terkhir merupakan pengembangan dari RGB dan HSL. Jadi ada penambahan satu komponen pada RGB ataupun HSL. Nilai A (alpha) itu menunjukan nilai transparansi dari suatu warna. Parameter yang digunakan dimulai dari 0~1. Dimana angka 0 menunjukan warna full transparan sedangkan angka 1 menunjukan bahwa warna tidak transparan sama sekali.

Contoh penggunaan fungsi RGBA dan HSLA:


p {
	color: rgba(60,22,12,0.2) ;
	background-color: hsla(180,50%,50%,0.1) ;
}

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel