JAM - O'CLOCK

Flag Counter SELAMAT DATANG DI BLOG ZONA TUTORIAL
TERIMA KASIH ATAS KUNJUNGANNYA

Senin, 20 September 2021

Tips Agar Akun YouTube Anda Tidak Bisa Diretas oleh Hacker

 

Lima Tips Agar Akun YouTube Anda Tidak Bisa Diretas oleh Hacker



Bagi content creator (pembuat konten) di platform streaming video YouTube, berhasil memiliki jumlah subscribers (pengikut) dan viewers (penonton) yang cukup banyak dan meningkat dari waktu ke waktu merupakan suatu pencapaian yang luar biasa.

Apalagi, pencapaian itu akan membuat content creator dapat memonetisasi setiap karya video di-channel-nya dengan pundi-pundi rupiah dan kemungkinan mendapat endorsement (sponsor) dari banyak brand (merek).

Akan tetapi, sebagai content creator di YouTube atau biasa disebut YouTuber yang telah memiliki jumlah subscribers dan viewers yang cukup banyak, tentunya penting untuk memperhatikan satu aspek, yaitu keamanan akun.

Pasalnya, dengan semakin menjamurnya YouTuber, semakin menjamur pula para hacker (peretas/penjahat siber) yang menargetkan untuk meretas/membobol akun para YouTuber.

Setiap tahunnya, tak sedikit muncul berita tentang akun para YouTuber besar yang mengalami kasus peretasan akun, baik YouTuber dalam maupun luar negeri.

Jika ditelisik, ada beberapa tujuan utama dari aksi peretasan akun YouTuber yang dilakukan hacker tersebut, yaitu untuk tujuan mining (cryptocurrency), menjual akun ke pihak lain, atau meminta tebusan ke korbannya (pemilik akun YouTube).

Nah bagi para YouTuber, sebenarnya ada beberapa langkah yang bisa diterapkan agar terhindar dari kasus peretasan akun. Berikut di antaranya:

1. Password yang Kuat

Gunakanlah password (kata sandi) yang sulit untuk ditebak oleh siapapun, termasuk hacker.

Disarankan, buatlah password dengan panjang lebih dari 10 karakter. Semakin berbeda karakter password yang dibuat, semakin lama waktu yang diperlukan hacker untuk membobol akun Anda.

Oh ya, salah satu tips membuat password yang mudah diingat yakni menggunakan teknik mnemonik.

Misalnya, buat kalimat seperti “Aku suka makan pizza bersama teman supaya senang” dan gunakan sebagai mnemonik untuk membuat password “1SmpBtss.”

Perlu diingat, hindari menggunakan password dengan kombinasi nama Anda dan tanggal lahir Anda karena berpotensi sangat mudah diretas oleh hacker.

2. Aktifkan fitur 2FA (Two-Factor Authentication)

Setelah menggunakan password yang kuat, mengaktifkan fitur 2FA dapat menambah lapisan keamanan akun YouTube Anda.

Dengan mengaktifkan fitur ini, jika suatu waktu hacker memiliki password Anda dan ingin melakukan login (masuk), tentunya mereka tidak bisa melakukannya.

Karena, fitur ini akan mewajibkan setiap perangkat baru yang ingin login untuk melakukan persetujuan dari device/gadget yang sebelumnya sudah terhubung dengan akun tersebut.

Jadi, akun YouTube Anda bisa jadi lebih aman bukan?

3. Update software dan browser

Update merupakan salah satu hal yang dilakukan developer (pengembang) untuk meningkatkan platform yang dibuatnya, termasuk dari faktor keamanan.

Oleh karena itu, usahakan selalu update software/aplikasi YouTube Anda dan juga browser yang biasa dipakai untuk mengakses akun YouTube Anda.

Jangan sampai, karena menggunakan software/aplikasi atau browser yang usang, menjadi celah bagi hacker untuk meretas akun YouTube Anda.

4. Tambahkan atau perbarui opsi pemulihan akun

Lapisan keamanan lain yang bisa Anda lakukan yakni menambahkan nomor ponsel atau alamat email untuk pemulihan jika sewaktu-waktu ada masalah pada akun Anda.

