HTML Color: Nama dan Cara Menggunakannya di Atribut

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 13, 2020

Warna atau color pada HTML dapat di definiskan dengan nama warna yang telah ditentukan sebelumnya, atau dengan nilai RGB, HEX, HSL, RGBA, atau HSLA.

Section Artikel

1 Nama Warna (Color)
2 Background Color
3 Text Color
4 Border Color
5 Color Value

Nama Warna (Color)

Dalam HTML, warna dapat ditentukan dengan menggunakan nama warna.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>

Background Color

Pada HTML kita dapat mengatur backgorund color (warna latar belakang) untuk elemen HTML.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color: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.
</p>

</body>
</html>

Text Color

Dalam HTML kita dapat mengatur warna teks sesuai dengan keinginan kita.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Border Color

Kita juga dapat menentukan warna border pada HTML.

Contoh:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Color Value

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

Tiga elemen <dif> berikut memiliki warna background yang diatur dengan nilai RGB, HEX, dan HSL.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p>Same seperti warna "Tomato":</p>

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

<p>Sama seperti warna "Tomato", tetapi 50% transparent:</p>
<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>

<p>Selain nama warna yang telah ditentukan sebelumnya, warna dapat ditentukan menggunakan RGB, HEX, HSL, atau bahkan warna transparan menggunakan nilai warna RGBA atau HSLA.</p>

</body>
</html>