Untuk desainer web warna merupakan salah satu bagian paling penting agar web yang kita buat tambah menarik dan nyaman dibaca pengunjung.
Sejujurnya, sampai detik ini Maya termasuk yang tidak mahir dalam pemilihan warna dan kombinasi warna.
Terlepas dari itu, pemilihan warna dalam membuat web adalah penting dan membutuhkan jiwa seni yang lumayan, gak kaya Maya yang jiwa seninya relative rendah, haha.
Penggunaan warna dalam HTML
Warna dalam HTML bisa digunakan dalam berbagai hal pada elemen, misalnya warna background, warna tulisan atau teks, dan warna border.
Karena pembuat HTML itu orang luar negri, makanya tag pemanggilan warnanya menggunakan Bahasa inggris.
Untuk memanggil warna menggunakan nama panggilan “color” yang berarti kolor, eh warna, maksudnya. 😀
Sehingga dalam attribute Style HTML maupun css panggilannya sama, misalnya: untuk background warna, dipanggil: background-color, untuk warna text, cukup color, saja. Untuk border juga tinggal panggil: border-color.
Sedangkan nilai dari color itu bisa menggunakan macam-macam, bisa menggunakan nama warnanya langsung, atau kode RGB maupun Kode Hex.
Kita akan bahas satu-satu ketiga nilai dari color tersebut.
Berbagai cara memanggil nilai warna dalam HTML dan CSS
1. Menggunakan nama warna
Kita tahu bahwa seluruh warna di dunia ini sebenarnya memiliki nama masing-masing, sayangnya semua nama yang digunakan menggunakan nama bahasa inggris.
Seperti black (hitam), white (putih), red (merah), blue (biru), green (hijau), dan lain-lain.
Dari jutaan warna tersebut, hampir mustahil kita hafalin semua. La wong, nama satu kelas aja kita kadang lupa. Maka untuk menghafal kita cari referensi Kode Warna CSS.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML bersama Maya - Nama Warna</title>
</head>
<body>
<p style="color: red">Paragraf dengan warna red (merah)</p>
<h style="color: blue">Heading dengan warna blue (biru)</p>
<p style="background-color: green">Paragraf dengan background warna green (hijau)</p>
<p style="border: 1px solid; border-color: black">Paragraf dengan border berukuran 1 pixel dengan warna border hitam</p>
</body>
</html>
Hasil:
Paragraf dengan warna red (merah)
Paragraf dengan background warna green (hijau)
Paragraf dengan border berukuran 1 pixel dengan warna border hitam
Menggunakan Kode RGB
RGB, adalah satu model warna yang terdiri dari kombinasi tiga warna, yaitu: Red (merah), Green (hijau) dan Blue (biru)
Jumlah intensitas dari 3 kombinasi warna inilah yang melahirkan jutaan warna seantero jagad raya.
Nilai intensitas dihitung mulai dari 0 yang paling rendah, dan 255 paling tinggi.
Artinya nilai setiap warna red bisa 0 – 255, green juga 0 – 255, dan begitu juga dengan nilai blue 0 – 255.
Warna putih, jika nilai intensitas semua warna 255, atau paling tiggi, maka kode warna untuk putih adalah red-nya 255, green 255 dan blue juga 255.
Jika nilai intensitas red 0, green dan blue juga 0, maka lahirlah warna hitam, alias black.
Jika intensitas red 255, green dan blue 0, maka lahir warna merah karena yang lain memiliki nilai intensitas nol, dan begitu seterusnya.
Cara menggunakannya dengan cara menulis RGB (255,255,255) setiap nilai dipisah dengan koma (,). artinya: ini, warna RGB, nilainya (R: 255, G: 255 dan B: 255). kurang lebih begitu.
Biar lebih mudah kita contohkan saja dengan contoh seperti diatas.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML bersama Maya - Kode Warna RGB</title>
</head>
<body>
<p style="color: rgb(255,0,0)">Paragraf dengan warna red (merah)</p>
<h style="color: rgb(0,0,255)">Heading dengan warna blue (biru)</p>
<p style="background-color: rgb(0,255,0)">Paragraf dengan background warna green (hijau)</p>
<p style="border: 1px solid; border-color: rgb(0,0,0)">Paragraf dengan border berukuran 1 pixel dengan warna border hitam</p>
</body>
</html>
Hasilnya akan sama dengan diatas:
Paragraf dengan warna red (merah)
Paragraf dengan background warna green (hijau)
Paragraf dengan border berukuran 1 pixel dengan warna border hitam
Menggunakan Kode Heksadesimal
Heksadesimal atau hexadecimal dan biasanya panggilan sayangnya menjadi Hex atau hex code, atau apapun itu.
Intinya bahwa kode warna hex ini dapat juga digunakan untuk memanggil warna dalam HTML maupun CSS.
Kode Hex wajib diawali dengan tanda pagar, atau hashtag (#) baru diikuti 6 kode warna yang juga memiliki arti RGB juga, penulisannya: #RRGGBB alias red red green green dan blue blue.
Maksudnya setiap warna RGB dalam Hex memiliki 2 nilai.
Nilai dari kode hex ini antara 00 sebagai terendah dan ff nilai tertinggi, sama dengan nilai 0 terandah dan 255 tertinggi jika kita menggunakan kode warna RGB yang tadi kita obrolkan.
Artinya, jika ingin menghasilkan warna hitam, maka nilai rr, gg, dan bb juga harus 00 (nol), maka kode warna hitam adalah #000000 (jangan lupa tanda pagar)
Begitu juga dengan putih, untuk menghasilkan warna putih, maka semuanya harus bernilai tertinggi, alias FF, maka kodenya #ffffff (jangan lupa tanda pagar)
Kalau mau warna merah? Maka nilai rr-nya harus tertinggi maka kode warna merah: #ff0000, kalau hijau alias green? #00ff00 kalau warna biru? #0000ff
Contoh Penggunaan:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML bersama Maya - Kode warna HEX</title>
</head>
<body>
<p style="color: #ff0000">Paragraf dengan warna red (merah)</p>
<h style="color: #0000ff">Heading dengan warna blue (biru)</p>
<p style="background-color: #00ff00">Paragraf dengan background warna green (hijau)</p>
<p style="border: 1px solid; border-color: #000000">Paragraf dengan border berukuran 1 pixel dengan warna border hitam</p>
</body>
</html>
Hasilnya tentu akan sama warnanya, coba kita lihat:
Paragraf dengan warna red (merah)
Paragraf dengan background warna green (hijau)
Paragraf dengan border berukuran 1 pixel dengan warna border hitam
Selain tiga cara tadi, ad acara lain seperti HSL, yaitu Hue, Saturation, Lightness, itu makin rumit saja, dengan 3 cara ini saja, Maya kira cukup bagi kita membuat satu website utuh.
Semua tergantung kebiasaan, yang penting adalah bagaimana kita membuat satu website yang menarik dengan kombinasi warna yang baik.
Maya sudah buatkan satu konten khusus Kode Warna CSS. Sudah ada nama warna, kode hex dan juga kode RGB-nya, karena tidak mungkin kita menghafal seluruh kode warna tersebut, copas aja copas kawan!.
Selamat berlatih menggunakan warna-warna kesukaan kawan Maya.
