Ads by Yasya El Hakim
Warna pada HTML

Kalian dapat menggunakan Warna pada HTML dengan nama warna HTML yang tersedia atau menggunakan nilai RGB, HEX, HSL, RGBA, dan HSLA.

Warna Background

Kalian dapat mengatur warna Background untuk elemen HTML seperti contoh berikut:
<h1 style="background-color:DodgerBlue;">Halo Semuanya</h1>
<p style="background-color:Tomato;">Selamat datang di EL Creative Academy</p> 
See the Pen 45. HTML background-color by Yasya El Hakim (@elhakimyasya) on CodePen.

Warna Teks

Kalian dapat mengatur warna teks seperti contoh berikut:
<h1 style="color:Tomato;">Halo Semuanya</h1>
<p style="color:DodgerBlue;">Selamat datang di EL Creative Academy</p>
<p style="color:MediumSeaGreen;">Tutorial lengkap HTML bahasa indonesia</p> 
See the Pen 46. HTML color by Yasya El Hakim (@elhakimyasya) on CodePen.

Warna Batas (Border)

Kalian dapat mengatur warna batas (Border) seperti contoh berikut:
<h1 style="border:2px solid Tomato;">Halo Semuanya</h1>
<h1 style="border:2px solid DodgerBlue;">Halo Semuanya</h1>
<h1 style="border:2px solid Violet;">Halo Semuanya</h1>
See the Pen 47. HTML border-color by Yasya El Hakim (@elhakimyasya) on CodePen.

Nilai Warna

Pada HTML, kalian bisa menggunakan warna dengan nilai dari RGB, HEX, HSL, RGBA, dan HLSA.

Berikut adalah nilai warna yang sama dengan nama warna "Tomato":
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Berikut adalah nilai warna yang sama dengan nama warna "Tomato", tetapi dengan transparansi 50%:
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Contoh

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1> 
See the Pen 48. HTML Nilai Warna by Yasya El Hakim (@elhakimyasya) on CodePen.

Nilai RGB

Pada HTML, sebuah warna dapat ditentukan dengan nilai RGB seperti formula berikut:
rgb(red, green, blue)

Setiap parameter (red, green, blue) dapat ditentukan nilainya dengan angka dari 0 sampai 255.
Contoh, rgb(255, 0, 0). Nilai tersebut akan menghasilkan warna merah, karena warna merah memiliki nilai yang tinggi (255) dan yang lainnya memiliki nilai 0.
Untuk membuat warna hitam, kalian bisa mengisi semua nilai parameter menjadi 0, contoh: rgb(0, 0, 0).
Untuk membuat warna putih, kalian bisa mengisi semua nilai parameter menjadi 255, contoh: rgb(255, 255, 255).

Nilai HEX

Pada HTML, sebuah warna dapat ditentukan dengan nilai Hexadecimal seperti formula berikut:
#rrggbb

Nilai dari rr (red), gg (green), dan bb (blue) adalah Hexadecimal antara 00 dan ff (sama seperti desimal 0 sampai 255.
Contoh, #ff0000 akan menghasilkan warna merah, karena warna merah memiliki nilai yang tinggi (ff) dan yang lainnya memiliki nilai 00.

Nilai HSL

Pada HTML, sebuah warna dapat ditentukan dengan menggunakan hue, saturation, dan lightness (HSL) seperti formula berikut:
hsl(hue, saturation, lightness)

Hue menggunakan angka saja dari 0 sampai 360. 0 akan menghasilkan warna merah, 120 berwarna hijau, dan 240 berwarna biru.
Saturation menggunakan nilai persen, 0% artinya bayangan, dan 100% adalah warna padat (full warna).
Lightness juga menggunakan nilai persen, 0% berwarna hitam, 50% dapat menentukkan terang atau gelap, dan 100% berwarna putih.

Saturation

Saturation bisa kita bilang sebagai intensitas warna.
100% adalah warna yang murni, tanpa bayangan.
50% adalah 50% bayangan abu-abu, kalian masih bisa melihat warnanya.
0% adalah abu-abu, kalian tidak akan melihat warna.

Lightness

Lightness bisa kita bilang seberapa banyak cahaya yang ingin digunakan, dimana 0% tidak memiliki cahaya sama sekali (Hitam), 50% artinya memiliki 50% cahaya (antara gelap dan terang), 100% artinya full cahaya (putih).

Nilai RGBA

Warna RGBA merupakan sebuah extensi dari warna RGB tetapi dengan Alpha Channel - yang menentukan transparansi warna.
Sebuah warna RGBA dapat ditulis dengan formula berikut:
rgba(red, green, blue, alpha)

Parameter Alpha berupa nilai antara 0.0 (Transparan) sampai 1.0 (Tidak transparan).

Nilai HSLA

Nilai HSLA merupakan sebuah ekstensi dari warna HSL tetapi dengan Alpha Channel - yang menentukan transparansi warna.
Sebuah warna HSLA dapat ditulis dengan formula berikut:
hsla(hue, saturation, lightness, alpha)

Parameter Alpha berupa nilai antara 0.0 (Transparan) sampai 1.0 (Tidak transparan).

Sebelumnya: Tutorial Lengkap HTML: Komentar pada HTML - Bagian 11
Selanjutnya: Tutorial Lengkap HTML: CSS pada HTML - Bagian 13
Daftar Isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya