Kode warna HEX dan RGB digunakan untuk menentukan warna secara konsisten pada website, aplikasi, ilustrasi, antarmuka, dan berbagai media digital. Dengan kode yang tepat, desainer dan developer dapat menggunakan warna yang sama pada tombol, latar, teks, ikon, logo, serta elemen visual lainnya.
RGB menuliskan warna melalui kombinasi merah, hijau, dan biru dalam bentuk angka. HEX merepresentasikan kombinasi yang sama menggunakan angka dan huruf dalam sistem heksadesimal. Keduanya dapat menghasilkan warna yang identik meskipun format penulisannya berbeda.
Contohnya, warna putih dapat ditulis sebagai RGB 255, 255, 255 atau HEX #FFFFFF. Warna hitam ditulis sebagai RGB 0, 0, 0 atau HEX #000000. Memahami hubungan tersebut akan mempermudah pemilihan, konversi, serta pengelolaan warna dalam proyek digital.
Apa Itu Kode Warna?
Kode warna merupakan nilai yang digunakan komputer untuk menampilkan warna tertentu. Pada desain digital, satu warna dapat direpresentasikan melalui beberapa sistem seperti RGB, HEX, HSL, dan HSV.
Setiap sistem memiliki format dan cara kerja berbeda. RGB menggunakan nilai cahaya merah, hijau, dan biru. HEX menuliskan nilai RGB dalam bentuk heksadesimal. HSL menggambarkan warna berdasarkan hue, saturation, dan lightness.
Kode warna membantu mengurangi ketergantungan pada nama seperti biru, merah muda, atau cokelat. Nama warna dapat ditafsirkan berbeda, sedangkan kode seperti #1E90FF mengarah pada nilai digital yang lebih spesifik.
Apa Itu Kode Warna RGB?
RGB adalah singkatan dari red, green, dan blue. Sistem ini bekerja dengan mencampurkan cahaya merah, hijau, dan biru untuk menghasilkan berbagai warna pada layar.
Setiap kanal umumnya menggunakan nilai dari 0 sampai 255. Nilai 0 berarti kanal tersebut tidak memancarkan cahaya, sedangkan 255 menunjukkan intensitas maksimum.
| Warna | Kode RGB |
|---|---|
| Merah | rgb(255, 0, 0) |
| Hijau | rgb(0, 128, 0) |
| Biru | rgb(0, 0, 255) |
| Putih | rgb(255, 255, 255) |
| Hitam | rgb(0, 0, 0) |
| Abu-abu | rgb(128, 128, 128) |
Ketiga kanal bernilai 255 menghasilkan putih karena seluruh cahaya ditampilkan pada intensitas maksimum. Ketika ketiganya bernilai 0, layar menghasilkan hitam karena tidak ada cahaya dari ketiga kanal tersebut.
Cara Membaca Kode RGB
Kode RGB biasanya ditulis dalam format berikut:
rgb(merah, hijau, biru)Contohnya:
rgb(255, 99, 71)Nilai tersebut mempunyai kanal merah sebesar 255, hijau 99, dan biru 71. Karena merah sangat dominan, hasilnya adalah warna merah-jingga yang dikenal sebagai tomato dalam daftar warna CSS.
- Nilai merah tinggi membuat warna lebih kemerahan.
- Nilai hijau tinggi membuat warna lebih kehijauan.
- Nilai biru tinggi membuat warna lebih kebiruan.
- Nilai ketiganya sama menghasilkan warna abu-abu.
- Semakin tinggi ketiga nilai, semakin terang warnanya.
- Semakin rendah ketiga nilai, semakin gelap warnanya.
Apa Itu Kode Warna HEX?
HEX merupakan cara menuliskan nilai RGB menggunakan sistem bilangan heksadesimal. Format yang paling umum terdiri dari tanda pagar diikuti enam karakter.
#RRGGBBDua karakter pertama mewakili merah, dua karakter berikutnya mewakili hijau, dan dua karakter terakhir mewakili biru.
Sistem heksadesimal menggunakan karakter 0 sampai 9 serta A sampai F. Nilai terendah adalah 00 dan nilai tertinggi adalah FF. Dalam sistem desimal, 00 setara dengan 0 dan FF setara dengan 255.
| Bagian | Fungsi | Rentang |
|---|---|---|
| RR | Intensitas merah | 00–FF |
| GG | Intensitas hijau | 00–FF |
| BB | Intensitas biru | 00–FF |
Cara Membaca Kode HEX
Perhatikan kode berikut:
#FF6347- FF adalah nilai kanal merah.
- 63 adalah nilai kanal hijau.
- 47 adalah nilai kanal biru.
Setelah dikonversi ke desimal, kode tersebut menjadi RGB 255, 99, 71. Jadi, #FF6347 dan rgb(255, 99, 71) merupakan warna yang sama.
Mengapa HEX Menggunakan Angka dan Huruf?
HEX menggunakan sistem bilangan berbasis 16. Sistem desimal mempunyai sepuluh simbol dari 0 sampai 9, sedangkan heksadesimal membutuhkan enam simbol tambahan.
| HEX | Desimal |
|---|---|
| 0 | 0 |
| 9 | 9 |
| A | 10 |
| B | 11 |
| C | 12 |
| D | 13 |
| E | 14 |
| F | 15 |
Dua digit heksadesimal dapat menghasilkan nilai dari 00 sampai FF. Rentang tersebut setara dengan 0 sampai 255 pada RGB.
Perbedaan RGB dan HEX
RGB dan HEX bukan dua model warna yang menghasilkan spektrum berbeda. HEX pada dasarnya merupakan cara lain untuk menulis nilai RGB.
| Aspek | RGB | HEX |
|---|---|---|
| Format | rgb(255, 99, 71) | #FF6347 |
| Dasar nilai | Desimal | Heksadesimal |
| Kanal | Merah, hijau, biru | Merah, hijau, biru |
| Penggunaan umum | CSS, desain, pemrograman | CSS, desain web, dokumentasi brand |
| Mudah dibaca manusia | Nilai kanal lebih langsung | Lebih ringkas |
| Dukungan transparansi | RGB dengan alpha | HEX delapan digit |
Pilih format berdasarkan kebutuhan proyek dan kebiasaan tim. Tidak ada perbedaan visual jika nilai keduanya dikonversi dengan benar.
Contoh Kode Warna HEX dan RGB Populer
| Nama warna | HEX | RGB |
|---|---|---|
| Putih | #FFFFFF | 255, 255, 255 |
| Hitam | #000000 | 0, 0, 0 |
| Merah | #FF0000 | 255, 0, 0 |
| Hijau lime | #00FF00 | 0, 255, 0 |
| Biru | #0000FF | 0, 0, 255 |
| Kuning | #FFFF00 | 255, 255, 0 |
| Cyan | #00FFFF | 0, 255, 255 |
| Magenta | #FF00FF | 255, 0, 255 |
| Abu-abu | #808080 | 128, 128, 128 |
| Navy | #000080 | 0, 0, 128 |
| Orange | #FFA500 | 255, 165, 0 |
| Ungu | #800080 | 128, 0, 128 |
| Pink | #FFC0CB | 255, 192, 203 |
| Cokelat | #A52A2A | 165, 42, 42 |
| Teal | #008080 | 0, 128, 128 |
Tabel tersebut dapat digunakan sebagai titik awal. Untuk identitas visual, sebaiknya pilih kode yang benar-benar sesuai dengan kebutuhan merek dan bukan hanya berdasarkan nama warna umum.
Contoh Palet Warna Netral
| Nama | HEX | RGB |
|---|---|---|
| Off-white | #FAF9F6 | 250, 249, 246 |
| Ivory | #FFFFF0 | 255, 255, 240 |
| Beige | #F5F5DC | 245, 245, 220 |
| Light gray | #D3D3D3 | 211, 211, 211 |
| Gray | #808080 | 128, 128, 128 |
| Charcoal | #36454F | 54, 69, 79 |
| Dark brown | #654321 | 101, 67, 33 |
Contoh Palet Warna Pastel
| Nama | HEX | RGB |
|---|---|---|
| Pastel pink | #FFD1DC | 255, 209, 220 |
| Baby blue | #89CFF0 | 137, 207, 240 |
| Mint | #98FF98 | 152, 255, 152 |
| Lavender | #E6E6FA | 230, 230, 250 |
| Peach | #FFE5B4 | 255, 229, 180 |
| Pastel yellow | #FFFACD | 255, 250, 205 |
Contoh Palet Warna Biru
| Nama | HEX | RGB |
|---|---|---|
| Sky blue | #87CEEB | 135, 206, 235 |
| Dodger blue | #1E90FF | 30, 144, 255 |
| Royal blue | #4169E1 | 65, 105, 225 |
| Steel blue | #4682B4 | 70, 130, 180 |
| Navy | #000080 | 0, 0, 128 |
| Teal blue | #367588 | 54, 117, 136 |
Cara Mengonversi RGB ke HEX
Untuk mengubah RGB menjadi HEX, setiap nilai merah, hijau, dan biru dikonversi dari desimal ke heksadesimal. Setelah itu, ketiga hasil digabungkan.
Contohnya, kita akan mengonversi RGB 255, 99, 71.
- Nilai merah 255 menjadi FF.
- Nilai hijau 99 menjadi 63.
- Nilai biru 71 menjadi 47.
- Gabungkan hasilnya menjadi #FF6347.
Dengan demikian:
rgb(255, 99, 71) = #FF6347Rumus Manual RGB ke HEX
Setiap nilai RGB dibagi dengan 16. Hasil pembagian menentukan digit pertama, sedangkan sisanya menentukan digit kedua.
Contoh nilai hijau 99:
- 99 dibagi 16 menghasilkan 6 dengan sisa 3.
- Angka 6 menjadi digit pertama.
- Angka 3 menjadi digit kedua.
- Hasilnya adalah 63.
Untuk angka 10 sampai 15, gunakan huruf A sampai F. Contohnya, nilai desimal 15 ditulis F dalam heksadesimal.
Cara Mengonversi HEX ke RGB
Untuk mengubah HEX menjadi RGB, pisahkan kode menjadi tiga pasang karakter. Kemudian ubah setiap pasangan dari heksadesimal ke desimal.
Contohnya:
#2E8B57- 2E menjadi 46.
- 8B menjadi 139.
- 57 menjadi 87.
Hasil akhirnya:
#2E8B57 = rgb(46, 139, 87)Kode HEX Tiga Digit
Beberapa kode HEX dapat ditulis dalam format singkat tiga digit.
#RGBFormat tersebut hanya dapat digunakan jika setiap pasangan karakter terdiri dari angka atau huruf yang sama.
| Format singkat | Format lengkap |
|---|---|
| #FFF | #FFFFFF |
| #000 | #000000 |
| #F00 | #FF0000 |
| #0F0 | #00FF00 |
| #00F | #0000FF |
| #ABC | #AABBCC |
Kode #F63 tidak sama dengan #FF6633 karena format singkat akan menggandakan setiap karakter menjadi #FF6633. Format ini praktis, tetapi tidak dapat merepresentasikan semua warna enam digit.
Transparansi dengan RGBA
RGBA menambahkan kanal alpha pada format RGB. Kanal ini mengatur transparansi warna.
rgba(merah, hijau, biru, alpha)Nilai alpha dapat ditulis dari 0 sampai 1.
- 0 berarti sepenuhnya transparan.
- 0.25 berarti transparansi sekitar 75 persen.
- 0.5 berarti transparansi 50 persen.
- 0.75 berarti masih cukup solid.
- 1 berarti sepenuhnya tidak transparan.
rgba(255, 0, 0, 0.5)Kode tersebut menghasilkan warna merah dengan tingkat transparansi 50 persen. Hasil yang terlihat akan dipengaruhi warna latar di belakangnya.
Transparansi dengan HEX Delapan Digit
HEX juga dapat menuliskan transparansi melalui format delapan digit.
#RRGGBBAADua karakter terakhir mewakili kanal alpha. Nilai 00 berarti sepenuhnya transparan dan FF berarti sepenuhnya tidak transparan.
| Alpha HEX | Perkiraan opacity |
|---|---|
| 00 | 0% |
| 40 | 25% |
| 80 | 50% |
| BF | 75% |
| FF | 100% |
Contohnya:
#FF000080Kode tersebut menghasilkan merah dengan opacity sekitar 50 persen.
Menggunakan RGB dan HEX dalam CSS
RGB dan HEX dapat digunakan pada berbagai properti CSS, termasuk warna teks, latar, border, bayangan, dan gradient.
.button { background-color: #1E90FF; color: #FFFFFF; border: 1px solid rgb(0, 82, 155); }Contoh penggunaan RGBA:
.overlay { background-color: rgba(0, 0, 0, 0.6); }Contoh penggunaan HEX dengan transparansi:
.card { background-color: #FFFFFFCC; }Menyimpan Kode Warna dengan CSS Variables
CSS variables membantu menyimpan warna dalam satu tempat. Ketika warna utama berubah, developer tidak perlu mengganti kode pada setiap elemen secara manual.
:root { --color-primary: #2563EB; --color-secondary: #0F766E; --color-background: #F8FAFC; --color-text: #0F172A; --color-border: #CBD5E1; } .button-primary { background: var(--color-primary); color: #FFFFFF; } body { background: var(--color-background); color: var(--color-text); }Penamaan berdasarkan fungsi lebih fleksibel daripada penamaan seperti blue atau red. Nama color-primary tetap relevan meskipun warna utama merek berubah.
Perbedaan RGB, HEX, HSL, dan CMYK
| Sistem | Dasar | Penggunaan umum |
|---|---|---|
| RGB | Cahaya merah, hijau, biru | Layar dan media digital |
| HEX | Representasi heksadesimal RGB | Website dan CSS |
| HSL | Hue, saturation, lightness | Pengaturan variasi warna digital |
| CMYK | Cyan, magenta, yellow, key | Produksi cetak |
RGB dan HEX ditujukan untuk warna berbasis cahaya pada layar. CMYK digunakan dalam proses pencetakan yang mengandalkan tinta. Karena cara kerjanya berbeda, warna RGB yang sangat cerah belum tentu dapat direproduksi secara identik dalam CMYK.
Apakah HEX Dapat Digunakan untuk Cetak?
Kode HEX dapat digunakan sebagai referensi awal, tetapi bukan format produksi utama untuk cetak. File cetak biasanya perlu disiapkan dalam CMYK atau mengikuti profil warna yang diminta percetakan.
Mengonversi HEX ke CMYK juga tidak menjamin hasil fisik sama persis. Warna cetak dipengaruhi mesin, tinta, kertas, laminasi, profil warna, dan kondisi produksi.
Untuk kebutuhan merek yang memerlukan akurasi tinggi, gunakan panduan warna yang mencantumkan nilai digital dan cetak secara terpisah. Lakukan uji cetak sebelum produksi dalam jumlah besar.
Mengapa Warna Terlihat Berbeda pada Setiap Layar?
Kode yang sama belum tentu terlihat identik pada seluruh perangkat. Perbedaan dapat terjadi karena karakter panel, tingkat kecerahan, mode layar, kalibrasi, profil warna, dan kondisi pencahayaan ruangan.
- Layar OLED dapat menampilkan hitam lebih dalam.
- Mode vivid dapat meningkatkan saturasi.
- Mode malam dapat membuat warna lebih hangat.
- Kecerahan tinggi dapat membuat warna terlihat lebih pucat.
- Layar yang tidak dikalibrasi dapat bergeser ke kuning, biru, atau hijau.
Kode warna tetap penting untuk menjaga konsistensi data, tetapi hasil visual perlu diuji pada beberapa perangkat jika proyek digunakan oleh banyak pengguna.
Apa Itu Ruang Warna sRGB?
sRGB merupakan ruang warna yang banyak digunakan pada web, perangkat konsumen, dan gambar digital. Ketika menyiapkan gambar untuk website, sRGB umumnya menjadi pilihan yang aman karena didukung luas.
Ruang warna yang lebih luas dapat menampilkan warna lebih banyak pada perangkat tertentu. Namun, warna tersebut dapat berubah ketika ditampilkan pada perangkat atau aplikasi yang tidak mendukung profil yang sama.
Untuk penggunaan web umum, ekspor gambar dalam sRGB dan uji hasilnya pada browser serta perangkat berbeda.
Memilih Warna Teks dan Latar yang Mudah Dibaca
Memilih kode warna tidak hanya berkaitan dengan estetika. Teks harus mempunyai kontras yang cukup terhadap latar agar dapat dibaca oleh lebih banyak pengguna.
Teks abu-abu muda di atas latar putih mungkin terlihat lembut, tetapi dapat sulit dibaca. Sebaliknya, teks hitam pekat pada latar putih menghasilkan kontras tinggi, meskipun dalam beberapa desain dapat diganti dengan charcoal agar terasa sedikit lebih lembut.
- Gunakan teks gelap pada latar terang.
- Gunakan teks terang pada latar gelap.
- Jangan mengandalkan perbedaan hue saja.
- Periksa tombol dalam keadaan normal, hover, dan disabled.
- Uji tautan agar tetap dapat dibedakan dari teks biasa.
- Periksa desain dalam mode terang dan gelap.
Panduan lebih luas mengenai hubungan warna dan hierarki dapat dibaca melalui panduan teori warna untuk desain visual.
Mengapa Jangan Mengandalkan Warna Saja?
Warna sebaiknya tidak menjadi satu-satunya penanda status atau informasi. Sebagai contoh, pesan kesalahan tidak cukup ditampilkan dengan warna merah tanpa ikon atau teks penjelas.
Tambahkan label, simbol, pola, atau bentuk agar informasi tetap dapat dipahami ketika pengguna sulit membedakan warna tertentu.
Kurang jelas: ● kolom merah tanpa pesan Lebih jelas: ⚠ Alamat email belum validCara Membuat Palet Warna Digital
Palet yang baik tidak hanya berisi kumpulan warna menarik. Setiap warna sebaiknya mempunyai fungsi yang jelas.
- Pilih satu warna utama.
- Tentukan warna sekunder.
- Tambahkan warna aksen.
- Siapkan warna latar terang dan gelap.
- Tentukan warna teks utama dan teks sekunder.
- Buat warna untuk sukses, peringatan, dan kesalahan.
- Uji kontras seluruh kombinasi penting.
- Simpan kode dalam dokumentasi atau design system.
Contoh palet sederhana:
| Fungsi | HEX | RGB |
|---|---|---|
| Primary | #2563EB | 37, 99, 235 |
| Secondary | #0F766E | 15, 118, 110 |
| Accent | #F59E0B | 245, 158, 11 |
| Background | #F8FAFC | 248, 250, 252 |
| Text | #0F172A | 15, 23, 42 |
| Border | #CBD5E1 | 203, 213, 225 |
| Success | #15803D | 21, 128, 61 |
| Error | #B91C1C | 185, 28, 28 |
Inspirasi pasangan warna dapat ditemukan melalui panduan kombinasi warna yang cocok.
Cara Mengambil Kode Warna dari Gambar
Kode warna dapat diambil dari gambar menggunakan color picker pada aplikasi desain, browser, atau sistem operasi. Namun, satu objek dalam foto biasanya mempunyai banyak variasi akibat cahaya, bayangan, refleksi, dan kompresi gambar.
- Buka gambar dalam aplikasi yang mempunyai color picker.
- Perbesar bagian yang ingin diambil.
- Pilih area dengan pencahayaan paling representatif.
- Catat nilai HEX atau RGB.
- Bandingkan beberapa titik pada objek.
- Pilih warna yang paling sesuai dengan tujuan desain.
Jangan mengambil satu piksel secara acak lalu menganggapnya sebagai warna asli objek. Foto dapat mengalami perubahan akibat kamera, pencahayaan, filter, dan proses penyuntingan.
Tools untuk Memilih dan Mengelola Kode Warna
Berbagai aplikasi dapat digunakan untuk membuat palet, mengambil warna, dan mengonversi kode.
- Color picker bawaan aplikasi desain.
- Developer tools pada browser.
- Ekstensi pengambil warna dari halaman web.
- Generator palet dari gambar.
- Contrast checker untuk menguji keterbacaan.
- Konverter RGB, HEX, HSL, dan CMYK.
- Design system atau dokumentasi brand.
Gunakan alat tersebut sebagai pendukung. Keputusan akhir tetap perlu mempertimbangkan fungsi, kontras, konsistensi, dan konteks penggunaan warna.
Kesalahan Umum dalam Menggunakan RGB dan HEX
Menganggap HEX Berbeda dari RGB
HEX pada dasarnya merepresentasikan nilai RGB dalam format heksadesimal. Keduanya dapat menghasilkan warna identik.
Menggunakan HEX sebagai Standar Cetak
HEX terutama digunakan untuk media digital. Produksi cetak biasanya membutuhkan CMYK atau standar lain yang disepakati dengan percetakan.
Tidak Memeriksa Kontras
Dua warna dapat terlihat menarik tetapi tetap sulit dibaca ketika digunakan sebagai kombinasi teks dan latar.
Mengambil Warna dari Foto Tanpa Memeriksa Cahaya
Cahaya dan bayangan dapat membuat kode yang diambil tidak mewakili warna objek sebenarnya.
Menggunakan Terlalu Banyak Kode yang Hampir Sama
Terlalu banyak variasi abu-abu, biru, atau warna merek dapat membuat desain sulit dikelola. Batasi palet dan tentukan fungsi setiap warna.
Tidak Menyimpan Dokumentasi Warna
Tanpa dokumentasi, anggota tim dapat memakai kode yang berbeda untuk fungsi yang sama. Simpan palet dalam design system, CSS variables, atau panduan merek.
Pertanyaan Umum tentang Kode Warna RGB dan HEX
Apa perbedaan utama RGB dan HEX?
RGB menuliskan nilai merah, hijau, dan biru dalam angka desimal. HEX menuliskan nilai yang sama dalam format heksadesimal. Keduanya dapat menghasilkan warna identik.
Apakah HEX hanya digunakan untuk website?
HEX sangat umum digunakan dalam website dan CSS, tetapi juga dapat dipakai dalam aplikasi desain, dokumentasi merek, dan komunikasi warna digital.
Berapa nilai maksimal RGB?
Dalam format RGB delapan bit yang umum, setiap kanal mempunyai nilai dari 0 sampai 255.
Apa arti FF pada kode HEX?
FF merupakan nilai tertinggi untuk satu kanal warna dalam format HEX dua digit. Nilainya setara dengan 255 dalam sistem desimal.
Apakah huruf pada HEX harus kapital?
Tidak. #FFFFFF dan #ffffff menghasilkan nilai yang sama. Kapitalisasi dapat dipilih berdasarkan gaya penulisan proyek.
Apa kode HEX warna transparan?
Transparansi dapat ditulis menggunakan HEX delapan digit dalam format #RRGGBBAA. Nilai alpha 00 berarti transparan penuh, sedangkan FF berarti tidak transparan.
Apakah kode RGB dan HEX cocok untuk cetak?
Keduanya dapat menjadi referensi, tetapi produksi cetak umumnya memakai CMYK atau standar yang ditentukan percetakan. Hasil cetak perlu diuji secara fisik.
Mengapa kode yang sama terlihat berbeda pada dua layar?
Perbedaan dapat disebabkan karakter panel, kalibrasi, tingkat kecerahan, profil warna, mode tampilan, dan kondisi pencahayaan ruangan.
Mana yang lebih baik, HEX atau RGB?
Tidak ada yang selalu lebih baik. HEX lebih ringkas, sedangkan RGB lebih mudah dibaca ketika ingin melihat intensitas setiap kanal. Gunakan format yang paling sesuai dengan alur kerja proyek.
Kesimpulan
Kode warna HEX dan RGB merupakan dua format utama untuk mendefinisikan warna pada media digital. RGB menggunakan nilai merah, hijau, dan biru dari 0 sampai 255, sedangkan HEX menuliskan nilai yang sama dalam format heksadesimal #RRGGBB.
HEX dan RGB dapat dikonversi satu sama lain tanpa mengubah warna jika perhitungannya benar. Keduanya dapat digunakan dalam CSS, aplikasi desain, dokumentasi brand, serta berbagai proyek digital. Untuk hasil yang konsisten, simpan palet dalam dokumentasi, gunakan kode berdasarkan fungsi, periksa kontras, dan uji tampilan pada beberapa perangkat.
Untuk kebutuhan cetak, jangan hanya mengandalkan nilai RGB atau HEX. Siapkan konversi CMYK, gunakan profil warna yang sesuai, dan lakukan uji cetak sebelum produksi dalam jumlah besar.
