Cara Membuat Website Atau Blog Pada Tahun 2020 - Panduan Gratis Dan Mudah Untuk Membangun Website

Kode warna: Apa perbedaan antara Hex, RGB dan HSL?

Ketika datang ke 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, walaupun lebih dapat dibaca 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 masing-masing jenis untuk membuat keputusan yang tepat. Di sini kami akan menjelaskan perbedaan antara RGB, HEX dan HSL.

Apa itu RGB (merah, hijau, biru)

Model warna RGB

Masuk akal untuk memulai dengan nilai RGB, karena Merah, hijaudan biru Ada tiga warna yang dapat digunakan kanvas untuk menghasilkan hampir semua warna lainnya. Ini dilakukan melalui “pencampuran warna tambahan”, tetapi Anda tidak perlu mempelajari pengetahuan ini 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 berfokus pada hitam. Jika Anda menambahkan nilai keempat (saluran alfa, masukkan 0 ke 1) Anda juga bisa mendapatkan transparansi: rgba (0, 0, 0, .5) diterjemahkan menjadi media transparan hitam.

Sederhana, ya, tapi tidak sepintar itu. 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, ada banyak).

Apa itu kode warna heksadesimal?

Pola warna heksagonal mulus

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 “af” mewakili angka dari sepuluh hingga lima belas. Kedua, heksadesimal, yang berarti bahwa semuanya ada di bagian bawah. 16. 21 adalah 2 * 10+ 1 di basis 10, tetapi hex akan menjadi 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 tabel heksagonal

Walaupun matematika itu menyenangkan, itu pasti membuat kode heksadesimal bahkan lebih menyakitkan bagi manusia daripada RGB, meskipun kombinasi huruf dan angka yang mengagumkan mudah untuk disalin dan ditempelkan.

Anda juga dapat menambahkan transparansi ke kode heksadesimal 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 dari RGB. Ini berfungsi seperti ini:

Warna singkatan warna dan menggunakan catatan pada roda warna untuk menunjukkan warna apa yang dikenakannya. Jika Anda tahu roda warna dan posisi warna-warna utama ini, Anda harus tahu bahwa 45 warna oranye dan 270 warna ungu hanya untuk sesaat.

Roda warna RGB

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

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

Bantuan memberitahu Anda seberapa gelap atau cerah warnanya. Kecerahan 0% berarti warnanya akan hitam terlepas dari pengaturan Hue atau Saturation, dan kecerahan 100% menjadikannya putih. Seperti yang sudah Anda duga, 50% memberikan warna paling akurat.

Model warna hsla

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

HSV / HSB dan HSI

Model warna Hsv

Dari apa? Lebih banyak model warna? Kapan itu 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 yang menggunakan salah satu dari model warna yang lebih esoteris ini atau bahkan salah satu dari yang lain yang tidak. membuat. tercantum di sini. .

HSB singkatan dari “Hue Saturation Brightness” dan HSV singkatan dari Hue Saturation Value. Bahkan, mereka hanya nama yang berbeda untuk model yang sama, dan perbedaan terbesar untuk HSL adalah bagaimana mereka mendefinisikan saturasi. HSI (Hue Saturation Intensity) memiliki sedikit perbedaan dari HSB / HSV, tetapi tidak banyak digunakan, jadi Anda mungkin tidak akan sering melihatnya di alam.

Model warna apa yang harus saya gunakan?

Secara umum, memilih model warna adalah keputusan desain yang sangat kecil, tetapi hal-hal baik dilakukan 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 digunakan terbaik jika akan lebih baik jika manusia terkadang 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 lebih menarik.

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

Apakah menurut Anda artikel ini bermanfaat? Jika tidak