Kode Hex Warna

 on Tuesday  

Dalam mendesain web/blog, kita sering lihat kode2 warna yang terdiri dari tanda '#' dan 6 angka/huruf di belakangnya. Kode warna tersebut dapat diterjemahkan jadi kode warna RGB (Red, Green, Blue). Bagaimanakah cara menerjemahkannya?

Misalnya aku punya kode warna: "#0088FF", kita akan mencari berapa porsi untuk warna merah (red), hijau (green), dan biru (blue). Dengan begini, kita bisa memperkirakan warna apa yang terbentuk.

Pertama, tanda "#" menunjukkan kalau itu adalah kode warna, jadi tidak usah terlalu diperhatikan.
Untuk enam karakter di sampingnya, itu menggunakan bilangan berbasis 16, yang terdiri dari angka 0-9 dan A-F : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (semakin ke kanan nilainya semakin besar). Dan setelah F, ada angka 10 (bukan berarti bernilai "sepuluh", tapi satu angka lebih besar dari F), 11, 12, ..., 1E, 1F, 20, 21, ..., 2E, 2F, ..., A0, A1, ..., AE, AF, ..., F9, FA, FB, FC, FD, FE, dan terakhir FF.
Nah, yang kita dapatkan dari situ adalah bahwa "00" adalah angka terkecil, sedangkan "FF" adalah yang terbesar.

Lihat kembali kode warna "#0088FF".
Lihat dua angka setelah tanda "#": "00" menunjukkan porsi untuk warna merah (red).
Dua angka setelahnya: "88" menunjukkan porsi untuk warna hijau (green).
Dan dua angka terakhir: "FF" menunjukkan porsi untuk warna biru (blue).

Dari sini, kita lihat bahwa porsi untuk warna merah tidak ada, untuk warna hijau hanya sebagian, dan warna biru mendapatkan porsi paling banyak. Jadi bisa kita perkirakan bahwa kode "#0088FF" berwarna agak kebiru-biruan.

Kadang ada juga orang yang cuma menuliskan kode warna 3 angka/huruf. Tapi ini cuma untuk menyingkat penulisan jika terdapat banyak angka/huruf yang sama.
Contoh: "#0088FF" bisa disingkat jadi "#08F"

Kalau kamu ingin coba-coba buat kode warna kamu sendiri, silakan coba di bawah:




Selamat mencoba!

Kode Hex Warna 4.5 5 dian Tuesday Dalam mendesain web/blog, kita sering lihat kode2 warna yang terdiri dari tanda '#' dan 6 angka/huruf di belakangnya. Kode warna ...


No comments:

Post a Comment

J-Theme