Pemulihan akun dapat digunakan untuk:

  • Memblokir siapapun agar tidak dapat menggunakan akun Anda tanpa izin
  • Memberi tahu Anda jika ada aktivitas mencurigakan di akun Anda
  • Memulihkan akun Anda jika suatu saat terkunci

5. Hindari membuka email yang mencurigakan

Bagi YouTuber dengan jumlah subscriber dan viewers dengan angka lumayan atau besar, tentu akan mendapat tawaran endorsement/sponsor dari berbagai brand (merek).

Tawaran ini awalnya biasa didapatkan melalui via email yang terhubung dengan akun YouTube yang dimiliki.

Namun, selalu berhati-hati ketika membuka email terkait penawaran tersebut. Bisa jadi, itu bukan tawaran kerja sama sungguhan tetapi malah email penipuan dari hacker yang bertujuan meretas akun Anda dengan teknik phising.

Phishing adalah ketika hacker menyamar sebagai seseorang yang dapat dipercaya untuk mengambil informasi pribadi, seperti data keuangan, nomor KTP/nomor jaminan sosial, atau nomor kartu kredit.

Dalam kasus ini, hacker dapat berpura-pura menjadi institusi, anggota keluarga, atau rekan kerja dengan menggunakan email, SMS, halaman web, dan sebagainya.

Selain tawaran kerja sama, waspadai email yang mengatasnamakan dari pihak YouTube atau Google.

Apalagi, jika di dalam email tersebut meminta password, alamat email, atau informasi akun lainnya. Sudah pasti, itu adalah upaya peretasan terhadap akun Anda.

Sabtu, 18 September 2021

Cara Mudah Membuat Tabel Kolom dalam Postingan Blog

 

Cara Mudah Membuat Tabel Kolom dalam Postingan Blog

CARA MENDAFTARKAN BLOG KE SEARCH ENGINE GOOGLE 2021


Blog yang baru jika ingin terindex di search engine terbaik google dengan cepat maka harus segera mendaftarkan nya ke Google Webmaster Tools berikut yang merupakan layanan gratis buat blog, wordpress maupun website agar di index oleh Google dan untuk memantau jika ada halaman yang error. Setelah mendaftar blog di Google Webmaster Tool sobat juga akan submit sitemap supaya google dapat meng crawl peta situs tersebut dan tidak lupa untuk verifikasi kepemilikan blog dengan cara mendapatkan kode terlebih dahulu setelah daftar lalu memasukkan nya ke edit html di blogger / blogspot yang akan dijelaskan di bawah dengan mudah.







Kali ini saya akan share gimana Cara Mendaftarkan Blog Ke Search Engine Google Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin agar blog nya ada dan masuk di halaman pencarian google.

Cara Mendaftarkan Blog Ke Google Webmaster Tool :

1. Buka alamat web www.google.com/webmasters lalu klik Sign in to Webmaster Tools.

Cara Mendaftarkan Blog Ke Search Engine Google

2. Kemudian masuk dengan memakai email Gmail dan isi password lalu klik Sign.




3. Masukkan alamat blog atau website yang akan di daftarkan lalu klik ADD A SITE.

Cara Mendaftarkan Blog Ke Search Engine Google

4. Your site has been added to your account, blog sudah ditambahkan lalu untuk Cara Submit Sitemap Blog Ke Google Webmaster Tool bisa klik Sitemap seperti gambar berikut.

Cara Mendaftarkan Blog Ke Search Engine Google

5. Lihat di sebelah atas kanan layar klik ADD/TEST SITEMAP, ketikan sitemap.xml pada kotak yang ada lalu klik Submit Sitemap.




6. Tunggu proses submit sampai tertulis Sitemap submitted lalu klik Refresh the page.

Cara Mendaftarkan Blog Ke Search Engine Google

7. Jika sudah maka sitemap sudah tersubmit dengan status pending seperti gambar berikut karena membutuhkan waktu untuk google menjelajahi situs nya kemudian untuk Cara Verifikasi Blog di Google Webmaster Tool dengan klik ikon gear yang ada di sebelah kanan atas layar lalu klik Verification Details.

Cara Mendaftarkan Blog Ke Search Engine Google

8. Maka akan muncul tampilan berikut lalu klik Verify using a different method.

