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

Ketika datang ke percikan warna di layar, ada beberapa cara untuk melakukannya dengan penyandian. 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 mudah dibaca oleh manusia, mungkin belum ada di radar Anda. Setiap ejaan warna masuk akal dalam situasi yang berbeda, dan yang Anda butuhkan hanyalah pemahaman dasar masing-masing untuk membuat pilihan yang tepat. Disini kami akan menjelaskan perbedaan antara RGB, HEX dan HSL.

Apa itu RGB (merah, hijau, biru)

Masuk akal untuk memulai dengan nilai RGB, karena Merah, hijaudan biru Ada tiga warna yang dapat digunakan monitor untuk menghasilkan sebagian besar warna lain. Ini dilakukan dengan menggunakan “pencampuran warna aditif”, tetapi Anda tidak perlu mempelajari pengetahuan itu untuk memahami RGB.

rgb(255, 0, 0) berwarna merah, karena R dimaksimalkan. Jika Anda menyetel G atau B ke 255, Anda akan mendapatkan warna hijau atau biru penuh. Atur semuanya menjadi 255 sekaligus dan Anda akan mendapatkan warna putih (jumlah dari semua warna), sementara tidak ada warna hitam. Jika Anda menambahkan nilai keempat (saluran alfa, masukkan 0 hingga 1) Anda juga bisa mendapatkan transparansi: rgba(0, 0, 0.5) diterjemahkan menjadi hitam transparan sedang.

Sederhana, ya, tapi tidak terlalu pintar. Keseimbangan RGB dapat sedikit bervariasi, meskipun hanya nada yang berubah, sehingga sangat sulit bagi manusia untuk menyesuaikan secara manual tanpa semacam generator RGB (untungnya ada banyak).

Apa itu kode warna heksadesimal?

Hex adalah cara berbeda untuk menulis nilai RGB. Sesuatu seperti #6a79f7 (biru bunga jagung) memetakan langsung ke RGB (106, 121, 247). Jumat adalah Merah79 adalah hijaudan f7 adalah biru.

Pertama, Anda harus tahu bahwa dalam sistem warna Heksadesimal, huruf “af” mewakili angka sepuluh hingga lima belas. Kedua, ini adalah heksadesimal, yang berarti semuanya ada di akar. 16. 21 adalah 2 * 10+ 1 dalam basis 10, tetapi heksadesimal akan dikonversi menjadi 2 * * 16 + 1. Cukup kalikan angka pertama dengan 16 dan tambahkan yang kedua, mudah! 6a = 6 * * 16 + 10 atau 106. 79 = 7 * * 16 + 9 atau 121.

Meskipun matematika itu menyenangkan, tentu saja membuat kode hex lebih menyakitkan bagi manusia daripada RGB, meskipun mereka mudah untuk menyalin dan menempelkan kombinasi alfanumerik yang hebat.

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

Apa itu HSL (Hue, Saturation, Lightness)

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

Warna mewakili warna, dan menggunakan skor pada roda warna untuk memberi tahu Anda warna apa yang dia kenakan. Jika Anda mengetahui roda warna dan di mana warna primer ini berada, Anda seharusnya dapat mengetahui bahwa 45 akan berwarna oranye dan 270 akan berwarna ungu hanya dengan memikirkannya sejenak.

0 = merah60 = kuning120 = hijau180 = cyan240 = hijau300 = magenta

Kejenuhan pokoknya suka warnanya. Saturasi 0% berarti warna hanya akan menjadi abu-abu, sedangkan 100% berarti akan menunjukkan kekuatan penuhnya. Jika Anda ingin menonaktifkan warnanya atau membuatnya sedikit lebih menonjol, Anda dapat mengubah nilai ini.

Bantuan memberi tahu Anda seberapa gelap atau terang warnanya. 0% Brightness berarti warnanya akan menjadi hitam, terlepas dari pengaturan Hue atau Saturation, dan 100% Brightness membuatnya putih. Seperti yang Anda duga, 50% memberi Anda warna yang paling akurat.

Dengan informasi tersebut, Anda seharusnya dapat segera mengetahui apa itu hsl (0, 100%, 50%). Hanya merah! Apakah Anda ingin warna merah yang lebih dalam dan kaya? mengujinya 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 (masukkan 0 dan 1) seperti: hsla (240, 70%, 40% ,.5)

HSV/HSB dan HSI

Dibandingkan? Beberapa model warna? Kapan selesai? Bagi kebanyakan orang yang bekerja dengan warna di komputer, ini sudah berakhir. Hex, RGB, dan HSL adalah cara 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 mungkin menemukan orang yang menggunakan salah satu model warna yang lebih esoteris. memiliki. terdaftar di sini. .

HSB adalah singkatan dari “Hue Saturation Brightness” dan HSV adalah singkatan dari Hue Saturation Value. Faktanya, mereka hanya nama yang berbeda untuk model yang sama, dan perbedaan terbesar mereka 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 liar.

Model warna apa yang harus saya gunakan?

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

Kredit gambar: Saturasi HSL Silinder Abu-abu, warna aditif, xterm, bagan warna HSL dan HSV, Munsell 1943

Apakah artikel ini berguna? ya Tidak