Bagaimana cara mengetahui kode warna dari gambar?

Buka gambar di alat ini lalu ketuk bagian yang warnanya ingin Anda ketahui. Kode HEX, RGB, HSL, dan CMYK langsung muncul. Untuk warna dari logo di situs lain, ambil screenshot dulu lalu buka di sini.

Apa bedanya kode warna HEX dan RGB?

Keduanya menunjukkan warna yang sama dengan cara tulis berbeda. RGB menulis nilai merah, hijau, dan biru dari 0 sampai 255, sedangkan HEX menulis tiga nilai itu dalam bilangan heksadesimal setelah tanda pagar, misalnya #1E88E5.

Bagaimana cara mengubah kode HEX ke RGB?

Ketik kode HEX di kolomnya, dan nilai RGB langsung tampil di sebelahnya. Konversi berlaku dua arah, jadi Anda juga bisa mengetik RGB atau HSL untuk mendapatkan HEX.

Kode warna apa yang dipakai di Canva?

Canva memakai kode HEX, misalnya #1E88E5. Salin kode HEX dari alat ini, lalu tempel di kolom warna kustom Canva. Untuk desain yang akan dicetak, tanyakan juga ke percetakan apakah mereka membutuhkan nilai CMYK.

Kenapa warna hasil cetak berbeda dengan di layar?

Layar memancarkan cahaya RGB, sedangkan printer memakai tinta CMYK yang rentang warnanya lebih sempit. Warna terang seperti hijau neon sering terlihat lebih pudar saat dicetak. Angka CMYK di sini hanya perkiraan; minta contoh cetak sebelum mencetak dalam jumlah banyak.

Berapa kontras warna yang baik untuk teks?

Minimal 4,5:1 untuk teks berukuran biasa agar lolos WCAG AA, dan 7:1 untuk level AAA. Alat ini menampilkan rasio warna terhadap teks putih dan hitam, sehingga Anda tahu warna tulisan mana yang lebih aman dipakai.

Kode Warna HEX, RGB, dan Color Picker Online

Pilih warna lewat roda warna, ketik kodenya, atau ambil dari foto. Kode HEX, RGB, HSL, dan CMYK langsung tampil dan bisa disalin sekali ketuk.

Gratis dan tanpa daftar. Teks yang Anda ketik tidak keluar dari browser.

Kode warna (HEX, RGB, atau HSL)

Ambil dari gambar

HEX
RGB
HSL
CMYK (perkiraan)
Kontras teks

Lebih terang

Lebih gelap

Kombinasi

Cara memakai Kode Warna

Pilih warna di roda warna, atau ketik kode yang sudah Anda punya, misalnya #1E88E5 atau rgb(30, 136, 229).
Untuk mengambil warna dari logo atau foto produk, buka gambarnya lalu ketuk piksel yang diinginkan. Di Chrome atau Edge desktop, tombol Ambil dari layar bisa mengambil warna dari mana saja di layar.
Salin kode yang dibutuhkan: HEX untuk web dan Canva, RGB untuk aplikasi desain, CMYK untuk percetakan.
Gulir ke bawah untuk melihat cek kontras, gradasi lebih terang dan lebih gelap, serta kombinasi warna.

Membaca kode warna, kontras, dan kombinasi

HEX, RGB, HSL, dan CMYK

HEX dan RGB adalah dua cara menulis warna yang sama untuk layar: #FF0000 sama dengan rgb(255, 0, 0). HSL menulis warna sebagai rona, saturasi, dan kecerahan, sehingga lebih mudah dipakai untuk membuat versi lebih terang atau lebih pudar dari warna yang sama. CMYK adalah campuran tinta untuk cetak. Angka CMYK di sini perkiraan, karena percetakan mengonversi warna dengan profil warna ICC sesuai mesin dan kertasnya. Minta contoh cetak dulu untuk spanduk, kemasan, atau kartu nama.

Cek kontras untuk teks

Alat ini menghitung rasio kontras warna terhadap teks putih dan teks hitam, lalu menunjukkan apakah lolos standar WCAG AA dan AAA. Untuk teks berukuran biasa, level AA meminta rasio minimal 4,5:1. Ini berguna saat memilih warna tombol situs, latar slide presentasi, atau desain feed Instagram yang memuat tulisan, karena warna yang tampak cantik di laptop bisa sulit dibaca di layar HP saat siang terik.

Gradasi dan kombinasi warna

Setiap warna dilengkapi deretan tingkat lebih terang (tint) dan lebih gelap (shade), praktis untuk menyusun palet satu warna untuk logo UMKM, menu kafe, atau tema undangan. Bagian harmoni menampilkan warna komplementer (berseberangan di roda warna), analog (warna bersebelahan), dan triadik (tiga warna berjarak sama). Setiap nilai bisa disalin sekali ketuk, jadi palet lengkap bisa dipindahkan ke Canva atau Figma dalam beberapa menit.

Gambar dibaca di perangkat Anda

Saat Anda mengambil warna dari foto, gambar dibuka langsung oleh browser dan pikselnya dibaca di perangkat Anda; file tidak diunggah ke server. Jadi aman memakai desain yang belum dirilis atau foto produk milik klien. Pipet layar memerlukan Chrome atau Edge di komputer. Di HP, ambil tangkapan layar dari aplikasi atau situs yang warnanya Anda inginkan, lalu buka gambar itu di sini.

Pertanyaan yang sering diajukan

Bagaimana cara mengetahui kode warna dari gambar?: Buka gambar di alat ini lalu ketuk bagian yang warnanya ingin Anda ketahui. Kode HEX, RGB, HSL, dan CMYK langsung muncul. Untuk warna dari logo di situs lain, ambil screenshot dulu lalu buka di sini.
Apa bedanya kode warna HEX dan RGB?: Keduanya menunjukkan warna yang sama dengan cara tulis berbeda. RGB menulis nilai merah, hijau, dan biru dari 0 sampai 255, sedangkan HEX menulis tiga nilai itu dalam bilangan heksadesimal setelah tanda pagar, misalnya #1E88E5.
Bagaimana cara mengubah kode HEX ke RGB?: Ketik kode HEX di kolomnya, dan nilai RGB langsung tampil di sebelahnya. Konversi berlaku dua arah, jadi Anda juga bisa mengetik RGB atau HSL untuk mendapatkan HEX.
Kode warna apa yang dipakai di Canva?: Canva memakai kode HEX, misalnya #1E88E5. Salin kode HEX dari alat ini, lalu tempel di kolom warna kustom Canva. Untuk desain yang akan dicetak, tanyakan juga ke percetakan apakah mereka membutuhkan nilai CMYK.
Kenapa warna hasil cetak berbeda dengan di layar?: Layar memancarkan cahaya RGB, sedangkan printer memakai tinta CMYK yang rentang warnanya lebih sempit. Warna terang seperti hijau neon sering terlihat lebih pudar saat dicetak. Angka CMYK di sini hanya perkiraan; minta contoh cetak sebelum mencetak dalam jumlah banyak.
Berapa kontras warna yang baik untuk teks?: Minimal 4,5:1 untuk teks berukuran biasa agar lolos WCAG AA, dan 7:1 untuk level AAA. Alat ini menampilkan rasio warna terhadap teks putih dan hitam, sehingga Anda tahu warna tulisan mana yang lebih aman dipakai.

Semua alat Utilitas · Diperbarui 12 Oktober 2026 ·