Kode Warna: Apa Perbedaan Antara RGB, Hex dan HSL?
Apa Perbedaan Antara RGB, Hex dan HSL? | Ketika sampai pada percikan warna pada layar, ada beberapa cara untuk melakukannya dengan peng-kode-an. Hex, RGBA, dan HSLA adalah tiga dari sistem kode warna yang paling umum digunakan.
Selama ini, Agan mungkin pernah menemukan kode hex dan RGB, tetapi HSL, meskipun lebih dapat dibaca, mungkin belum ada di radar Agan. Setiap cara penulisan warna bisa masuk akal dalam situasi yang berbeda, dan semua yang Agan butuhkan adalah pemahaman dasar dari setiap jenis untuk membuat keputusan. Di sini saya akan menjelaskan perbedaan antara RGB, HEX dan HSL.
Apa itu RGB (Red, Green, Blue)?
Masuk akal untuk memulai dengan nilai-nilai RGB, karena Red, Green, dan Blue adalah tiga warna yang dapat digunakan layar untuk menghasilkan hampir semua warna lainnya. Ini dilakukan dengan menggunakan "pencampuran warna aditif," tetapi Agan tidak perlu mempelajari ilmu itu untuk memahami RGB.
rgb(255, 0, 0)berwarna merah, karena R dimaksimalkan. Jika Agan mengatur G atau B ke 255, Agan akan mendapatkan warna hijau penuh atau biru penuh. Atur semuanya ke 255 sekaligus dan Agan akan mendapatkan warna putih (jumlah semua warna), sementara mem-nolkannya menjadikannya hitam. Jika Agan menambahkan nilai keempat (saluran alfa, antara 0 hingga 1) Agan juga bisa mendapatkan transparansi: rgba(0, 0, 0, .5)diterjemahkan menjadi hitam setengah transparan.
Sederhana, ya, tapi sebenarnya tidak begitu intuitif. Keseimbangan RGB dapat berubah sedikit bahkan jika Agan hanya mengubah naungan warna, sehingga sangat sulit bagi manusia untuk membuat penyesuaian manual tanpa semacam generator RGB.
Apa itu kode warna Hexadecimal?
Hex adalah cara penulisan nilai RGB yang berbeda. Sesuatu seperti #6a79f7(cornflower blue) memetakan langsung ke rgb(106, 121, 247). 6a adalah red , 79 adalah green, dan f7 adalah blue.
Pertama, Agan harus tahu bahwa dalam sistem warna hex, huruf "af" mewakili angka sepuluh hingga lima belas. Kedua, Hexadecimal artinya semuanya ada di basis 16.21 berada 2 * 10 + 1 di basis 10, tetapi dalam Hexadecimal itu menjadi 2 * 16 + 1. Cukup gandakan angka pertama dengan 16 dan tambahkan angka kedua - semudah itu! 6a = 6 * 16 + 10atau 106. 79 = 7 * 16 + 9atau 121.
Walaupun matematika itu menyenangkan, itu jelas membuat kode Hexadecimal bahkan lebih menyebalkan bagi seseorang daripada RGB, meskipun mereka mudah disalin-tempel dan dapat memiliki kombinasi huruf / angka yang mengesankan.
Agan juga dapat menambahkan transparansi ke kode hex dengan menempatkan nilai setara dengan beberapa persentase dari 255 di awal, seperti: #806a79f7. 80 dalam Hexadecimal = 126, yang mendekati 50% dari nilai maksimum 255.
Apa itu HSL (Hue, Saturation, Lightness)
HSL cukup banyak dirancang untuk keterbacaan manusia, dan itu semakin populer, terutama sebagai alternatif RGB. Ini berfungsi seperti ini:
Hue berarti warna, dan ia menggunakan derajat roda warna untuk memberi tahu Agan warna apa yang sedang Agan pakai. Jika Agan tahu roda warna dan posisi warna-warna utama ini, Agan harus dapat mengatakan bahwa 45 akan terlihat oranye dan 270 akan terlihat ungu hanya dengan memikirkannya sebentar.
- 0 = red
- 60 = yellow
- 120 = green
- 180 = cyan
- 240 = blue
- 300 = magenta
Saturation pada dasarnya adalah bagaimana warna-warni warnanya. Saturasi 0% berarti warna akan menjadi abu-abu, sementara 100% berarti akan menunjukkan kekuatan penuh. Jika Agan ingin membisukan warna Agan atau membuatnya sedikit lebih pop, Agan bisa mengubah nilai ini.
Lightness memberi tahu Agan seberapa gelap atau cerah warnanya. 0% lightness berarti warna Agan akan hitam, terlepas dari pengaturan Hue atau Saturation, dan 100% lightness membuat warna Agan putih. Seperti yang sudah Agan duga, 50% memberi Agan warna paling akurat.
Dengan informasi itu, Agan harus bisa langsung tahu apa artinya hsl(0, 100%, 50%). Warnanya merah! Ingin yang lebih gelap, lebih kaya merah? Coba 0, 70%, 40%. Mungkin Agan menginginkannya, tetapi dengan warna biru? Ubah saja 0 hingga 240. HSL ini memiliki warna transparansi, juga - sama seperti RGB: hanya menambahkan nilai keempat (antara 0 dan 1), seperti: hsla(240, 70%, 40%, .5).
HSV / HSB dan HSI
Apa HSV / HSB dan HSI itu? Lebih banyak model warna? Bagi kebanyakan orang yang bekerja dengan warna pada komputer, ini sudah berakhir. Hex, RGB, dan HSL sejauh ini merupakan cara paling umum untuk memberi tahu warna. Jika Agan berada di bidang yang melibatkan banyak gambar dan warna, seperti desain grafis atau pembelajaran mesin pada gambar, Agan dapat bertemu orang menggunakan salah satu dari model warna yang lebih esoteris ini, atau bahkan salah satu dari yang lain yang tidak tercantum di sini.
HSB singkatan dari "Hue Saturation Brightness" dan HSVs singkatan dari Hue Saturation Value. Mereka sebenarnya hanya nama yang berbeda untuk model yang sama, dan perbedaan terbesar mereka dari HSL adalah bagaimana mereka mendefinisikan saturasi. HSI (Hue Saturation Intensity) memiliki beberapa perbedaan kecil dari HSB / HSV, tetapi tidak banyak digunakan, jadi kemungkinan besar Agan tidak akan terlalu sering melihatnya.
Model warna apa yang harus saya gunakan?
Secara umum, kode hex memudahkan copy-paste dan bagus dalam situasi di mana kita mungkin tidak akan banyak terlibat. RGB / RGBA layak untuk dibaca dan paling baik digunakan ketika kadang-kadang kita butuh warna transparansi. Jika kita perlu mengubah warna secara manual, gunakan HSL / HSLA.
Yuk kepoin tips dan trik brankaspedia lainnya di Google News.