Postingan AneIqbal kali ini akan membahas bagaimana cara pewarnaan dengan color names, RGA, RGBA, dan HEX Color. Itu semua bagian dari CSS. Simak pembahasan selengkapnya berikut ini.
Color Names
Color names merupakan metode pewarnaan elemen HTML dengan mengetik nama warna tersebut. Misalnya, kita ingin memberi warna biru pada elemen h1, maka pada kode CSS jadi seperti ini kodenya:
h1 {
color: blue;
}Ada 16 warna standar, yaitu aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow. Bila ingin nama warna yang lain, bisa dilihat di: https://www.w3.org/TR/css3-color/#svg-color.
RGB dan RGBA
Metode RGB Color merupakan metode pewarnaan berdasarkan penambahan kuat cahaya warna primer, yaitu Red, Green dan Blue.
Kuat cahaya ketiga warna tersebut direpresentasikan/dinilaikan dengan angka.
Nilai kuat cahaya yang diberikan pada warna Red, Green dan Blue berkisar antara 0 hingga 255 dengan 0 adalah nilai minimum dan 255 adalah nilai maksimum.
Nilai kuat cahaya juga dapat dinilaikan dengan presentase, 100% senilai dengan 255 dan 0% senilai dengan 0.
The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue. -Wikipedia
Bila kita memberi nilai red, green dan blue 0, maka yang tercipta adalah warna hitam karena nilai kuat cahayanya minimum.
Sebaliknya bila kita beri nilai 255, maka yang tercipta adalah warna putih karena nilai kuat cahanya maksimum.
Misalnya kita ingin memberi warna elemen p dengan warna merah, kode CSSnya seperti ini:
p {
color: rgb(255,0,0);
}RGBA Color hampir serupa dengan RGB Color, bedanya adalah pada huruf A singkatan dari Alpha yang berfungsi untuk mengatur ketajaman dari suatu warna. Dinilaikan dengan angka 0 hingga 1.
Bila diberi nilai 1, ketajaman warna serupa dengan warna aslinya. Semakin rendah angkanya, warna akan lebih transparan.
Penulisan kode cssnya, hampir serupa pula. Hanya menambahkan huruf a dibelakang rgb dan nilai yang ingin diberi diletakkan setelah nilai warna biru.
p {
color: rgba(255,0,0,0.5);
}Ketiga warna primer tersebut memiliki 256 tingkat (nilai 0 hingga 255) sehingga warna yang dapat dibentuk dari ketiga warna tersebut berjumlah 16.777.216 warna.
HEX Color
Terdapat 3 warna primary color, yaitu red (merah), green (hijau) dan blue (biru).
Ketiga warna tersebut direpresentasikan/dinilaikan dengan menggunakan hex code (sistem 16) yang terdiri dari 10 angka pertama menggunakan angka 0 hingga 9 dan 6 angka selanjutnya menggunakan huruf a hingga f.
Kuantitas warna red green blue berkisar antara 0 hingga 255 dengan 0 adalah nilai minimum dan 255 adalah nilai maksimum.
Bila dikonversikan ke hex code, 0 tetap dinilaikan dengan 0 sedangkan 255 dinilaikan dengan ff.
Hex code terdiri dari 6 digit, 2 digit pertama untuk red, 2 digit kedua untuk green dan 2 digit terakhir untuk blue.
Misalnya kita ingin memberi warna merah, maka kode hexnya adalah ff0000. Karena dengan memaksimalkan nilai red dan meminimalkan nilai green dan blue maka yang tercipta adalah warna merah.
Misalnya kita ingin memberi warna hijau pada elemen h1, maka kode cssnya seperti ini:
h1 {
color: #00ff00;
}Pemberian warna dengan hex code dimulai dengan tanda tagar (#) sebelum code hexnya. Contohnya, warna merah = #ff0000 hijau = #00ff00 dan biru = #0000ff.
Dengan banyaknya kombinasi hex code yang dapat digunakan, warna yang dapat tercipta juga banyak.
