HTML

Color di HTML: Tutorial Membuat dan Contoh Sintaknya

Warna/Color di HTML ditentukan dengan nama warna standar atau dengan nilai RGB, HEX, HSL, RGBA, atau HSLA.

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

HTML memiliki 140 nama warna standar.

Background color/Warna latar belakang

Kita bisa mengatur warna latar belakang untuk elemen HTML, seperti contoh berikut :

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/Teks Berwarna

Kita bisa mengatur warna teks, seperti contoh berikut :

<!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/Warna garis batas

Kita bisa mengatur warna border/garis batas, seperti contoh di bawah ini :

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

Nilai Warna

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

<!DOCTYPE html>
<html>
<body>

<p>Nama warna yang sama seperti "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>Nama warna yang sama seperti "Tomato", tetapi lebih transparan 50%:</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>


</body>
</html>

Penjelasan Kode :

  • Tiga elemen <div> pertama memiliki warna latar belakang yang disetel dengan nilai RGB, HEX, dan HSL
  • Dua elemen <div>kedua memiliki warna latar belakang yang disetel dengan nilai RGBA dan HSLA, yang menambahkan saluran Alpha ke warna (di sini kami memiliki transparansi 50%)


Hanifah Nurbaeti

Share
Tags: html