Some text some message..
Some text some message..
Some text some message..
Some text some message..

Menggunakan Warna (Color)

Color (warna) pada CSS merupakan properti yang digunakan untuk memberikan suatu warna tertentu pada teks didalam elemen HTML. Pemberian nilai berupa nama warna ataupun kode warna pada elemen akan menghasilkan warna yang solid pada teks pada elemen tersebut. Nilai yang disediakan oleh CSS berupa nama/kode warna dan nilai transparent. Dengan memberikan nilai warna yang tepat pada elemen ataupun halaman html akan membuat halaman tersebut semakin hidup dan semakin menarik.

Penulisan pada CSS:

CSS

color:color|transparent|initial|inherit;


Berikut ini adalah contoh dari penggunaannya :

Kode Script :

1.  <!DOCTYPE html>

2.  <html>

3.  <head>

4.  <title>Menggunakan color</title>

5.  <style>

6.  	p.par_1{color:#4169E1;}

7.  	p.par_2{color:#8B008B;}

8.  	p.par_3{color:red;}

9.  	p.par_4{color:cyan;}

10. 	p.par_5{color:rgb(0,0,223);}

11. 	p.par_6{color:rgb(255,0,255);}

12. 	p.par_7{color:hsl(120,100%,50%);}

13. 	p.par_8{color:hsl(240,100%,50%);}

14. 	p.par_9{color:transparent;}

15. </style>

16. </head>

17. <body>

18. 	<h3>Belajar menggunakan color</h3>

19. 	<p class="par_1">Ini adalah paragraf pertama, menggunakan "color:#4169E1;".</p>

20. 	<p class="par_2">Ini adalah paragraf kedua, menggunakan "color:#8B008B;".</p>

21. 	<p class="par_3">Ini adalah paragraf ketiga, menggunakan "color:red;".</p>

22. 	<p class="par_4">Ini adalah paragraf keempat, menggunakan "color:cyan;".</p>

23. 	<p class="par_5">Ini adalah paragraf kelima, menggunakan "color:rgb(0,0,223);".</p>

24. 	<p class="par_6">Ini adalah paragraf keenam, menggunakan "color:rgb(255,0,255);".</p>

25. 	<p class="par_7">Ini adalah paragraf ketujuh, menggunakan "color:hsl(120,100%,50%);".</p>

26. 	<p class="par_8">Ini adalah paragraf kedelapan, menggunakan "color:hsl(240,100%,50%);".</p>

27. 	<p class="par_9" title="sorot teks disini">Ini adalah paragraf kesembilan, menggunakan "color:transparent;".</p>

28. </body>

29. </html>

30. 

31. 

 



Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :

Hasil Script :

Belajar menggunakan color

Ini adalah paragraf pertama, menggunakan "color:#4169E1;".

Ini adalah paragraf kedua, menggunakan "color:#8B008B;".

Ini adalah paragraf ketiga, menggunakan "color:red;".

Ini adalah paragraf keempat, menggunakan "color:cyan;".

Ini adalah paragraf kelima, menggunakan "color:rgb(0,0,223);".

Ini adalah paragraf keenam, menggunakan "color:rgb(255,0,255);".

Ini adalah paragraf ketujuh, menggunakan "color:hsl(120,100%,50%);".

Ini adalah paragraf kedelapan, menggunakan "color:hsl(240,100%,50%);".

Ini adalah paragraf kesembilan, menggunakan "color:transparent;".



Pada contoh diatas color:#4169E1; dan color:#8B008B; disebut sebagai warna heksadesimal, jenis warna ini ditandai dengan tanda "#" mendahului nilai heksadesimalnya. Dan ini merupakan salah satu dari sekian cara untuk mendeklarasikan warna menjadi sebuah warna yang solid.

Kemudian color:red; dan color:cyan; disebut dengan nama warna, cara ini merupakan cara yang paling mudah untuk diingat dalam menjabarkan sebuah warna menjadi warna yang solid.

Kemudian color:rgb(0,0,223); dan color:rgb(255,0,255); disebut dengan warna rgb(reg green blue), cara ini merupakan cara dalam menjabarkan sebuah warna menjadi sebuah warna yang solid. warna ini merupakan warna kombinasi yang mana hasil dari campuran sekian warna red dengan sekian warna green dan sekian warna blue akan menghasilkan suatu warna tertentu yang disebut dengan warna rgb.

Dan yang terakhir adalah color:hsl(120,100%,50%); dan color:hsl(240,100%,50%); disebut dengan warna hsl (hue lightness saturation). Cara ini merupakan metoda penamaan warna berdasarkan derajat warna dengan pengaturan kepekatan cahaya dan saturasi yang akan menghasilkan warna baru yang disebut dengan warna hsl.

Cara lain dalam mendeklarasikan suatu warna adalah dengan rgba dan hsla, yang mana huruf "a" merupakan singkatan untuk "alpha". Pendeklarasian warna dengan rgba dan hsla akan menghasilkan warna dengan tingkat transparansi mulai dari 0,0 sampai dengan 1,0. Contohnya seperti p{backround-color:rgba(255,0,0,0.4);}, jika dijalankan maka akan menghasilkan warna merah dengan tingkat transparansi 0.4.


noteCatatan : Pada kasus tertentu, pemberian nilai warna dengan nilai warna transparent, akan membuat warna teks elemen yang bersangkutan menjadi tidak terlihat kecuali teks tersebut disorot. Nilai transparent ini hanya mempengaruhi warna teks saja dan tidak berpengaruh terhadap warna latar ataupun warna border elemen, tidak seperti transparensi pada properti opacity yang akan melunturkan keseluruhan warna elemen termasuk border-color dan background-color.

facebooktwitterwhatapplinkedinpinterest

Halaman Terkait

Menggunakan Background Dengan Warna Gradien Radial Pada CSS css
Menggunakan Background Dengan Warna Gradien Linear Pada CSS css
Menggunakan Background Dengan Gambar (Background Image) Pada CSS css
Menata Warna Latar (Background Color) Pada CSS css
Menggunakan Warna (Color) Di Dalam CSS css

Tutorial CSS

Paling Banyak Dibaca

1Penulisan Komentar Pada CSS 12.085
2Merubah Huruf Regular Menjadi Huruf Italic Dengan Properti Font Style Pada CSS 10.152
3Satuan Ukuran pt (Points) Pada CSS 8.576
4Mengatur Perataan Text (Rata Kiri, Tengah, Kanan) Pada CSS 8.072
5Merubah Warna Teks Dengan CSS 7.345
6Menggunakan Background Dengan Gambar (Background Image) Pada CSS 5.682
7Mengatur Ukuran Besar Huruf (Font Size) Pada CSS 5.623

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Home | Privacy Policy | About Us | Contact Us | Site Map

©2020 - 2025 All Rights Reserved
This site is maintained by said alfaruq
Batam - Indonesia