√ 4 Cara Mengetahui Kode Warna HEX & RGB dari Gambar Terbaru 2020

Cara Mengetahui Kode Warna

Bagaimana cara mengetahui kode warna HEX dan RGB dengan cepat? Asalkan kita tahu trik nya, tidak susah sekali kok. Hanya saja membutuhkan sedikit usaha.

Jika anda seorang designer atau programmer pasti sudah tidak asing lagi dengan kode warna HTML, HEX, dan RGB ini. Pasalnya, kita sering menemukan warna yang cantik sekali pada suatu website atau gambar. Nah tentu kita juga ingin mencoba warna tersebut untuk referensi bukan? Walaupun pada faktanya ada fasilitas Color Palette yang mempercepat pekerjaan kita.

Apalagi bagi anda yang setiap hari bekerja dengan CSS (Cascading Style Sheet), pasti sangat membutuhkan kode warna HTML ini.

Diluar sana, ada banyak sekali situs online yang bisa kita manfaatkan untuk mendapatkan kode warna dari sebuah gambar. Selain itu, kita juga bisa menggunakan Aplikasi offline seperti Photoshop loh.

Tapi sebelum itu, apakah anda sudah yakin tahu apa itu kode warna?

Apa itu Kode Warna?

Sederhananya, kode warna adalah kumpulan kode HTML yang biasanya terdiri dari unsur HEX (Hexadecimal) dan RGB. Misalnya untuk HEX adalah #000000 (warna hitam) dengan RGB (0, 0, 0).

Apa Manfaat Mengetahui Kode Warna?

Manfaat yang bisa kita dapatkan dari mendapatkan kode warna ada banyak sekali. Diantaranya seperti :

  • Untuk mengganti kode warna pas foto, seperti warna merah dan biru.
  • Referensi warna yang cocok untuk sebuah gambar.
  • Mendesain suatu struktur kode CSS dalam HTML website.
  • dan masih banyak lagi.

Cara Mengetahui Kode Warna HEX dan RGB pada Sebuah Gambar

Seperti yang saya bilang pada sebelumnya, disini kita akan menggunakan cara situs online, dan offline menggunakan photoshop. Jadi silahkan dipilih sesuai dengan kenyamanan anda.

1. Situs Online

Ada banyak sekali website online yang menyediakan fitur pencarian kode warna ini, biasanya sih di sebut dengan Image Color Picker.

Nah yang pertama, kita bisa menggunakan Imagecolorpicker.com. Saya pribadi, sering menggunakan website ini untuk menunjang aktivitas coding css saya, maupun desain.

Oh iya, jangan lupa persiapkan gambar yang ingin anda ketahui warnanya.

Cara Mengetahui kode warna dengan Imagecolorpicker :

  1. Pertama, silahkan kunjungi ImageColorPicker.com melalui browser yang anda gunakan.
  2. Scroll ke bawah, dan klik Upload your Image. Kemudian masukkan gambar yang ingin anda ketahui kode warna nya.
Cara mengetahui kode warna hex dari gambar
  1. Kemudian arahkan pointer anda ke bagian gambar yang ingin anda dapatkan warna tersebut. Dengan otomatis, akan muncul kode HTML/HEX dan RGB pada sebelah kiri.
Cara mengetahui kode warna hex dari gambar2
  1. Nah contohnya punya saya kode HEX nya adalah #4987eb dengan RGB (73, 135, 235).
  2. Selesai. Mudah sekali bukan?

Baca Juga : Cara Memperbesar Ukuran Foto

Cara Mendapatkan Kode Warna dengan ColorCodePicker :

Ini untuk alternatif dari website sebelumnya. Untuk berjaga-jaga saja jika website sebelumnya terjadi gangguan atau bahkan down.

  1. Buka ColorCodePicker melalui browser anda.
  2. Di halaman depan, Pilih Upload Image dan masukkan gambar anda.
cara mendapatkan kode warna pada sebuah gambar
  1. Kemudian website tersebut akan memunculkan kode warna apa saja yang ada pada gambar yang barusan kita upload.
cara mendapatkan kode warna pada sebuah gambar2

