Tutorial CSS Untuk Pemula - Belajar Warna Dalam CSS
Dalam mengatur tampilan sebuah website, warna merupakan suatu komponen yang sangat penting, bahkan bisa jadi yang paling penting karena warna merupakan sesuatu yang langsung dilihat oleh kedua mata dan dapat memberikan pengaruh terhadap perasaan seseorang untuk membaca konten yang kita buat.
Ketika warna yang ditampilkan terasa tidak nyaman untuk dilihat, hal itu terkadang membuat pengunjung malas untuk membaca konten yang kita sajikan, akan tetapi ketika warna yang ditampilkan terasa indah dan nyaman untuk dilihat maka in sya aLLAH hal itu akan membuat pengunjung website kita semakin betah untuk membaca konten yang kita sajikan* dan bukan tidak mungkin hal itu juga akan semakin menambah jumlah pengunjung website kita.
Namun pada kesempatan kali ini saya tidak sedang ingin memberikan rekomendasi tentang warna apa yang bagus untuk digunakan dalam mengatur tampilan website anda, akan tetapi yang ingin saya bahas pada kesempatan kali ini adalah tentang macam-macam warna yang bisa kita gunakan dalam menghias sebuah website dengan menggunakan kode CSS.
Dalam CSS terdapat property yang digunakan untuk mengatur warna dari sebuah Tag atau Element HTML, seperti :
- color untuk mengatur warna tulisan
- background-color untuk mengatur warna background
- border-color untuk mengatur warna border
yang mana setiap property warna tersebut mengharuskan kita untuk mengisikan suatu nilai atau value berupa nilai warna. Nilai atau value yang bisa digunakan pada property ini bermacam-macam dan itu yang akan kita bahas kali ini.
Seperti biasa, sebelum kita mulai tutorialnya, pastikan bahwa teks editor dan browser anda bisa berfungsi dengan baik, dan silahkan buat sebuah folder di desktop anda dengan nama belajar_warna_css sebagai tempat file yang akan kita buat nanti. Jika sudah maka langsung saja kita masuk ke pembahasan.
MACAM-MACAM NILAI WARNA YANG BISA DIGUNAKAN DALAM KODE CSS
Ada beberapa macam nilai warna yang bisa kita gunakan dalam kode CSS, dan pada kesempatan kali ini saya akan menyebutkan dua macam saja terlebih dahulu sebagai pembukaan agar bisa lebih mudah untuk dipahami. Dua macam nilai warna tersebut yaitu :
1. Nama Warna
Nama dari suatu warna bisa digunakan sebagai nilai untuk property warna dalam kode CSS. Setidaknya ada 140 macam nama warna yang bisa kita gunakan sebagai nilai untuk property warna dalam kode CSS, diantaranya adalah "red", "green", "blue", "yellow", "white" dan lain sebagainya. Perhatikan penggunaan nama warna sebagai nilai atau value dalam kode dibawah ini :
<html>
<head>
<title>Mengatur warna dengan nilai RGB</title>
</head>
<body>
<style>
td {
font-size : 30px;
text-align : center;
color : white;
font-weight : bold;
}
.merah {
background-color : red;
}
.hijau {
background-color : green;
}
.biru {
background-color : blue;
}
.kuning {
background-color : yellow;
}
</style>
</head>
<table border="0" cellpadding="100px" align="center">
<tr>
<td class="merah"> Merah </td>
<td class="hijau"> hijau </td>
<td class="biru"> biru </td>
<td class="kuning"> kuning </td>
</tr>
</table>
</body>
</html>
Silahkan anda ketikkan atau copy-paste kode diatas kedalam teks editor anda, kemudian simpan didalam folder belajar_warna_css yang sudah dibuat tadi dengan nama css_color_name.html, lalu jalankan di browser, maka kira-kira hasilnya seperti ini :
Untuk nama-nama warna apa saja yang bisa digunakan, silahkan anda lihat pada tabel dibawah ini :
| AliceBlue | AntiqueWhite | Aqua | Aquamarine | Azure | Beige | Bisque |
| Black | BlanchedAlmond | Blue | BlueViolet | Brown | BurlyWood | CadetBlue |
| Chocolate | Coral | CornflowerBlue | Cornsilk | Crimson | Cyan | DarkBlue |
| DarkCyan | DarkGoldenRod | DarkGray | DarkGrey | DarkGreen | DarkKhaki | DarkMagenta |
| DarkOliveGreen | DarkOrange | DarkOrchid | DarkRed | DarkSalmon | DarkSeaGreen | DarkSlateBlue |
| DarkSlateGray | DarkSlateGrey | DarkTurquoise | DarkViolet | DeepPink | DeepSkyBlue | DimGray |
| DimGrey | DodgerBlue | FireBrick | FloralWhite | ForestGreen | Fuchsia | Gainsboro |
| GhostWhite | Gold | GoldenRod | Gray | Grey | Green | GreenYellow |
| HoneyDew | HotPink | IndianRed | Indigo | Ivory | Khaki | Lavender |
| LavenderBlush | LawnGreen | LemonChiffon | LightBlue | LightCoral | LightCyan | LightGoldenRodYellow |
| LightGray | LightGrey | LightGreen | LightPink | LightSalmon | LightSeaGreen | LightSkyBlue |
| LightSlateGray | LightSlateGrey | LightSteelBlue | Lime | LimeGreen | Magenta | Maroon |
| MediumAquaMarine | MediumBlue | MediumPurple | MediumSeaGreen | MediumSlateBlue | MediumSpringGreen | MediumAquaMarine |
| MediumTurquoise | MediumVioletRed | MidnightBlue | MintCream | MistyRose | Moccasin | NavajoWhite |
| Navy | OldLace | Olive | OliveDrab | Orange | OrangeRed | Navy |
| PaleGoldenRod | PaleGreen | PaleTurquoise | PaleVioletRed | PapayaWhip | PeachPuff | Peru |
| Pink | Plum | Purple | RebeccaPurple | Red | RosyBrown | RoyalBlue |
| SaddleBrown | Salmon | SandyBrown | SeaGreen | SeaShell | Sienna | Silver |
| Salmon | SkyBlue | SlateBlue | SlateGray | SlateGrey | Snow | SpringGreen |
| SteelBlue | Tan | Teal | Thistle | Tomato | Turquoise | Violet |
| Wheat | White | WhiteSmoke | Yellow | YellowGreen | Linen | Chartreuse |
| Orchid | ||||||
2. Nilai RGB
Red, Green dan Blue merupakan warna yang dijadikan acuan dalam pewarnaan model RGB yang mana ketiga warna tersebut dipadukan satu sama lain dengan suatu nilai tertentu dari masing-masing warna sehingga dapat menghasilkan berbagai macam warna yang lain. Penggunaan nilai warna dengan kode RGB pada CSS harus diawali dengan huruf rgb kemudian diikuti dengan nilai masing-masing warna yang diletakkan didalam tanda kurung dan dipisahkan dengan tanda koma, dan jika dirumuskan penulisannya adalah seperti ini :
rgb(red value, green value, blue value).
Masing-masing warna Red, Green, Blue memiliki nilai minimun yaitu 0 dan nilai maksimum yaitu 255. Untuk lebih jelasnya tentang penulisan dan penerapan nilai warna dengan model RGB ini silahkan anda perhatikan kode CSS dibawah ini :
.merah {
background-color : rgb(255,0,0);
}
.hijau {
background-color : rgb(0,255,0);
}
.biru {
background-color : rgb(0,0,255);
}
.kuning {
background-color : rgb(255,255,0);
}
Perpaduan dari nilai masing-masing warna tersebut akan menghasilkan berbagai macam warna baru yang mana hasil warna dari perpaduan nilai terendahnya yaitu rgb(0,0,0) adalah warna hitam dan hasil warna dari perpaduan nilai tertingginya yaitu rgb(255,255,255) adalah warna putih.
Pada class selector merah nilai warna red adalah 255, nilai warna green adalah 0, dan nilai warna blue adalah 0 yang itu berarti red memiliki nilai tinggi dan dipadukan dengan nilai terendah dari green dan blue yaitu 0 sehingga warna yang dihasilkan adalah warna merah karena green dan blue tidak memberikan pengaruh warna apapun (0 = tidak ada warna).
Adapun pada class selector kuning nilai red adalah 255, nilai green adalah 255 dan nilai blue adalah 0, lalu ketiga warna tersebut dipadukan. Karena red dan green memiliki nilai diatas 0 maka perpaduan warna ini akan menghasilkan warna baru, dan warna yang dihasilkan dari perpaduan 255 red + 255 green + 0 blue adalah yellow dengan nilai rgb(255,255,0).
Untuk bisa melihat hasil dari kode CSS diatas, mari kita coba terapkan pada kode cSS tersebut kedalam kode HTML dengan metode internal. Silahkan buka teks editor anda (buat file baru) lalu ketikkan atau copy-paste kode dibawah ini :
<html>
<head>
<title>Mengatur warna dengan nama warna</title>
<style>
td {
font-size : 30px;
text-align : center;
font-weight : bold;
}
.merah {
background-color : rgb(255,0,0);
}
.hijau {
background-color : rgb(0,255,0);
}
.biru {
background-color : rgb(0,0,255);
}
.kuning {
background-color : rgb(255,255,0);
}
</style>
</head>
<body>
<table border="0" cellpadding="100px" align="center">
<tr>
<td class="merah"> Merah </td>
<td class="hijau"> hijau </td>
<td class="biru"> biru </td>
<td class="kuning"> kuning </td>
</tr>
</table>
</body>
</html>
Kemudian simpan didalam folder belajar_warna_css yang sudah dibuat tadi dengan nama "css_rgb_color.html", lalu jalankan dibrowser, maka hasilnya kira-kira seperti ini :
Nah itulah dua macam nilai warna yang bisa kita gunakan sebagai nilai atau value pada property css yang berfungsi mengatur warna pada Tag atau Element HTML.
Bagaimana? Sangat mudah untuk dipahami bukan? Semakin menarik pembahasan kode CSSnya yah?
In sya aLLAH pada tutorial selanjutnya kita akan membahas nilai warna yang lain yang mana pada pembahasan nanti kita akan belajar membuat warna transparan. Silahkan klik Belajar Warna Dalam CSS Bagian Kedua untuk melanjutkan ke tutorial selanjutnya.
Semoga bermanfaat.