Apa Itu Kode Hex? Semua yang Perlu Anda Ketahui

Bekerja dengan warna dalam HTML relatif mudah. Dengan beberapa deklarasi CSS sederhana, Anda dapat mengubah warna teks atau latar belakang apa pun di halaman web Anda. Tapi bagaimana Anda menentukan warna? Jawaban atas pertanyaan ini akan membawa kita ke lubang kelinci yang akhirnya membawa kita ke konsep kode warna heksadesimal.

Jika Anda pernah bekerja dengan HTML atau CSS sebelumnya, Anda mungkin pernah mendengar istilah kode hex. Tapi apa sebenarnya kode hex itu? Apa saja contoh kode hex? Apa perbedaan antara kode hex dan kode warna RGB?

Apa itu Kode Hex?

Saat pertama kali mulai bekerja dengan warna, Anda mungkin menggunakan antarmuka grafis untuk memilih warna yang akan diterapkan ke elemen di halaman Anda. Ketika Anda mulai melihat kode yang mendasarinya daripada hanya editor grafis Anda, Anda menemukan bahwa warna muncul sebagai urutan karakter yang tampak aneh. Urutan tersebut dikenal sebagai kode hex; mereka terlihat seperti ini:

#FF0092

Terkait: Istilah Penting Desain Grafis yang Perlu Anda Ketahui

Anda dapat menentukan warna dalam CSS dengan beberapa cara berbeda. Anda dapat menggunakan nama beberapa warna yang telah ditentukan sebelumnya seperti merah dan darkmagenta. Untuk menentukan nuansa warna yang tepat, Anda harus menggunakan pengukuran yang lebih tepat: sesuatu yang numerik.

CSS menawarkan dua opsi utama: RGB dan hex. Dalam kedua format, Anda menentukan jumlah merah, hijau, dan biru yang membentuk warna akhir. RGB menggunakan tiga angka antara 0 dan 255. Hex melakukan hal yang persis sama, hanya dengan basis yang berbeda (16) dari desimal (10) yang biasa Anda gunakan.

Hex menggunakan huruf A-F, selain angka 0-9, dengan total 16 simbol. A dalam heksa sama dengan 10 dalam desimal. F dalam heksa adalah 15 dalam desimal.

Bagaimana Kode Warna Hex Bekerja?

Dalam bentuknya yang paling dasar, kode hex adalah representasi dari berapa banyak warna merah, hijau, dan biru yang ada dalam suatu warna. Kode hex terdiri dari enam karakter. Dua angka pertama berhubungan dengan berapa banyak warna merah dalam campuran, dua angka berikutnya berhubungan dengan jumlah warna hijau yang ada, dan dua angka terakhir mencerminkan jumlah warna biru. Kode hex mengacu pada warna tertentu, memungkinkan desainer dan pengembang untuk dengan mudah berkomunikasi tentang skema warna.

Dengan nilai 16 × 16 (256) untuk setiap komponen warna, maka ada kemungkinan 256 × 256 × 256 kombinasi. Dalam hex, mereka berkisar dari #000000 (hitam murni) hingga #FFFFFF (putih murni).

Cara Membaca Kode Warna Hex

Memahami kode warna hex itu mudah. Mari kita ambil contoh #FF5733. Pertama, bagi enam karakter menjadi tiga bagian yang masing-masing berisi dua karakter. Seperti yang Anda ketahui, dua bagian pertama melambangkan merah, dua bagian kedua melambangkan hijau, dan dua bagian ketiga melambangkan biru. Jadi, dalam contoh kita:

• Komponen merah, RR, memiliki nilai FF.
• Komponen hijau, GG, adalah 57.
• Komponen biru, BB, adalah 33.

Sekarang, untuk menemukan intensitas segmen warna ini, Anda perlu menghitung bilangan heksadesimal menggunakan tiga langkah berikut:

