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

HTML Colors | kode warna html

Nama Warna

Dalam HTML, warna dapat ditentukan dengan menggunakan nama warna:

Tomat

Jeruk

DodgerBlue

MediumSeaGreen

Abu-abu

SlateBlue

Violet

LightGray

HTML Color Picker

Teori Kode Warna HTML

Jadi Anda bertanya-tanya "Apakah kombinasi huruf dan angka yang aneh ini memiliki arti?" Nah jawabannya adalah "Ya" dan beginilah kelanjutannya :)

Format Kode HTML:

Setiap kode HTML berisi simbol "#" dan 6 huruf atau angka. Angka-angka ini berada dalam sistem angka heksadesimal. Misalnya "FF" dalam heksadesimal mewakili angka 255 dalam Desimal.

Arti simbol:

Dua simbol pertama dalam kode warna HTML mewakili intensitas warna merah. 00 adalah yang paling sedikit dan FF adalah yang paling intens. Yang ketiga dan keempat mewakili intensitas hijau dan kelima dan keenam mewakili intensitas biru. Jadi dengan menggabungkan intensitas merah, hijau dan biru kita dapat mencampur hampir semua warna yang diinginkan hati kita;)

Contoh:

#FF0000 - Dengan kode HTML ini kami memberi tahu browser untuk menampilkan maksimum merah dan tidak ada hijau dan tidak ada biru. Hasilnya tentu saja warna merah murni:

#00FF00 - Kode HTML ini hanya menunjukkan warna hijau dan tidak ada merah dan biru. Hasilnya adalah:

#0000FF - Kode HTML ini hanya menunjukkan warna biru dan tidak ada merah dan hijau. Hasilnya adalah:

#FFFF00 - Kombinasi warna merah dan hijau memberi kita kuning:

#CCEEFF - Ambil sedikit lebih banyak warna merah hijau dan biru maksimum untuk mendapatkan warna langit:

Warna Batas

Anda bisa mengatur warna batas:

<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>

Hasilnya seperti ini:

Halo dunia

Halo dunia

Halo dunia

Warna Latar Belakang

Anda dapat mengatur warna latar belakang untuk elemen HTML:

Contoh :

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

Maka akan keluar seperti ini:

Halo dunia

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.

Warna Teks

Anda dapat mengatur warna teks:

Contoh:

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

Maka akan muncul seperti ini:

Halo dunia

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.

Nilai Warna

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

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

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>

Maka hasilnya seperti ini:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

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

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0,5)

Sumber :Warna HTML (w3schools.com)