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 pengkodean warna yang paling banyak digunakan.

Anda mungkin pernah menemukan kode RGB dan heksadesimal di masa lalu, tetapi HSL, meskipun lebih dapat dibaca oleh manusia, mungkin belum ada di radar Anda. Setiap cara menulis warna masuk akal dalam situasi yang berbeda, dan semua yang Anda butuhkan adalah pemahaman dasar dari setiap jenis untuk membuat pilihan 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, hijauy Biru ada tiga warna yang dapat digunakan layar untuk menghasilkan hampir semua warna lainnya. Ini melakukan ini menggunakan "pencampuran warna aditif," tetapi Anda tidak perlu mempelajari pengetahuan itu untuk memahami RGB.

Model warna Rgba

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

Sederhana, ya, tapi itu tidak terlalu pintar. Keseimbangan RGB dapat berubah sedikit, bahkan jika hanya nada warna yang berubah, sehingga sangat sulit bagi manusia untuk melakukan penyesuaian manual tanpa semacam generator RGB (yang untungnya sangat banyak).

Apa itu kode warna heksadesimal?

Pola warna heksagonal transparan

Hex adalah cara penulisan nilai RGB yang berbeda. Sesuatu seperti # 6a79f7 (cornflower blue) memetakan langsung ke RGB (106, 121, 247). 6 adalah merah79 adalah hijaudan f7 adalah biru.

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

Model Warna Meja Segi Enam

Meskipun matematika itu menyenangkan, itu pasti membuat kode heksadesimal bahkan lebih menyakitkan bagi manusia daripada RGB, meskipun faktanya kombinasi huruf dan angka yang mengesankan mudah untuk disalin dan ditempel.

Anda juga dapat menambahkan transparansi ke kode hex dengan meletakkan nilai yang setara dengan persentase 255 di awal, seperti: # 806a79f7. 80 dalam heksadesimal = 126, yaitu sekitar 50% dari nilai maksimum 255.

Apa itu HSL (Hue, Saturation, Lightness)

Model warna HSL

HSL kurang lebih dirancang untuk keterbacaan manusia, dan menjadi semakin populer, terutama sebagai alternatif untuk RGB. Ini berfungsi seperti ini:

Warna singkatan warna, dan menggunakan grade pada roda warna untuk memberi tahu Anda apa warna yang dia kenakan. 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 sejenak.

Roda warna RGB

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

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

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

Model warna hsla

Dengan informasi itu, Anda harus dapat segera mengetahui apa hsl (0, 100%, 50%). Merah saja! Apakah Anda ingin merah yang lebih gelap dan lebih kaya? Cobalah 0, 70%, 40%. Mungkin Anda menginginkannya, tetapi dengan warna biru? Ubah 0 hingga 240 dan Anda memilikinya! Ini juga memiliki transparansi: berfungsi seperti RGB: cukup tambahkan nilai keempat (antara 0 dan 1), seperti: hsla (240, 70%, 40%, 5)

HSV / HSB dan HSI

Model warna Hsv

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 yang paling umum untuk membedakan warna. Namun, jika Anda berada di bidang yang melibatkan banyak gambar dan warna, seperti desain grafis atau pembelajaran mesin gambar, Anda dapat bertemu orang-orang yang 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 HSV singkatan dari Hue Saturation Value. Sebenarnya, mereka hanya nama yang berbeda untuk model yang sama, dan perbedaan terbesar mereka dengan HSL adalah bagaimana mereka mendefinisikan saturasi. HSI (Hue Saturation Intensity) memiliki beberapa perbedaan kecil dari HSB / HSV, tetapi tidak banyak digunakan sehingga Anda mungkin tidak akan sering melihatnya di alam liar.

Model warna apa yang harus saya gunakan?

Secara umum, memilih model warna adalah keputusan desain yang cukup kecil, tetapi hal-hal baik dibuat dengan banyak keputusan kecil. Secara umum, kode heksadesimal memudahkan penyalinan dan baik dalam situasi di mana manusia mungkin tidak terlalu terlibat. RGB / RGBA layak dibaca dan paling baik digunakan jika akan lebih baik jika manusia terkadang dapat mengubah transparansi. Jika manusia perlu mengubah warna secara manual, gunakan HSL / HSLA. Juga, ini lebih merupakan masalah preferensi, meskipun orang-orang di tim HSL cenderung lebih pintar dan terlihat lebih baik.

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

Apakah artikel ini membantu? Ya Tidak

Pos terkait

Back to top button