Warna teks secara default akan memiliki warna hitam (black) dengan warna latar putih di belakangnya. Warna (color) merupakan aspek yang penting dalam membuat halaman web. Pada halaman web tertentu, kadang menawarkan variasi tema dengan beberapa warna menarik yang berbeda di dalamnya. Pengunjung dapat memilih tema dengan warna yang menjadi kesukaan mereka.
Warna (color) pada CSS merupakan properti yang digunakan untuk memberikan warna tertentu pada teks di dalam elemen HTML. Pemberian nilai berupa nama warna (color name) ataupun nilai kode warna lainnya akan menggantikan warna default (hitam) pada elemen tersebut dengan warna yang baru.
Anda dapat memilih warna teks kontras dengan warna background yang berada di belakangnya. Misalnya jika warna latarnya adalah putih atau warna tipis lainnya anda dapat menggunakan warna hitam, merah, biru dan lainnya yang kontras dengan warna tersebut. Karena jika warna teks dan warna latarnya satu warna dan satu nada, maka teksnya tidak akan kelihatan.
Warna (color) teks pada CSS dapat diubah dengan menggunakan properti color. Properti ini menerima nilai dalam berbagai bentuk seperti nama warna standar HTML dan CSS (color name) yang berjumlah 140 buah, nilai warna dalam bentuk kode hexadesimal, kode warna RGB(A) dan kode warna HSL(A).
Penulisan properti color :
color: color-code | transparent | inherit;
Sebagai contoh misalnya :
p {color: red;}
p {color: #FF0000;}
p {color: #000000;}
p {color: rgb(255,99,71);}
p {color: hsla(0, 80%, 45%, 1.0);}
Nilai berupa color-code merupakan nilai yang dapat diberikan dalam bentuk nilai kode warna. Nilai transparent akan membuat teks dalam kondisi transparent dan tidak terlihat, namun kalau teks tersebut diseleksi dalam kondisi ada. Nilai transparent ini hanya mempengaruhi warna teks saja. Nilai tranparent merupakan cara cepat (short-hand) dari pemberian nilai pada RGB(A) dan HSL(A) untuk nilai transparensi 100%, misalnya rgb(255,99,71,0) atau hsla(0, 80%, 45%, 0).
Nilai inherit akan membuat teks mempunyai warna sesuai dengan elemen induknya (inheritance).
Contoh berikut merubah warna teks menggunakan nilai berupa kode warna nama standart HTML (color name).
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Merubah Warna-Color CSS</title>
<style>
p{
border:solid 1px navy;
padding:5px;
}
</style>
</head>
<body>
<p style="color:tomato;">Teks pada paragraf ini menggunakan nilai <b>warna tomato</b></p>
<p style="color:dodgerblue;">Teks pada paragraf ini menggunakan nilai <b>warna dodgerblue</b></p>
<p style="color:orange;">Teks pada paragraf ini menggunakan nilai <b>warna orange</b></p>
<p style="color:purple;">Teks pada paragraf ini menggunakan nilai <b>warna purple</b></p>
<p style="color:magenta;">Teks pada paragraf ini menggunakan nilai <b>warna magenta</b></p>
<p style="color:red;">Teks pada paragraf ini menggunakan nilai <b>warna red</b></p>
<p style="color:teal;">Teks pada paragraf ini menggunakan nilai <b>warna teal</b></p>
<p style="color:green;">Teks pada paragraf ini menggunakan nilai <b>warna green</b></p>
<p style="color:transparent;">Teks pada paragraf ini menggunakan nilai <b>transparent</b></p>
</body>
</html>
Hasil Script :
Teks pada paragraf ini menggunakan nilai warna tomato
Teks pada paragraf ini menggunakan nilai warna dodgerblue
Teks pada paragraf ini menggunakan nilai warna orange
Teks pada paragraf ini menggunakan nilai warna purple
Teks pada paragraf ini menggunakan nilai warna magenta
Teks pada paragraf ini menggunakan nilai warna red
Teks pada paragraf ini menggunakan nilai warna teal
Teks pada paragraf ini menggunakan nilai warna green
Teks pada paragraf ini menggunakan nilai transparent
Contoh berikut merubah warna teks menggunakan nilai berupa kode warna Hexadesimal.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Merubah Warna-Color CSS</title>
<style>
*,body{font-family: 'Roboto', sans-serif;}
p{
border:solid 1px navy;
padding:5px;
}
</style>
</head>
<body>
<h3>Teks Dengan Warna HEX</h3>
<p style="color:#7FFF00;">Teks pada paragraf ini menggunakan nilai <b>warna #7FFF00</b></p>
<p style="color:#006400;">Teks pada paragraf ini menggunakan nilai <b>warna #006400</b></p>
<p style="color:#FF8C00;">Teks pada paragraf ini menggunakan nilai <b>warna #FF8C00</b></p>
<p style="color:#8B0000;">Teks pada paragraf ini menggunakan nilai <b>warna #8B0000</b></p>
<p style="color:#D24444;">Teks pada paragraf ini menggunakan nilai <b>warna #D24444</b></p>
<p style="color:#FF00FF;">Teks pada paragraf ini menggunakan nilai <b>warna #FF00FF</b></p>
<p style="color:#7B68EE;">Teks pada paragraf ini menggunakan nilai <b>warna #7B68EE</b></p>
</body>
</html>
Contoh berikut merubah warna teks menggunakan nilai berupa kode warna RGB (Red Green Blue).
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Merubah Warna-Color CSS</title>
<style>
*,body{font-family: 'Roboto', sans-serif;}
p{
border:solid 1px navy;
padding:5px;
}
</style>
</head>
<body>
<h3>Teks Dengan Warna RGB</h3>
<p style="color:RGB(34, 139, 34);">Teks pada paragraf ini menggunakan nilai <b>warna RGB(34, 139, 34)</b></p>
<p style="color:RGB(75, 0, 130);">Teks pada paragraf ini menggunakan nilai <b>warna RGB(75, 0, 130)</b></p>
<p style="color:RGB(255, 69, 0);">Teks pada paragraf ini menggunakan nilai <b>warna RGB(255, 69, 0)</b></p>
<p style="color:RGB(176,8,20);">Teks pada paragraf ini menggunakan nilai <b>warna RGB(176,8,20)</b></p>
<p style="color:RGB(6,64,90);">Teks pada paragraf ini menggunakan nilai <b>warna RGB(6,64,90)</b></p>
<p style="color:RGB(36,68,40);">Teks pada paragraf ini menggunakan nilai <b>warna RGB(36,68,40)</b></p>
<p style="color:RGB(15,255,80);">Teks pada paragraf ini menggunakan nilai <b>warna RGB(15,255,80)</b></p>
</html>
Contoh berikut merubah warna teks menggunakan nilai berupa kode warna HSL (Hue Saturation Lightness).
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Merubah Warna-Color CSS</title>
<style>
*,body{font-family: 'Roboto', sans-serif;}
p{
border:solid 1px navy;
padding:5px;
}
</style>
</head>
<body>
<h3>Teks Dengan Warna HSL</h3>
<p style="color:hsl(0,100%,50%);">Teks pada paragraf ini menggunakan nilai <b>warna hsl(0,100%,50%)</b></p>
<p style="color:hsl(240,100%,50%);">Teks pada paragraf ini menggunakan nilai <b>warna hsl(240,100%,50%)</b></p>
<p style="color:hsl(342, 80%, 45%);">Teks pada paragraf ini menggunakan nilai <b>warna hsl(342, 80%, 45%)</b></p>
<p style="color:hsl(228, 80%, 45%);">Teks pada paragraf ini menggunakan nilai <b>warna hsl(228, 80%, 45%)</b></p>
<p style="color:hsl(303, 80%, 45%);">Teks pada paragraf ini menggunakan nilai <b>warna hsl(303, 80%, 45%)</b></p>
<p style="color:hsl(258, 80%, 45%);">Teks pada paragraf ini menggunakan nilai <b>warna hsl(258, 80%, 45%)</b></p>
<p style="color:hsl(193, 80%, 45%);">Teks pada paragraf ini menggunakan nilai <b>warna hsl(193, 80%, 45%)</b></p>
</html>
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