Cara Mendaftarkan Blog Ke Search Engine Google

9. Ada 5 pilihan seperti HTML file upload, HTML tag, Domain name provider, Google Analytics, Google tag manager dan untuk mendapatkan kode verifikasi yang akan dimasukkan ke Blog pilih HTML tag lalu copy semua kode tersebut dan jangan ditutup dulu halaman ini.

Cara Mendaftarkan Blog Ke Search Engine Google

10. Buka New Tab Baru pada browser untuk masuk ke blogger / blogspot kemudian pilih menu Template lalu klik Edit HTML.

Cara Mendaftarkan Blog Ke Search Engine Google

11. Paste semua kode yang telah di copy tersebut tepat dibawah kode <head> seperti gambar dibawah ini jika sudah lalu klik Simpan template.




12. Setelah template sudah tersimpan kemudian buka lagi halaman verifikasi yang tadi lalu klik VERIFY.




13. Jika verifikasi sukses maka akan muncul tampilan seperti berikut lalu klik Continue.




14. Selesai blog sudah terdaftar, sitemap atau peta situs sudah tersubmit, dan blog sudah terverifikasi di Google WMT.



Nb : Jika sudah daftar di search engine google maka jangan lupa juga mendaftarkan blogspot ke yahoo / bing webmaster caranya klik disini.

Nah itulah bagaimana cara mendaftarkan blog ke mesin pencari google terbaru.

Silahkan dicoba

Jumat, 17 September 2021

Cara Menata dan menyusun Beberapa Gambar/Foto di Postingan Blog

 

Jumat, 17 September 2021

Cara Menata dan Mengedit Beberapa Gambar/Foto di Postingan Blog

 

Cara Menata dan menyusun Beberapa Gambar/Foto di Postingan Blog





Ketika pertama kali belajar menulis artikel di blog, ada kesulitan saat hendak mengatur atau menata banyak gambar atau foto, maklum saat itu jenis artikel yang hendak di posting berjudul: "Gambar Masjid di Afrika, di Asia, Masjid Tertua, Daftar Masjid di Jatim, dll." Problemnya adalah: gambar-gambar itu susah diatur; fasilitas yang ada seperti size (small, medium. large, original) dan Posisi (left, center, right) tidaklah membantu banyak, bahkan terkadang di klik kanan larinya ke kiri, di geser ke atas malah anjlok ke bawah. Bagaimana ini ? 
Sebaik apapun artikel atau posting, apabila tampilannya tidak ditata dengan baik tentu akan membuat pengunjung malas untuk berlama-lama menikmati suguhan posting yang sudah dibuat dengan begitu serius dan bahkan menghabiskan banyak waktu dan tenaga. Banyak blogger yang masih dalam tahap awal terjun di dunia blog mengalami kesulitan untuk melakukan penataan sekaligus merubah ukuran gambar yang akan ditampilkan. Kenyataan seperti ini tidak dapat dipungkiri karena pemahaman tentang kode HTMl tidak bisa dilakukan tanpa tuntunan dari blogger yang sudah cukup matang di dunia blog, terutama yang mendalami tentang desain sebuah blog. Bagaimana supaya dapat secara cepat mengatasi permasalahan tampilan gambar di postingan? Bukan sesuatu yang sulit karena kode html yang digunakan sekedar untuk sedikit mempengaruhi penataan dan penampilan gambar tidaklah banyak dan rumit. Hanya beberapa kode sederhana kita tambahkan pada file gambar, maka jadilah sebuah tampilan posting yang sedap dipandang sekaligus enak untuk dinikmati.
Alhamdulillah problem tersebut sekarang sudah bisa diatasi, sudah ketemu skrip yang dapat menata gambar dan foto sekehendak yang kita mau.
Tapi sebelum saya bagi tipsnya, akan saya ajak pembaca memahami apa yang saya maksudkan, dengan membuat pembanding gambar sebelum dan sesudah memakai skrip  tokcer ini.

1. Gambar / Foto Sebelum Menggunakan Schript

Hanya memasukkan tiga foto, tapi mengaturnya agar rapi dan sejajar susah sekali - berantakan - padahal sudah menggunakan ukuran terkecil dan sudah bolak-balik merubah posisi (left - center - right).



