Warna HTML


Warna HTML ditentukan dengan nama warna yang telah ditentukan sebelumnya, atau dengan nilai RGB, HEX, HSL, RGBA, atau HSLA.


Nama Warna

Dalam HTML, warna dapat ditentukan dengan menggunakan nama warna:

Tomat
jeruk
DodgerBlue
MediumLautHijau
Abu-abu
SlateBiru
Ungu
Abu-abu muda

HTML mendukung 140 nama warna standar .


Warna latar belakang

Anda dapat mengatur warna latar belakang untuk elemen HTML:

Halo Dunia


Rasa sakit itu sendiri adalah cinta Itulah mengapa untuk hal sekecil apa pun yang akan datang, siapa yang ditanggung oleh latihan normal kita untuk mengambil keuntungan dari konsekuensinya

Contoh

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Warna teks

Anda dapat mengatur warna teks:

Halo Dunia

Rasa sakit itu sendiri adalah cinta

Itulah mengapa untuk hal sekecil apa pun yang akan datang, siapa yang ditanggung oleh latihan normal kita untuk mengambil keuntungan dari konsekuensinya

Contoh

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Warna Perbatasan

Anda dapat mengatur warna batas:

Halo Dunia

Halo Dunia

Halo Dunia

Contoh

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Nilai Warna

Dalam HTML, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA.

Tiga elemen <div> berikut memiliki warna latar belakang yang disetel dengan nilai RGB, HEX, dan HSL:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Dua elemen <div> berikut memiliki warna latar belakang yang disetel dengan nilai RGBA dan HSLA, yang menambahkan saluran Alpha ke warna (di sini kita memiliki transparansi 50%):

rgba (255, 99, 71, 0,5)
hsla (9, 100%, 64%, 0,5)

Contoh

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

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Pelajari lebih lanjut tentang Nilai Warna

Anda akan mempelajari lebih lanjut tentang RGB , HEX dan HSL di bab-bab selanjutnya.