Belajar CSS Part 5 : Menambahkan Warna (Color)

Menambahkan warna di CSS

Menambahkan Warna

Dalam pemberian warna di CSS bisa ditentukan dengan menggunakan nama warna, nilai-nilai RGB, HEX, HSL, RGBA, dan HSLA. Saat memberikan warna pada elemen-elemen HTML, gunakan style.

Nama Warna

Dalam pemberian warna, bisa ditentukan dengan menggunakan nama warna.
Contoh

Blue	LightSkyBlue	RoyalBlue	LightSteelBLue
Green	Lime	LimeGreen	LightGreen
Yellow	YellowGreen	LawnGreen	DarkSeaGreen
Red	DarkSalmon	Orange	Tomato

Selain nama-nama warna yang di atas, ada banyak lagi nama-nama warna yang bisa digunakan.

Warna Latar Belakang

Kita dapat mengatur warna latar belakang untuk elemen HTML menggunakan style.
Contoh

<!DOCTYPE html>
<html>
<body>

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

<p style="background-color:orange;">
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>

Hasilnya:

Warna Teks

Contoh:

<!DOCTYPE html>
<html>
<body>

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

<p style="color:lime;">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:orange;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Hasilnya:

Warna Border

Kita juga bisa memberikan warna pada border.
Contoh

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid red;">Hello World</h1>
<br/>
<h1 style="border: 2px solid lightskyblue;">Hello World</h1>
<br/>
<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>

Hasilnya:

Nilai Warna (Color Value)

Dalam pemberian warna, dapat ditentukan dengan menggunakan nilai-nilai RGB, HEX, HSL, RGBA, dan HSLA.
Contoh

<!DOCTYPE html>
<html>
<body>

<p>Warna ini memiliki nama yang sama, yaitu "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>Warna ini juga memiliki nama yang sama, yaitu "Tomato", tetapi 50% transparan:</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 menggunakan nama warna, warna juga dapat ditentukan dengan menggunakan RGB, HEX, HSL, atau bahkan warna transparan menggunakan nilai warna RGBA atau HSLA. </ p>

</body>
</html>

Hasilnya: