Kode warna hex: cara kerja #RRGGBB

Cara kerja kode warna hex

Setiap warna di layar dicampur dari cahaya merah, hijau, dan biru. Kode hex menulis kekuatan setiap cahaya sebagai dua karakter setelah tanda #: merah dulu, lalu hijau, lalu biru. Itulah pola #RRGGBB.

Karakternya heksadesimal, yaitu cara berhitung dengan 16 digit: 0 sampai 9, lalu a (10), b (11), c (12), d (13), e (14), dan f (15). Satu pasang mencakup 256 nilai, dari 00 (0) sampai ff (255), persis sama dengan rentang rgb().

Untuk mengubah satu pasang menjadi angka biasa, kalikan digit pertama dengan 16 lalu tambahkan digit kedua. Di bawah ini #1e90ff, warna CSS dodgerblue, dalam empat format, lalu dihitung pasang demi pasang.

Jadi #1e90ff adalah rgb(30, 144, 255): sedikit merah, cukup banyak hijau, dan biru penuh, yang jika digabung menjadi biru langit yang cerah. Tiga pasang dengan 256 nilai menghasilkan 16.777.216 kemungkinan warna.

Bentuk singkat hex 3 digit dan 4 digit

Jika kedua digit di setiap pasangan sama, Anda bisa menulis setiap pasangan cukup sekali. #ffcc00 menjadi #fc0, dan browser menggandakan kembali setiap digitnya. #1e90ff tidak punya bentuk singkat, karena 1e dan 90 bukan pasangan digit kembar.

Bentuk singkat hanya mencakup 4.096 dari 16,7 juta warna. Versi empat digit menambahkan opasitas dengan cara yang sama, jadi #f008 berarti #ff000088.

Opasitas hex: hex 8 digit dengan alfa

Kode delapan digit menambahkan pasangan keempat untuk alfa, yaitu opasitas: #RRGGBBAA. 00 berarti sepenuhnya transparan dan ff berarti sepenuhnya pekat. Semua browser terkini mendukungnya di CSS, begitu juga bentuk singkat empat digit #RGBA.

Untuk mendapatkan pasangannya, kalikan opasitas dengan 255, bulatkan ke bilangan bulat, lalu ubah ke hex. 50% menghasilkan 127,5, yang dibulatkan menjadi 128 dan ditulis sebagai 80. Berikut tabel lengkapnya, diterapkan pada #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Ada dua hal yang perlu diperhatikan. Pertama, 80 adalah 128 dari 255, yaitu 50,2%, bukan tepat 50%: alfa hex hanya punya 256 tingkat, jadi sebagian besar persentase bulat hanyalah pendekatan. Kedua, Android menaruh alfa di depan. Di resource warna Android, #801e90ff sama artinya dengan #1e90ff80 di CSS.

Cara membaca kode hex dengan mata

Anda bisa menebak sebuah warna tanpa mengonversi apa pun. Lihat digit pertama di setiap pasangan, karena digit itulah yang membawa hampir semua informasinya.

• Digit pertama yang paling besar menunjukkan cahaya yang dominan. #d2691e punya d di merah, 6 di hijau, dan 1 di biru, jadi warnanya cokelat oranye.
• Dua kanal yang tinggi akan bercampur: merah dan hijau menjadi kuning, hijau dan biru menjadi sian, merah dan biru menjadi magenta atau ungu.
• Tiga pasangan yang sama menghasilkan abu-abu. #333333 adalah abu-abu gelap, #999999 abu-abu terang. Pasangan yang hampir sama, seperti #708090, menghasilkan warna redup keabu-abuan.
• Digit yang tinggi secara keseluruhan berarti warna terang, digit yang rendah berarti warna gelap. Jika ketiga pasangan bernilai c0 atau lebih, warnanya pucat. Jika ketiganya 30 atau lebih rendah, warnanya sangat gelap.
• Hijau terlihat jauh lebih terang daripada biru pada angka yang sama. #00ff00 punya kecerahan OKLCH 0,866, sedangkan #0000ff hanya 0,452.

Mengapa #808080 bukan abu-abu tengah

#808080 tepat berada di tengah secara angka: 128 dari 255 di setiap kanal. Namun warnanya tidak terlihat berada di tengah antara hitam dan putih. Kecerahan OKLCH-nya 0,600, jadi terlihat sudah 60% menuju putih.

Nilai hex sudah dikodekan dengan kurva sRGB, yang kira-kira mengikuti mata tetapi tidak persis. #808080 memancarkan sekitar 21,6% cahaya putih, dan model perseptual menaruh titik tengah visual lebih rendah: OKLCH di #636363, CIELAB di #777777.

Ini penting untuk teks. Abu-abu #808080 di atas putih bernilai 3,95:1 dan gagal WCAG AA untuk teks isi. #767676 adalah abu-abu paling terang yang lolos 4,5:1, dan #777777, satu tingkat lebih terang, sudah gagal dengan 4,48:1.

Huruf besar atau kecil, dengan atau tanpa #

Kode hex tidak membedakan huruf besar dan kecil. #1E90FF, #1e90ff, dan #1E90ff adalah warna yang sama di CSS, SVG, dan aplikasi desain. Pilih satu gaya dan pakai di mana-mana, supaya pencarian di kode Anda menemukan setiap pemakaiannya. Huruf kecil adalah pilihan yang umum di CSS.

Tanda # adalah bagian dari sintaks CSS, bukan bagian dari warna. Figma dan banyak aplikasi desain menampilkan kodenya tanpa tanda itu, dan bahasa pemrograman sering menulisnya sebagai angka dengan awalan 0x, seperti di Flutter, tempat Color(0xFF1E90FF) diawali pasangan alfa.

Cara mencari kode hex warna di layar

Pakai eyedropper (pipet warna): alat yang membaca warna di bawah kursor dan menampilkan kodenya. Alat-alat ini gratis dan kebanyakan sudah terpasang.

• Chrome dan Edge: buka DevTools dengan F12, klik kotak warna mana pun di panel Styles, lalu pakai ikon eyedropper untuk mengambil warna dari halaman.
• PickShade: pemilih warna di halaman utama punya tombol eyedropper di Chrome dan Edge yang bisa mengambil warna dari mana saja di layar.
• Windows: pasang Microsoft PowerToys dan tekan Win + Shift + C untuk membuka Color Picker.
• macOS: buka Digital Color Meter dari Applications, Utilities. Ubah ke sRGB, lalu pilih View, Display Values, as Hexadecimal.
• Figma, Photoshop, dan sebagian besar aplikasi desain: tekan I untuk eyedropper.
• Di foto atau tangkapan layar: buka di pemilih warna gambar dan klik piksel mana pun. Gambarnya tetap di perangkat Anda.

Nilai yang diambil bisa meleset beberapa angka dari aslinya, karena layar menerapkan profil warna dan gambar dikompresi. Jika Anda butuh nilai yang persis, salin dari file desain atau CSS, bukan dari tangkapan layar.

Tanya jawab