2. Gambar / Foto Setelah Menggunakan Schript

Berapapun jumlah gambar dan foto yang hendak dimuat, sangat mudah mengatunya, baik itu ukuran maupun posisi kita bisa menyetel sesuka hati.
A. Contoh gambar dengan garis (border=1,2,3, dst.)
Masjid Ath-Thin; Jakarta
Masjid Islamic C., Samarinda
Masjid M.Cheng Ho, Surabaya

B.Contoh gambar tanpa garis (border=0)

      
Masjid Ath-Thin; Jakarta
Masjid Islamic C. Jakarta
Masjid M.Cheng Ho, Surabaya

3. Script dan Penjelasannya

Ketika anda sedang membuat artikel dan hendak menambahkan foto /gambar, caranya :
1Klik HTML (di kiri atas halaman editing artikel)
2. copy paste skrip di bawah di tempat di mana anda mau meletakkan foto/gambar. (Skript berikut porsinya 6 gambar + 6 nama/keterangan gambar, anda dapat menambah atau mengurangi jumlahnya - akan saya jelaskan nanti).
<table border="1">
<tr>
<td>linkgambar1</td>
<td>linkgambar2</td>
<td>linkgambar3</td>
</tr>
<tr>
<td>namagambar1</td>
<td>namagambar2</td>
<td>namagambar3</td>
</tr>
</table>
<table border="2">
<tr>
<td>linkgambar4</td>
<td>linkgambar5</td>
<td>linkgambar6</td>
</tr>
<tr>
<td>namagambar4</td>
<td>namagambar5</td>
<td>namagambar6</td>
</tr>
</table>

