Warna (color) adalah salah satu aspek penentu dalam membangun suatu aplikasi web. Pemberian warna yang dinamis pada halaman web akan menghasilkan tampilan yang jauh lebih menarik jika dibandingkan dengan memberikan warna dalam bentuk default (hitam putih).
CSS menggunakan nilai warna (color values) dalam menentukan suatu warna pada elemen HTML. Nilai warna tersebut kemudian dapat diaplikasikan pada elemen HTML sehingga elemen tersebut akan memiliki warna sesuai dengan yang sudah diberikan. Properti yang biasanya menggunakan nilai warna dalam pewarnaan seperti warna teks, warna latar elemen, warna border dan lainnya.
Nama warna (color name) merupakan warna standar yang penggunaanya cukup dengan menyebut nama warnanya saja. CSS dan HTML mendukung sebanyak sebanyak 140 buah warna standar berdasarkan nama warna. Nama warna seperti black, blue, red, white merupakan beberapa contoh warna dari 140 buah warna tersebut.
Penulisan sintaks :
property_name: colorname;
Nilai dari colorname dapat diisi dengan menyebutkan nama warna standar dari color name.
Sebagai contoh misalnya :
color: red;
border: solid 1px gray;
Contoh nama warna berdasarkan color name :
skyblue
orange
tomato
firebrick
teal
silver
yellow
limegreen
fuchsia
violet
brown
crimson
darkcyan
darkgreen
greenyellow
Berikut ini contoh penggunaan color name pada CSS :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
p{
padding:10px;text-align:center;
}
</style>
</head>
<body>
<p style="color:white; background-color:teal;">Selamat Datang..</p>
<p style="color:white; background-color:firebrick;">One bad chapter doesn't mean your life is over. Turn the page and move on.<br>Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
</body>
</html>
Warna RGB merupakan warna kombinasi dari warna Red, Green dan Blue. Kombinasi warna model ini dapat menghasilkan warna sampai puluhan juta jenis warna. Presentase dari warna merah (Red), ditambah dengan warna hijau (Green) dan ditambah warna biru (Blue) akan menghasilkan suatu warna tertentu.
Nilai dari tiap parameter pada warna RGB (red green blue) mewakili intensitas kepekatan warna dari angka 0 sampai dengan angka 255.
Penulisan sintaks :
property_name: rgb(x,x,x);
Nilai x merupakan nilai numeric (angka) dimulai dari angka 0 sampai dengan 255.
Sebagai contoh misalnya :
color: rgb(255,0,0);
border: solid 1px rgb(255,69,0);
Contoh warna RGB :
rgb(255,69,0)
rgb(75,0,130)
rgb(34,139,34)
rgb(15,255,0)
rgb(73,94,20)
rgb(6,64,90)
rgb(233,15,10)
rgb(15,143,120)
rgb(165,93,0)
rgb(200,248,0)
rgb(172,211,41)
rgb(216,83,200)
Contoh penggunaan warna RGB pada CSS :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
p{
padding:10px;text-align:center;
}
</style>
</head>
<body>
<p style="color:RGB(255,255,255); background-color:RGB(126,0,0);">Selamat Datang..</p>
<p style="color:rgb(255,255,255); background-color:rgb(8,184,20);">One bad chapter doesn't mean your life is over. Turn the page and move on.<br>Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
</body>
</html>
Warna dengan kode hexadesimal merupakan penjabaran dari nilai warna RGB (red green blue). Dimana warna RR (red), GG (green), BB (blue) merupakan angka hexadesimal dengan nilai diantara 00 dan FF (sama dengan angka 0 sampai dengan 255).
Misalnya warna tomato dengan kode warna rgb(255, 99, 77) akan dijadikan menjadi warna hexadesimal , maka konversinya adalah 255 → ff, 99 → 63 dan 77 → 47. Jadi kode warna rgb(255, 99, 77) jika dijadikan hexadesimal akan menghasilkan nilai #ff6347.
Penulisan sintaks :
property_name: #rrggbb;
Nilai rr merupakan nilai numeric (angka) sistem hexadesimal dimulai dari angka 00 sampai dengan ff.
Nilai gg merupakan nilai numeric (angka) sistem hexadesimal dimulai dari angka 00 sampai dengan ff.
Nilai bb merupakan nilai numeric (angka) sistem hexadesimal dimulai dari angka 00 sampai dengan ff.
Sebagai contoh misalnya :
color: #e52a2a
border: solid 1px #483d8b;
Contoh warna Hexadesimal :
#ff7f50
#00008b
#dc143c
#b8880b
#006400
#ff8c00
#ffff00
#add8e6
#f08080
#f08080
#808000
#800080
Contoh penggunaan warna Hexadesimal pada CSS :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
p{
padding:10px;text-align:center;
}
</style>
</head>
<body>
<p style="color:#fffafa; background-color:#ff4500;">Selamat Datang..</p>
<p style="color:#fffafa; background-color:#808000;">One bad chapter doesn't mean your life is over. Turn the page and move on.<br>Kindness makes you the most beatifull person in the world, no matter what you look like.</p>
</body>
</html>
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
