Kode Warna: Apa Perbedaan Antara Hex, RGB, dan HSL?

Ketika sampai pada percikan warna pada layar, ada beberapa cara untuk melakukannya dengan pengkodean. Hex, RGBA, dan HSLA adalah tiga dari sistem kode warna yang paling umum digunakan.

Anda mungkin pernah menemukan kode hex dan RGB di masa lalu, tetapi HSL, meskipun lebih dapat dibaca oleh manusia, mungkin belum ada di radar Anda. Setiap cara menuliskan warna masuk akal dalam situasi yang berbeda, dan semua yang Anda butuhkan adalah pemahaman dasar dari setiap jenis untuk membuat keputusan yang tepat. Di sini kami akan menjelaskan perbedaan antara RGB, HEX dan HSL.

Apa itu RGB (Merah, Hijau, Biru)

Masuk akal untuk memulai dengan nilai RGB, karena Merah, hijau, dan Biru adalah tiga warna yang dapat digunakan layar untuk menghasilkan hampir semua warna lainnya. Ini melakukan ini menggunakan "pencampuran warna aditif," tetapi Anda tidak perlu mempelajari ilmu itu untuk memahami RGB.

rgb (255, 0, 0) berwarna merah, karena R dimaksimalkan. Jika Anda mengatur G atau B ke 255, Anda akan mendapatkan warna hijau penuh atau biru penuh. Atur semuanya menjadi 255 sekaligus dan Anda akan mendapatkan warna putih (jumlah semua warna), sementara mem-nolkannya menjadi hitam. Jika Anda menambahkan nilai keempat (saluran alfa, antara 0 hingga 1) Anda juga bisa mendapatkan transparansi: rgba (0, 0, 0, .5) diterjemahkan menjadi hitam setengah transparan.

Sederhana, ya, tapi sebenarnya tidak sepintar itu. Keseimbangan RGB dapat berubah sedikit meskipun Anda hanya mengubah naungan warna, sehingga sangat sulit bagi manusia untuk melakukan penyesuaian manual tanpa semacam generator RGB (yang untungnya, ada banyak).

Apa kode warna heksadesimal

Hex adalah cara penulisan nilai RGB yang berbeda. Sesuatu seperti # 6a79f7 (cornflower blue) memetakan langsung ke rgb (106, 121, 247). 6a adalah merah, 79 adalah hijau, dan f7 adalah biru.

Pertama, Anda harus tahu bahwa dalam sistem warna hex huruf "a-f" mewakili angka sepuluh hingga lima belas. Kedua, itu heksadesimal, artinya semuanya ada di basis 16. 21 adalah 2 * 10 + 1 di basis 10, tetapi dalam heksadesimal itu akan menjadi 2 * 16 + 1. Kalikan saja angka pertama dengan 16 dan tambahkan angka kedua – itu seperti semudah itu! 6a = 6 * 16 + 10 atau 106. 79 = 7 * 16 + 9 atau 121.

Walaupun matematika itu menyenangkan, itu jelas membuat kode heksadesimal bahkan lebih menyakitkan bagi manusia daripada RGB, meskipun mereka mudah untuk menyalin dan menempelkan kombinasi huruf / angka yang mengesankan.

Anda juga dapat menambahkan transparansi ke kode hex dengan meletakkan nilai yang setara dengan beberapa persentase 255 di awal, seperti: # 806a79f7. 80 dalam heksadesimal = 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:

Warna berarti warna, dan ia menggunakan derajat roda warna untuk memberi tahu Anda warna apa yang sedang Anda pakai. Jika Anda tahu roda warna dan posisi warna-warna utama ini, Anda harus dapat mengatakan bahwa 45 akan terlihat oranye dan 270 akan terlihat ungu hanya dengan memikirkannya sebentar.

0 = red60 = yellow120 = green180 = cyan240 = blue300 = magenta

Kejenuhan pada dasarnya bagaimana warna-warni warnanya. Saturasi 0% berarti warna hanya akan menjadi abu-abu, sedangkan 100% berarti akan menunjukkan kekuatan penuh. Jika Anda ingin membisukan warna Anda atau membuatnya sedikit lebih pop, Anda bisa mengubah nilai ini.

Keringanan memberitahu Anda seberapa gelap atau cerah warnanya. 0% lightness berarti warna Anda akan hitam, terlepas dari pengaturan Hue atau Saturation, dan 100% lightness membuat Anda putih. Seperti yang sudah Anda duga, 50% memberi Anda warna paling akurat.

Dengan informasi itu, Anda harus dapat langsung tahu apa arti hsl (0, 100%, 50%). Hanya merah! Ingin yang lebih gelap, lebih kaya merah? Coba 0, 70%, 40%. Mungkin Anda menginginkannya, tetapi dengan warna biru? Ubah saja 0 hingga 240 dan Anda sudah mendapatkannya! Ini memiliki transparansi juga – ini berfungsi seperti RGB: tambahkan saja nilai keempat (antara 0 dan 1), seperti: hsla (240, 70%, 40%, .5).

HSV / HSB dan HSI

Apa? Lebih banyak model warna? Kapan ini berakhir? 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. Namun, jika Anda berada di bidang yang melibatkan banyak gambar dan warna, seperti desain grafis atau pembelajaran mesin pada gambar, Anda 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 Anda tidak akan sering melihatnya di alam liar.

Model warna apa yang harus saya gunakan?

Umumnya, memilih model warna adalah keputusan desain yang cukup kecil, tetapi hal-hal baik dibuat dengan banyak keputusan kecil. Secara umum, kode heks memudahkan penyalinan salinan dan bagus dalam situasi di mana manusia mungkin tidak akan banyak terlibat. RGB / RGBA layak untuk dibaca dan paling baik digunakan ketika akan lebih baik jika manusia kadang-kadang bisa mengubah transparansi. Jika seorang manusia perlu mengubah warna secara manual, gunakan HSL / HSLA. Selain itu, ini lebih merupakan masalah preferensi, meskipun orang-orang di tim HSL cenderung lebih pintar dan berpenampilan lebih baik.

Kredit gambar: Warna Solid Silinder HSL Saturasi Abu-abu, Warna Aditif, Bagan Warna XTerm, HSL dan HSV, Munsell 1943

Apakah artikel ini bermanfaat? Ya Tidak