Baca Juga : Cara Mengganti Background Foto

2. Photoshop

Cara yang kedua kita menggunakan aplikasi offline yaitu photoshop. Tapi tenang, anda pasti berpikir bahwa menggunakan aplikasi ini sangat susah untuk di operasikan bukan?

Jangan khawatir dulu ya, disini saya akan menjabarkan dengan jelas step by step nya. Caranya juga gampang sekali. Pastikan anda sudah punya Aplikasi Photoshop yang sudah terinstall. Versi berapa saja terserah, tidak ada ketentuan.

  1. Buka Aplikasi Photoshop anda.
  2. Pada halaman depan yang sudah terbuka, Tekan di keyboard dengan Shortcut yaitu CTRL + O atau File > Open…
cara mengetahui kode warna rgx hex dengan photoshop
  1. Cari file gambar anda.
  2. Selanjutnya kita akan bekerja dengan toolbar yang anda di photoshop yaitu Eyedropper tool.
  3. Lihat di bagian kiri, cari Eyedropper tool (ada di bawah Crop Tool) seperti gambar dibawah ini.
cara mengetahui kode warna rgx hex dengan photoshop2
  1. Jika sudah, klik sekali Color Picker seperti gambar berikut ini. Sehingga akan muncul jendela kode warna.
cara mengetahui kode warna rgx hex dengan photoshop3
  1. Terakhir, arahkan eyedropper tool nya ke gambar tersebut. Dengan otomatis photoshop akan memunculkan kode RGB dan HEX.
cara mengetahui kode warna rgx hex dengan photoshop4

Apakah Ada Alternatif Melihat Kode Warna Selain Photoshop?

Jawaban nya ada. Saya yakin aplikasi ini semua orang pasti punya. Apa itu? PowerPoint. Banyak yang meremehkan PPT ini, padahal dengan PowerPoint kita juga bisa membuat video dan edit foto loh. Selain itu, Aplikasi ini tentu juga sangat ringan untuk digunakan jika dibandingkan dengan photoshop.

Lalu bagaimana caranya untuk mendapatkan kode warna menggunakan PowerPoint? Sama dengan photoshop, kita juga bisa menggunakan Eyedropper tool pada PowerPoint. Silahkan disimak.

  1. Buka PowerPoint pada Laptop/PC anda.
  2. Masukkan gambar dengan cara pergi ke tab Insert > Pictures.
  3. Jika sudah, Klik kanan pada lembar kerja powerpoint dan Pilih Format Background.
cara mendapatkan kode warna hex rgb dengan powerpoint
  1. Selanjutnya akan muncul jendela di kanan. Klik Color > Eyedropper.
cara mendapatkan kode warna hex rgb dengan powerpoint2
  1. Lalu arahkan ke gambar yang ingin anda ketahui warnanya.
  2. Otomatis warna background tersebut akan mengikuti warna yang telah anda pilih tadi. Jangan khawatir. Lanjutkan saja.
  3. Masih di Format Background tadi, Pilih Color > More Colors.
  4. Muncul Jendela baru lagi, nah disitu anda akan melihat seluruh kode Hex dan RGB.
cara mendapatkan kode warna hex rgb dengan powerpoint3

Kekurangan Menggunakan PowerPoint

Seperti yang kita ketahui, semua aplikasi pasti mempunyai kekurangan masing-masing. Nah powerpoint juga sebenarnya lebih fokus pada dunia presentasi. Dengan cara tadi, yang saya rasakan sih kode HEX dan RGB nya kurang akurat. Tapi ini bisa jadi pilihan alternatif yang sangat bagus selain photoshop sih.

Penutup

Usai sudah Rekomendasi Cara Mengetahui Kode Warna RGB dan HEX secara lengkap. Semua tutorial diatas saya praktekkan sendiri, dan tidak ada mengada-ngada. Jika anda mengikuti dengan hati-hati pasti berhasil. Demikian lah dari artikel ini, apabila anda mempunyai pertanyaan seputar cara mendapatkan kode warna melalui gambar ini, jangan sungkan untuk berkomentar dibawah ini ya. Semoga bermanfaat.

Tinggalkan komentar