Color di CSS: Nama – Jenis dan Cara Membuatnya

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

by Hanifah Nurbaeti October 12, 2020

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

Section Artikel

1 Nama Warna CSS
2 Warna Latar Belakang CSS
3 Warna Teks CSS
4 Warna Border CSS
5 Nilai Warna CSS

Nama Warna CSS

Di CSS, warna dapat ditentukan dengan menggunakan nama warna, seperti contoh kode di bawah ini:

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

Warna Latar Belakang CSS

Kita bisa mengatur warna latar belakang untuk elemen HTML:

Contoh :

<!DOCTYPE html>
<html>
<body>

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

<p style="background-color:Tomato;">
Warna ditentukan menggunakan nama warna yang telah ditentukan sebelumnya atau nilai RGB, HEX, HSL, RGBA, HSLA.
</p>

</body>
</html>

Warna Teks CSS

Kita bisa mengatur warna teks seperti berikut ini:

Contoh :

<!DOCTYPE html>
<html>
<body>

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

<p style="color:DodgerBlue;">Test warna teks 1 .</p>

<p style="color:MediumSeaGreen;">Test warna teks 2.</p>

</body>
</html>

Warna Border CSS

Kita bisa mengatur warna border dengan CSS, sebagai berikut :

Contoh :

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

Nilai Warna CSS

Dalam CSS, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA:

Contoh :

<!DOCTYPE html>
<html>
<body>

<p>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>Warna "tomato" tetapi lebh transparan50 %:</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>