Warna pada CSS dan Cara Penggunaan Warna Pada CSS
Dalam desain web, warna merupakan komponen penting. Tanpa warna maka desain web akan sia-sia. Pemilihan warna yang cocok tentu juga mempengaruhi bagus atau tidaknya desain web.
Dengan CSS kalian dapat menentukan warna baik warna latar belakang (background) atau warna teks. Pada pemrograman komputer, pewarnaan dilakukan dengan menggunakan kode (kode warna). Bagi Kalian yang sudah terbiasa dengan desain di komputer, pasti juga sudah familiar dengan beberapa kode seperti #92a8d1 dan #ff0000. Kedua kode warna tersebut merupakan kode warna hexadecimal.
Warna pada CSS ditentukan menggunakan Nama Warna yang telah ditentukan, atau nilai RGB, HEX, HSL, RGBA, HSLA.
Menggunakan Nama Warna pada CSS
Pada CSS warna dapat ditentukan dengan nama warna seperti Tomato, Orange, Gray, LightGray, Blue, Green dan lain sebagainya.
Contoh Penggunakan Nama Warna pada CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Latihan CSS Color (Warna) Bersama SolusiLain.Com</title> </head> <body> <h1>Mencoba Menerapkan Warna CSS dengan Nama Warna</h1> <hr> <h3 style="background-color: tomato">Tomato</h3> <h3 style="background-color: orange">Orange</h3> <h3 style="background-color: gray">Gray</h3> <h3 style="background-color: lightgray">LightGray</h3> <h3 style="background-color: blue">Blue</h3> <h3 style="background-color: green">Green</h3> </body> </html> |
Kode HTML di atas saya contohkan menggunakan metode inline CSS dengan atribut style seperti pada baris <h3 style="background-color: tomato">Tomato</h3> . Namun pada dasarnya dapat diterapkan dengan metode yang lain baik Internal Style Sheet, ataupun External Style Sheet. Adapun hasil dari contoh kode di atas dapat kalian lihat seperti pada gambar di bawah ini.
Hasil Penerapan Warna CSS dengan Nama Warna
Menggunakan Nilai Warna Pada CSS
Selain menggunakan Nama Warna, pada CSS, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA.
Contoh Penggunaan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Latihan CSS Color (Warna) Bersama SolusiLain.Com</title> </head> <body> <h1>Mencoba Menerapkan Warna CSS dengan Nilai Warna</h1> <hr> <h1 style="background-color:rgb(255, 99, 71);">Contoh Penggunaan rgb(255, 99, 71)</h1> <h1 style="background-color:#ff6347;">Contoh Penggunaan #ff6347</h1> <h1 style="background-color:hsl(9, 100%, 64%);">Contoh Penggunaan hsl(9, 100%, 64%)</h1> <p>Sama seperti nama warna "Tomato", dengan transparansi 50%:</p> <h1 style="background-color:rgba(255, 99, 71, 0.5);">Contoh Penggunaan rgba(255, 99, 71, 0.5)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">Contoh Penggunaan hsla(9, 100%, 64%, 0.5)</h1> </body> </html> |
Hasil dari contoh Penggunaan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA.
Hasil Penerapan Warna CSS dengan Nilai Warna
Demikian Tutorial tentang Warna pada CSS dan Cara Penggunaan Warna Pada CSS. Kalian dapat mencoba dengan warna-warna lainnya. Pembahasan lebih detail tentang Nilai Warna (nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA), insyaAllah akan dibahas pada tutorial berikutnya.
Salam…
