Belajar HTML Colors

Dalam HTML, warna dapat dinyatakan dalam beberapa cara, yaitu color names, HEX, RGB, RGBA, HSLA. Berikut penjelasanya satu persatu.

Color Names

Di HTML anda dapat menuliskam warna dengan nama warnanya, contoh.

<h1 style="background-color: Tomato; color: white;">Tomato</h1> <p style="background-color: Oranges; color: white;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

Hasilnya.

Tomato

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Dalam html, terdapat 140 nama warna yang dapat dicoba.

Color RGB

RGB merupakan singkatan dari Red Green blur, untuk menampilkanya dapat menggunakan syntax berikut.
rgb(red, green, blue)
Penulisanya, red green blue diisi dengan angka, angkanya diantara 0 - 255. Contoh.

rgb(255, 0, 0)

rgb(60, 179, 163)

rgb(0, 0, 255)

Color HEX

Untuk menampilkan warna dengan kode hex dapat menggunakan syntax berikut.
#rrggbb
rr merupakan red, gg merupakan green, dan bb merupakan blue. Dengan nilai yang bisa ditulis 0 - 255. Contoh.

#ff0000

#0000ff

#3cb371

Color HSL

HSL merupakan singkatan Hue, Saturarion, dan lightness. Penulisanya sebagai berikut.
hsl(hue, saturatuon, lightness)
Hue merupakan warna yang digunakan, dengan nilai 0 - 360. 0 merupakan merah, 120 hijau, dan 240 biru.
Saturarion merupakan insensitas warna, dengan nilai 0% - 100%. Jika 0% maka warna akan menjadi abu-abu warna tidak terlihat, jika 100% warna akan terlihat seluruhnya.
Lightness adalah kecerahan dari warna. Ditulis dengan nilai 0% - 100%, 0% gelap, 50% normal, 100% putih. Contoh warna HSL.

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

Color RGBA

RGBA merupakan lanjutan dari RGB, dengan tambahan alpha.
Alpha berfungsi mengatur tranparansi warna, dan bernilai 0 sampai 1. Jika diberi 1 maka warna akan sama seperti aslinya. Jika diberi 0.5 maka warna akan setengah transparan. Jika diberi 0 maka warna transparan. Contoh

rgba(39, 100, 50, 1)

rgba(39, 100, 50, 0.5)

rgba(39, 100, 50, 0)

Color HSLA

Fungsinya sama seperti RGBA, yaitu penambahan alpha pada HSL. Contoh.

hsla(0, 100%, 50%, 1)

hsla(0, 100%, 50%, 0.5)

hsla(0, 100%, 50%, 0)

Sekian postingan saya yang berjudul Belajar HTML Colors.
Jangan lupa baca postingan saya sebelumnya Belajar HTML Comments.