3. Kemudian kembali ke halaman editing dengan klik "Compose" di sebelah menu HTML, maka akan tampak kotak seperti berikut:
linkgambar1linkgambar2linkgambar3
namagambar1namagambar2namagambar3
linkgambar4linkgambar5linkgambar6
namagambar4namagambar5namagambar6
4. Masukkan gambar  lewat icon insert image seperti biasanya.
Keterangan:
A. Link gambar adalah kotak untuk memasukkan gambar.
B. Nama gambar adalah kotak untuk memberi judul atau keterangan.
C. Angka 1 dan 2 berwarna biru pada schript adalah ketebalan garis kotak, jika anda menginginkan kotak gambar tidak ditampilkan, gantilah angka pada table border menjadi " 0 " (Seperti contoh gambar masjid baris ke-2).
D. Untuk menambah atau mengurangi jumlah kotak anda tinggal copas atau delete bagian schript dimaksud, ingat ! "linkgambar" berpasangan dengan "namagambar"; maka menambah dan menghapus harus selalu beserta pasangannya.
E. Untuk merubah ukuran gambar, anda masuk ke HTML , merubah tinggi gambar, rubah angka pada height dan merubah lebar gambar, rubah angka width. (jika tidak terdapat height dan width di HTML, kembalilah ke compose, klik gambar, rubah ukurannya ke mana anda mau (small, medium, large, x-large, original size), setelah itu kembali ke HTML, pasti sudah ada height dan width di sana.

4. Tips Mengatur Ukuran Gambar / foto

Untuk mengatur Ukuran Gambar klik gambar yang mau di atur, dalam hal ini posisi editing adalah posisi Compose. 
Pilihan pengaturan:
SMAL : ukuran kecil
MEDIUM : ukuran sedang
LARGE : ukuran besar
X-LARGE : ukuran super besar alias extra
Original Size : ukuran gambar sama dengan ukuran aslinya.

Left : Posisi gambar di sebelah kiri tulisan kita
Center : Posisi gambar di tengah tanpa ada tulisan kanan kiri
Right : Posisi gambar di belah kanan tulisan kita.

Add Caption : Membuat tulisan atau keterangan Gambar di bawah gambar
Propertis : Memberikan Judul Gambar seperti Tittle Text
Remove : Menghapus gambar,

Apabila dalam sebuah postingan terdiri dari beberapa gambar (lebih dari 1 maksudnya) dan ternyata ukuran gambar tidak sama atau anda menginginkan sama ukurannya sehingga terlihat rapi, posisi editing postingan anda, beralihlah ke posisi Edit HTML. Maka hasilnya seperti dibawah ini.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3aa7a5oL_-vS5tVnqYPimo_SMNW2rK5dL76Qfg5HSdfggyxhDZILRCpV9ngyWpOHeO3fwsDAScS5qOJ39dHlW4T5c9TSa4KhtmO5x6BDwREEScOq5KatkdK8rusNSSyQp20WrWyldzhY/s1600/compose.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3aa7a5oL_-vS5tVnqYPimo_SMNW2rK5dL76Qfg5HSdfggyxhDZILRCpV9ngyWpOHeO3fwsDAScS5qOJ39dHlW4T5c9TSa4KhtmO5x6BDwREEScOq5KatkdK8rusNSSyQp20WrWyldzhY/s320/compose.jpg" width="320" /></a></div>


Setelah anda beralih ke posisi Edit HTML, maka mulailah anda mengganti tinggi gambar berapa (height) lebar gambar berapa (width) sesuai dengan keinginan anda.
Catatan : Ukuran gambar tidak akan muncul apabila ukurannya sama seperti aslinya (original size) sebaiknya pilih salah satu selain original size agar height dan width nya keluar.
Kemudian terbitkan Postingan anda bila sudah yakin selesai, Atau kembali ke posisi COMPOSE untuk melihat-lihat hasil kerja anda dulu kalau masih kurang balik lagi ke posisi Edit HTML.
Sudah dulu ya ? kepanjangan malah bisa jadi bingung.
Semoga bermanfaat.

Kamis, 16 September 2021

Daftar Kode Warna CSS & HTML Lengkap

Ingin Tahu Kode Warna CSS & HTML Lengkap




Pada pemrograman, pewarnaan biasanya dilakukan dengan menggunakan kode warna HTML. Bagi Anda yang sudah terbiasa dengan desain komputer pasti tidak asing dengan beberapa kode seperti #92a8d1 dan #ff0000.

Kedua kode tersebut merupakan kode warna Hexadecimal, yaitu tipe kode warna yang umumnya diawali dengan tanda “#”. Selain Hexadecimal, tipe kode warna lain yang umum digunakan adalah RGB.

Nah, karena RGB adalah salah satu tipe kode warna yang paling populer, mari kita awali artikel ini dengan membahas kode warna RGB terlebih dahulu!


Apa itu Kode Warna RGB?

RGB adalah kode warna yang terdiri dari tiga bagian angka. Ketiga bagian ini terpisah oleh tanda koma, contohnya seperti “rgb(251, 235, 217)”. Setiap digit kodenya melambangkan warna red (merah), green (hijau), blue (biru) atau #RRGGBB.

Mungkin Anda bertanya-tanya, kenapa harus merah, hijau, dan biru?

Karena, ketiganya merupakan warna primer yang umum digunakan di web dan layar komputer. Selain itu, kombinasi dari ketiga warna ini juga mampu membuat hingga lebih dari 16 juta warna! 

Nah, untuk melihat contoh aplikasi warna RGB, mari kita lihat list kode warna HTML lengkap yang dapat Anda gunakan sebagai panduan di bawah ini.

Daftar Kode Warna CSS & HTML Lengkap

Warna merupakan hal penting dan unik dalam dunia desain visual. Warna tidak memiliki bentuk, ukuran maupun simbol untuk menyampaikan pesan secara langsung. Sehingga Anda perlu untuk mengetahui warna apa saja yang cocok digunakan di dalam website.

Di bawah ini tabel kode warna CSS,HTML, warna RGB yang dapat Anda gunakan untuk memperindah website. Tidak hanya memperindah, banyak faktor lain yang dipengaruhi oleh warna. Lebih jelasnya Anda dapat membaca ulasan kami mengenai Menentukan Warna Efektif untuk Desain Website Anda. Tentang bagaimana warna itu sangat penting.

Nama WarnaHEXWarna RGB
.
Alice Blue#F0F8FFrgb(240, 248, 254)
.
Antique White#FAEBD7rgb(251, 235, 217)
.
Aqua#00FFFFrgb(0, 255, 254)
.
Aquamarine#7FFFD4rgb(115, 255, 216)
.
Azure#F0FFFFrgb(239, 255, 255)
.
Beige#F5F5DCrgb(245, 245, 223)
.
Bisque#FFE4C4rgb(255, 227, 200)
.
Black#000000rgb(0, 0, 0)
.
Blanched Almond#FFEBCDrgb(255, 234, 208)
.
Blue#0000FFrgb(0, 0, 255)
.
Blue Violet#8A2BE2rgb(138, 43, 226)
.
Brown#A52A2Argb(165, 42, 42)
.
Burly Wood#DEB887rgb(222, 184, 135)
.
Cadet Blue#5F9EA0rgb(95, 158, 160)
.
Chartreuse#7FFF00rgb(127, 255, 1)
.
Chocolate#D2691Ergb(210, 105, 30)
.
Coral#FF7F50rgb(251, 127, 80)
.
Cornflower Blue#6495EDrgb(100, 149, 237)
.
Cornsilk#FFF8DCrgb(225, 248, 220)
.
Crimson#DC143Crgb(220, 20, 60)
.
Cyan#00FFFFrgb(62, 254, 255)
.
Dark Blue#00008Brgb(0, 0, 139)
.
Dark Cyan#008B8Brgb(29, 139, 139)
.
Dark Golden Rod#B8860Brgb(184, 134, 11)
.
Dark Gray#A9A9A9rgb(169, 169, 169)
.
Dark Green#006400rgb(19, 100, 0)
.
Dark Khaki#BDB76Brgb(189, 183, 107)
.
Dark Magenta#8B008Brgb(139, 0, 140)
.
Dark Olive Green#556B2Frgb(85, 107, 47)
.
Dark Orange#FF8C00rgb(251, 140, 1)
.
Dark Orchid#9932CCrgb(153, 50, 204)
.
Dark Red#8B0000rgb(139, 5, 0)
.
Dark Salmon#E9967Argb(233, 150, 122)
.
Dark Sea Green#8FBC8Frgb(143, 188, 144)
.
Dark Slate Blue#483D8Brgb(72, 61, 139)
.
Dark Slate Gray#2F4F4Frgb(47, 79, 79)
.
Dark Turquoise#00CED1rgb(48, 206, 209)
.
Dark Violet#9400D3rgb(148, 0, 211)
.
Deep Pink#FF1493rgb(249, 19, 147)
.
Deep Sky Blue#00BFFFrgb(43, 191, 254)
.
Dim Gray#696969rgb(105, 105, 105)
.
Dodger Blue#1E90FFrgb(30, 144, 255)
.
Fire Brick#B22222rgb(178, 34, 33)
.
Floral White#FFFAF0rgb(255, 250, 240)
.
Forest Green#228B22rgb(34, 139, 35)
.
Fuchsia#FF00FFrgb(249, 0, 255)
.
Gainsboro#DCDCDCrgb(220, 220, 220)
.
Ghost White#F8F8FFrgb(248, 248, 255)
.
Gold#FFD700rgb(253, 215, 3)
.
Golden Rod#DAA520rgb(218, 165, 32)
.
Gray#808080rgb(128, 128, 128)
.
Green#008000rgb(27, 128, 1)
.
Green Yellow#ADFF2Frgb(173, 255, 48)
.
Honey Dew#F0FFF0rgb(240, 255, 240)
.
Hot Pink#FF69B4rgb(240, 255, 240)
.
Indian Red#CD5C5Crgb(205, 92, 92)
.
Indigo#4B0082rgb(75, 0, 130)
.
Ivory#FFFFF0rgb(255, 255, 239)
.
Khaki#F0E68Crgb(240, 230, 140)
.
Lavender#E6E6FArgb(230, 230, 250)
.
Lavender Blush#FFF0F5rgb(254, 240, 245)
.
Lawn Green#7CFC00rgb(124, 252, 2)
.
Lemon Chiffon#FFFACDrgb(255, 250, 205)
.
Light Blue#ADD8E6rgb(173, 216, 230)
.
Light Coral#F08080rgb(240, 128, 128)
.
Light Cyan#E0FFFFrgb(224, 255, 255)
.
Light Golden Rod Yellow#FAFAD2rgb(250, 250, 210)
.
Light Gray#D3D3D3rgb(211, 211, 211)
.
Light Green#90EE90rgb(144, 238, 144)
.
Light Pink#FFB6C1rgb(252, 182, 193)
.
Light Salmon#FFA07Argb(251, 160, 122)
.
Light Sea Green#20B2AArgb(40, 178, 170)
.
Light Sky Blue#87CEFArgb(135, 206, 250)
.
Light Slate Gray#778899rgb(119, 136, 153)
.
Light Steel Blue#B0C4DErgb(176, 196, 222)
.
Light Yellow#FFFFE0rgb(255, 255, 224)
.
Lime#00FF00rgb(63, 255, 0)
.
Lime Green#32CD32rgb(50, 205, 50)
.
Linen#FAF0E6rgb(250, 240, 230)
.
Magenta#FF00FFrgb(249, 0, 255)
.
Maroon#800000rgb(128, 4, 0)
.
Medium Aqua Marine#66CDAArgb(102, 205, 170)
.
Medium Blue#0000CDrgb(0, 0, 205)
.
Medium Orchid#BA55D3rgb(186, 85, 211)
.
Medium Purple#9370DBrgb(147, 112, 219)
.
Medium Sea Green#3CB371rgb(60, 179, 113)
.
Medium Slate Blue#7B68EErgb(123, 103, 238)
.
Medium Spring Green#00FA9Argb(62, 250, 153)
.
Medium Turquoise#48D1CCrgb(72, 209, 204)
.
Medium Violet Red#C71585rgb(199, 21, 133)
.
Midnight Blue#191970rgb(25, 25, 112)
.
Mint Cream#F5FFFArgb(245, 255, 250)
.
Misty Rose#FFE4E1rgb(254, 228, 225)
.
Moccasin#FFE4B5rgb(254, 228, 181)
.
Navajo White#FFDEADrgb(254, 222, 173)
.
Navy#000080rgb(0, 0, 128)
.
Old Lace#FDF5E6rgb(253, 245, 230)
.
Olive#808000rgb(128, 128, 1)
.
Olive Drab#6B8E23rgb(107, 142, 35)
.
Orange#FFA500rgb(252, 165, 3)
.
Orange Red#FF4500rgb(250, 69, 1)
.
Orchid#DA70D6rgb(218, 112, 214)
.
Pale Golden Rod#EEE8AArgb(238, 232, 170)
.
Pale Green#98FB98rgb(152, 251, 153)
.
Pale Turquoise#AFEEEErgb(175, 238, 239)
.
Pale Violet Red#DB7093rgb(219, 112, 147)
.
Papaya Whip#FFEFD5rgb(254, 239, 213)
.
Peach Puff#FFDAB9rgb(253, 218, 185)
.
Peru#CD853Frgb(205, 133, 63)
.
Pink#FFC0CBrgb(252, 192, 203)
.
Plum#DDA0DDrgb(221, 160, 221)
.
Powder Blue#B0E0E6rgb(176, 224, 230)
.
Purple#800080rgb(128, 0, 128)
.
Rebecca Purple#663399rgb(102, 51, 153)
.
Red#FF0000rgb(255, 0, 0)
.
Rosy Brown#BC8F8Frgb(188, 143, 142)
.
Royal Blue#4169E1rgb(65, 105, 225)
.
Saddle Brown#8B4513rgb(139, 69, 19)
.
Salmon#FA8072rgb(250, 128, 114)
.
Sandy Brown#F4A460rgb(244, 164, 95)
.
Sea Green#2E8B57rgb(46, 139, 87)
.
Sea Shell#FFF5EErgb(255, 245, 238)
.
Sienna#A0522Drgb(160, 82, 45)
.
Silver#C0C0C0rgb(192, 192, 192)
.
Sky Blue#87CEEBrgb(135, 206, 235)
.
Slate Blue#6A5ACDrgb(106, 90, 205)
.
Slate Gray#708090rgb(112, 128, 145)
.
Snow#FFFAFArgb(255, 250, 250)
.
Spring Green#00FF7Frgb(63, 255, 128)
.
Steel Blue#4682B4rgb(70, 130, 180)
.
Tan#D2B48Crgb(210, 180, 140)
.
Teal#008080rgb(26, 128, 127)
.
Thistle#D8BFD8rgb(216, 191, 216)
.
Tomato#FF6347rgb(250, 99, 71)
.
Turquoise#40E0D0rgb(64, 224, 208)
.
Violet#EE82EErgb(238, 130, 238)
.
Wheat#F5DEB3rgb(245, 222, 179)
.
White#FFFFFFrgb(255, 255, 255)
.
White Smoke#F5F5F5rgb(245, 245, 245)
.
Yellow#FFFF00rgb(255, 255, 0)
.
Yellow Green#9ACD32rgb(154, 205, 49)

Anda dapat melihat perbedaan mengenai hexadecimal dan RGB.

ColorHTML / CSS
Color Name
Hex Code
#RRGGBB
Decimal Code
(R,G,B)
lightsalmon#FFA07Argb(255,160,122)
salmon#FA8072rgb(250,128,114)
darksalmon#E9967Argb(233,150,122)
lightcoral#F08080rgb(240,128,128)
indianred#CD5C5Crgb(205,92,92)
crimson#DC143Crgb(220,20,60)
firebrick#B22222rgb(178,34,34)
red#FF0000rgb(255,0,0)
darkred#8B0000rgb(139,0,0)

Selain menggunakan kode warna, Anda juga dapat menggunakan generator untuk menentukan kode warna apa saja yang bisa digunakan. Anda dapat menggunakan generator warna yang disediakan oleh beberapa website di bawah ini.

  • W3School HTML Color Picker
    Situs ini dapat Anda gunakan untuk memilih warna berdasarkan warna dasar. Anda dapat memilih tingkat saturasi dan melihat langsung (preview) hasilnya. Selain itu, terdapat juga pilihan untuk memasukkan warna berdasarkan kode dan juga memunculkan jendela HTML 5 untuk pemilihan warna. Kode warna CSS, HTML, dan RGBnya pun dan dengan mudah Anda ketahui via situs ini.
  • Colors & Skillshare
    Colors merupakan situs yang digunakan sebagai alat schema generator. Jika Anda seorang desainer, situs ini dapat memberikan saran schema yang sesuai dengan kebutuhan dan juga tersedia kode hexadecimal yang bisa digunakan ke dalam website.
  • HTML Color Code
    HTML Color Code merupakan situs web sederhana yang menyediakan tampilan pemilihan warna. Anda tinggal mengarahkan kursor ke dalam tabel warna atau menggeser slider untuk mendapatkan warna yang sesuai dengan kode warna dalam bentuk hexadecimal.

Cara Menggunakan Kode Warna HTML & CSS

Penggunaan kode warna HTML, CSS, dan warna RGB dapat diterapkan ke dalam website. Kode warna dapat Anda gunakan hampir di semua bagian, seperti karakter, background, dan border.

Berikut beberapa cara menggunakan kode warna HTML dan CSS:

  • Cara Menggunakan Kode Warna HTML di Karakter

<!DOCTYPE html>
<html>
<body>
<p><font size=”3″ color=”#ff0000″>Daftar Kode Warna Pada HTML & CSS</font></p>
<p><font size=”2″ color=”#00ff00″>Daftar Kode Warna Pada HTML & CSS</font></p>
<p><font face=”verdana” color=”#0000ff”>Daftar Kode Warna Pada HTML & CSS</font></p>
<p><strong>Catatan:</strong> Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti</p>
</body>
</html>

Skrip di atas akan menghasilkan tampilan seperti di bawah ini:

Daftar Kode Warna Pada HTML & CSS

Daftar Kode Warna Pada HTML & CSS

Daftar Kode Warna Pada HTML & CSS

Catatan: Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti

  • Cara Menggunakan Kode Warna HTML di Background

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
#p4 {background-color:#ffff00;}
#p5 {background-color:#ff00ff;}
</style>
</head>
<body>
<p>HEX colors:</p>
<p id=”p1″>Red</p>
<p id=”p2″>Green</p>
<p id=”p3″>Blue</p>
<p id=”p4″>Yellow</p>
<p id=”p5″>Cerise</p>
</body>
</html>

Kode di atas menghasilkan tampilan seperti ini:

HEX colors:

Red

Green

Blue

Yellow

Cerise