Bahasa Indonesia
Cara mengubah kode warna HEX ke RGB
Alat konversi kode warna ini mengubah kode HEX ke RGB, HSL, HSV, CMYK, dan OKLCH begitu kamu mengetik, dan bisa juga sebaliknya. Tempel rgb(255, 99, 71) ke kotak mana pun, hasilnya #FF6347. Tidak perlu mencari kolom yang pas, semua kotak menerima semua format.
Kalau mau menghitung sendiri, kode HEX sebenarnya tiga angka yang ditulis dalam basis 16. Ambil #3B82F6, pecah jadi tiga pasang, lalu ubah tiap pasang:
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)
Konversi RGB ke HEX tinggal dibalik. Bagi tiap angka dengan 16: hasil bulatnya jadi digit pertama, sisanya jadi digit kedua. 206 dibagi 16 adalah 12 sisa 14, jadi CE. 17 adalah 1 sisa 1, jadi 11. 38 adalah 2 sisa 6, jadi 26. Maka rgb(206, 17, 38) sama dengan #CE1126. Huruf A sampai F mewakili angka 10 sampai 15.
Kode warna untuk Canva, Word, dan aplikasi desain
Hampir semua aplikasi desain menerima kode HEX 6 digit, jadi itu format paling aman untuk dibagikan ke tim atau klien.
- Canva: klik elemen, buka kotak warna, lalu ketik kode di kolom HEX (misalnya #3B82F6). Transparansi diatur lewat menu terpisah, jadi salin kode tanpa alpha.
- Word dan PowerPoint: Warna Font atau Isian Bentuk → Warna Lainnya → Kustom. Microsoft 365 punya kolom Hex; versi lama hanya punya kolom Merah, Hijau, Biru, jadi pakai baris RGB dari alat ini.
- CSS dan website: semua format di atas bisa dipakai langsung, tinggal klik Salin.
- Percetakan: biasanya meminta CMYK. Angka CMYK di sini dihitung dengan rumus standar, bukan profil warna mesin cetak, jadi untuk spanduk atau kartu nama tetap minta proof cetak dulu. Biru terang di layar hampir selalu tampil lebih kusam di kertas.
Tabel kode warna yang sering dipakai
| Warna | HEX | RGB | CMYK |
|---|---|---|---|
| Putih | #FFFFFF | 255, 255, 255 | 0, 0, 0, 0 |
| Hitam | #000000 | 0, 0, 0 | 0, 0, 0, 100 |
| Merah | #FF0000 | 255, 0, 0 | 0, 100, 100, 0 |
| Oranye kemerahan | #EE4D2D | 238, 77, 45 | 0, 68, 81, 7 |
| Emas (gold) | #FFD700 | 255, 215, 0 | 0, 16, 100, 0 |
| Hijau toska (teal) | #008080 | 0, 128, 128 | 100, 0, 0, 50 |
| Biru dongker (navy) | #000080 | 0, 0, 128 | 100, 100, 0, 50 |
| Ungu | #663399 | 102, 51, 153 | 33, 67, 0, 40 |
Kode HEX juga bisa 3, 4, atau 8 digit. #F60 adalah singkatan #FF6600 (tiap digit digandakan). Versi 8 digit menambahkan transparansi di akhir: #3B82F680 berarti biru yang sama dengan opasitas sekitar 50%.
Cek kontras warna supaya teks tetap terbaca
Teks oranye muda di atas putih memang cantik di Canva, tapi di HP saat siang hari sering tidak terbaca. Standar WCAG mengukurnya dengan rasio kontras dari 1:1 sampai 21:1:
| Level | Teks biasa | Teks besar (24 px, atau 18,66 px tebal) |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Contoh nyata di atas latar putih: abu-abu #767676 punya rasio 4,54:1 dan lolos AA, sedangkan #777777 yang nyaris sama hanya 4,48:1 dan gagal. Oranye #EE4D2D cuma 3,66:1, jadi aman untuk tombol dengan tulisan besar, tapi kurang untuk teks harga yang kecil.
Kalau warnamu gagal, alat ini mencari gradasi terdekat dengan hue yang sama yang lolos. Untuk #EE4D2D di atas putih, sarannya #DF3412 untuk AA (4,53:1) dan #A9270E untuk AAA (7,04:1). Klik Pakai untuk mencobanya. Untuk warna kuning dan emas, sarannya hampir selalu jauh lebih gelap; lebih baik jadikan kuning sebagai latar dan taruh teks hitam di atasnya. #FFD700 dengan teks hitam rasionya hampir 15:1.
Ambil kode warna dari gambar dan buat palet
Dapat logo klien dalam bentuk JPG tanpa kode warna? Unggah gambarnya di panel Ambil warna dari gambar, lalu ketuk bagian logonya. Untuk foto atau JPG hasil kompres WhatsApp, pilih rata-rata 3×3 atau 5×5, karena satu piksel sering sedikit meleset akibat kompresi. Di Chrome dan Edge ada tombol Ambil dari layar untuk mengambil warna dari bagian mana pun di layar. Gambar tidak di-upload ke mana pun.
Dari satu warna, panel palet membuat gradasi 50 sampai 950 (penamaan ala Tailwind), serta skema komplementer, analog, triadik, split, persegi, dan monokrom. Cocok untuk menyusun warna feed Instagram UMKM atau tema undangan digital. Klik kotak warna untuk menyalin kodenya, lalu ekspor semuanya sebagai variabel CSS, SCSS, JSON, atau unduh PNG untuk dikirim ke klien dan dijadikan panduan warna.
RGB atau CMYK, kapan pakai yang mana?
Pakai RGB atau HEX untuk semua yang dilihat di layar: konten media sosial, website, presentasi. Pakai CMYK hanya kalau percetakan memintanya. Mengirim desain RGB ke percetakan tidak salah, mesin mereka akan mengonversinya, tapi warna yang terlalu terang seperti hijau neon #00FF00 tidak bisa dicetak persis sama dan akan bergeser.
Pertanyaan yang sering diajukan
Bagaimana cara mengubah kode HEX ke RGB?
Pecah enam digit HEX jadi tiga pasang, lalu ubah tiap pasang dari basis 16 ke angka 0 sampai 255. #3B82F6 menjadi 3B = 59, 82 = 130, F6 = 246, jadi RGB-nya rgb(59, 130, 246).
Bagaimana cara konversi RGB ke HEX?
Tulis tiap kanal sebagai dua digit heksadesimal lalu gabungkan setelah tanda #. Contohnya rgb(206, 17, 38) menjadi CE, 11, 26, jadi kodenya #CE1126.
Di mana memasukkan kode warna HEX di Canva?
Klik elemen, pilih kotak warna, lalu ketik kode di kolom HEX pada bagian warna baru, misalnya #3B82F6. Canva memakai HEX 6 digit dan mengatur transparansi lewat menu tersendiri, jadi salin kode tanpa alpha.
Berapa rasio kontras minimal agar teks mudah dibaca?
Standar WCAG AA meminta minimal 4,5:1 untuk teks biasa dan 3:1 untuk teks besar (24 px, atau 18,66 px tebal). Abu-abu #767676 di atas putih punya rasio 4,54:1, abu-abu paling terang yang masih lolos untuk teks isi.
Apa arti kode HEX 8 digit?
Dua digit terakhir adalah alpha atau tingkat transparansi. #3B82F680 berarti biru yang sama dengan opasitas 128/255, sekitar 50%, sama dengan rgba(59, 130, 246, 0.5).
Apakah kode CMYK dari sini bisa langsung dipakai untuk cetak?
Bisa sebagai titik awal, tapi bukan jaminan hasil cetak. Rumusnya standar, jadi #3B82F6 menjadi cmyk(76%, 47%, 0%, 4%), sedangkan hasil di kertas bergantung pada profil warna mesin dan jenis kertas percetakan.
Bagaimana cara mengambil kode warna dari gambar atau logo?
Unggah gambar di panel di atas lalu ketuk titik warnanya, kode HEX langsung muncul. Untuk foto pilih rata-rata 3×3 atau 5×5, karena satu piksel di foto JPG sering sedikit berbeda dari warna yang terlihat.
Apa bedanya kode warna RGB dan CMYK?
RGB untuk layar (cahaya merah, hijau, biru), CMYK untuk cetak (tinta cyan, magenta, kuning, hitam). Desain untuk Instagram atau website pakai RGB/HEX, desain untuk spanduk atau kartu nama biasanya diminta dalam CMYK.