1. Kalikan karakter heksadesimal pertama RR dengan 16. Jika karakternya adalah huruf, ubah ke nilai yang sesuai. Dalam hal ini, karakter pertama adalah F yaitu 15. Jadi, untuk contoh kita, Anda mengalikan 15 × 16 yang sama dengan 240.
2. Selanjutnya, tambahkan karakter kedua RR. Sekali lagi, ubah sebuah huruf ke nilai yang sesuai, jika diperlukan. Dalam contoh kita, karakter kedua adalah F yang sama dengan 15.
3. Setelah selesai, tambahkan total untuk mendapatkan satu nilai. Jika Anda menambahkan 240 dan 15 dari contoh kami, Anda akan melihat nilai FF adalah 255.

Ulangi rumus yang sama untuk dua segmen yang tersisa, GG dilambangkan dengan 57 dan BB dilambangkan dengan 33. Jika perhitungan manual tampak terlalu berlebihan, Anda selalu dapat menggunakan alat konversi hex ke RGB (seperti Konverter Hex Biner) untuk membaca warna. Anda harus menemukan bahwa nilai hex #FF5733 setara dengan rgb (255, 87, 51).

Mengapa Kode Warna Hex Begitu Populer?

Meskipun ada beberapa model warna yang berbeda (RGB, CMYK, HSL), kode warna hex mungkin merupakan representasi yang paling banyak digunakan. Ini karena mereka sederhana dan mudah dimengerti.

Format lebar tetap juga sangat berguna. Warna heksadesimal panjang penuh selalu tujuh karakter, termasuk yang utama # simbol.

Warna hex sangat efisien, hanya menggunakan tujuh karakter ini untuk mewakili lebih dari 16 juta warna. Dan membedakan antara warna-warna ini adalah proses yang mudah.

Hex vs. RGB: Apakah Ada Perbedaan?

Sistem pengkodean warna RGB menggunakan tiga angka desimal untuk menunjukkan intensitas relatif merah, hijau, dan biru. Ini menggunakan angka 0-9.

Hex juga menggunakan tiga angka untuk mewakili merah, hijau, dan biru, tetapi menggunakan digit tambahan (A-F) untuk memenuhi basis 16. Tidak ada perbedaan dalam warna yang dihasilkan, mereka hanya format yang berbeda untuk mengkomunikasikan informasi yang sama.

Terkait: Dasar-dasar CSS: Bekerja dengan Warna

Untuk Apa Kode Hex Digunakan?

Berbagai aplikasi berbeda menggunakan RGB, mulai dari layar televisi hingga perangkat seluler, game, dan rambu. Anda terutama akan melihat kode warna hex dalam desain web dan program grafis lainnya.

Anda juga dapat melihat kode hex sebagai cara universal untuk mengidentifikasi warna. Banyak situs web menggunakannya untuk mengidentifikasi warna tertentu karena pendek dan, biasanya, konteksnya tidak ambigu.

Kode Warna Hex Bukan Ilmu Roket

Jadi, di sana Anda memiliki dasar-dasar kode warna hex. Mereka bukan sains yang sulit, tetapi mereka melayani tujuan yang pasti dalam desain (dan di dunia teknologi). Jika Anda mencari alat yang akan membantu Anda memahami cara kerja warna heksagonal, atau alat yang akan mengajari Anda tentang teori campuran RGB, ada banyak di internet. Ingat, kunci untuk mempelajari sesuatu yang baru adalah mengambilnya selangkah demi selangkah.

Kode warna hex bukanlah hal yang paling menarik di dunia, tetapi sangat penting untuk memahaminya jika Anda bekerja dalam desain web. Mampu bekerja dengan kode warna hex akan membuat desain Anda bekerja lebih mudah.

Cara Menemukan Nilai Hex Warna Apa Saja di Layar Anda

Pelajari cara memilih nilai warna apa pun dari layar Anda dalam hitungan detik. Sangat berguna untuk desainer web!

Baca Selanjutnya

Tentang Penulis