Daftar 60 Kode Warna RGB dan Heximal Terpopuler untuk Desain
Irhan Hisyam Dwi Nugroho
•
02 December 2024
•
493
Warga Bimbingan, tau nggak sih, kalau warna itu bisa bikin desainmu terlihat lebih WOW? Iya, nggak asal pilih warna loh kalau mau bikin website atau karya visual yang keren! Nah, MinDi punya sesuatu yang bakal bikin hidupmu lebih berwarna—yuk, simak daftar 60 kode warna RGB dan heximal paling populer buat desain kamu!
Suka bingung milih warna yang cocok, apalagi kalau tiba-tiba diminta pakai "kode RGB"? Tenang, nggak perlu panik! MinDi udah kumpulin daftar warna lengkap dengan kode RGB dan heximal yang gampang banget dipakai buat desain web, grafis, bahkan presentasi. Jadi, nggak ada lagi deh drama salah pilih warna.
Selain itu, MinDi bakal kasih tips simpel buat cek kode warna biar kamu makin pro dalam urusan desain. Pokoknya, artikel ini bakal bikin kamu jadi master warna yang siap bikin desain memukau. Let's get started!
Baca juga: Cyber Security Roadmap: Panduan Lengkap untuk Pemula
Arti Warna RGB
RGB adalah singkatan dari Red, Green, dan Blue, yaitu tiga warna dasar cahaya yang digunakan untuk menciptakan berbagai warna di layar elektronik seperti monitor atau ponsel.
Warna-warna ini dikombinasikan dalam berbagai intensitas, mulai dari 0 hingga 255, untuk menghasilkan jutaan warna berbeda.
Misalnya, merah murni ditulis sebagai RGB(255, 0, 0), di mana hanya warna merah yang maksimal.
Sistem RGB ini sering digunakan dalam desain digital karena mencerminkan bagaimana warna ditampilkan pada perangkat berbasis cahaya.
Baca juga: Markdown Adalah: Arti, Fungsi, Penulisan dan Contoh
Daftar Kode Warna RGB
Sumber: Canva
Warga Bimbingan, yuk kenali warna-warna populer yang sering digunakan dalam desain grafis dan web!
Baca juga: Jurusan Cyber Security: Arti, Mata Kuliah, dan Universitas
Berikut ini adalah 60 daftar kode warna RGB terpopuler yang sudah MinDi rangkum dalam tabel sederhana agar mudah kamu gunakan.
Warna | Nama Warna | Kode Warna Heximal | Kode Warna RGB | |
1 | Alice Blue | #F0F8FF | RGB(240, 248, 255) | |
2 | Antique White | #FAEBD7 | RGB(250, 235, 215) | |
3 | Aqua | #00FFFF | RGB(0, 255, 255) | |
4 | Aquamarine | #7FFFD4 | RGB(127, 255, 212) | |
5 | Azure | #F0FFFF | RGB(240, 255, 255) | |
6 | Beige | #F5F5DC | RGB(245, 245, 220) | |
7 | Bisque | #FFE4C4 | RGB(255, 228, 196) | |
8 | Black | #000000 | RGB(0, 0, 0) | |
9 | Blanched Almond | #FFEBCD | RGB(255, 235, 205) | |
10 | Blue | #0000FF | RGB(0, 0, 255) | |
11 | Blue Violet | #8A2BE2 | RGB(138, 43, 226) | |
12 | Brown | #A52A2A | RGB(165, 42, 42) | |
13 | Burly Wood | #DEB887 | RGB(222, 184, 135) | |
14 | Cadet Blue | #5F9EA0 | RGB(95, 158, 160) | |
15 | Chartreuse | #7FFF00 | RGB(127, 255, 0) | |
16 | Chocolate | #D2691E | RGB(210, 105, 30) | |
17 | Coral | #FF7F50 | RGB(255, 127, 80) | |
18 | Cornflower Blue | #6495ED | RGB(100, 149, 237) | |
19 | Cornsilk | #FFF8DC | RGB(255, 248, 220) | |
20 | Crimson | #DC143C | RGB(220, 20, 60) | |
21 | Cyan | #00FFFF | RGB(0, 255, 255) | |
22 | Dark Blue | #00008B | RGB(0, 0, 139) | |
23 | Dark Cyan | #008B8B | RGB(0, 139, 139) | |
24 | Dark Goldenrod | #B8860B | RGB(184, 134, 11) | |
25 | Dark Gray | #A9A9A9 | RGB(169, 169, 169) | |
26 | Dark Green | #006400 | RGB(0, 100, 0) | |
27 | Dark Khaki | #BDB76B | RGB(189, 183, 107) | |
28 | Dark Magenta | #8B008B | RGB(139, 0, 139) | |
29 | Dark Olive Green | #556B2F | RGB(85, 107, 47) | |
30 | Dark Orange | #FF8C00 | RGB(255, 140, 0) | |
31 | Dark Orchid | #9932CC | RGB(153, 50, 204) | |
32 | Dark Red | #8B0000 | RGB(139, 0, 0) | |
33 | Dark Salmon | #E9967A | RGB(233, 150, 122) | |
34 | Dark Sea Green | #8FBC8F | RGB(143, 188, 143) | |
35 | Dark Slate Blue | #483D8B | RGB(72, 61, 139) | |
36 | Dark Slate Gray | #2F4F4F | RGB(47, 79, 79) | |
37 | Dark Turquoise | #00CED1 | RGB(0, 206, 209) | |
38 | Dark Violet | #9400D3 | RGB(148, 0, 211) | |
39 | Deep Pink | #FF1493 | RGB(255, 20, 147) | |
40 | Deep Sky Blue | #00BFFF | RGB(0, 191, 255) | |
41 | Dim Gray | #696969 | RGB(105, 105, 105) | |
42 | Dodger Blue | #1E90FF | RGB(30, 144, 255) | |
43 | Firebrick | #B22222 | RGB(178, 34, 34) | |
44 | Floral White | #FFFAF0 | RGB(255, 250, 240) | |
45 | Forest Green | #228B22 | RGB(34, 139, 34) | |
46 | Fuchsia | #FF00FF | RGB(255, 0, 255) | |
47 | Gainsboro | #DCDCDC | RGB(220, 220, 220) | |
48 | Ghost White | #F8F8FF | RGB(248, 248, 255) | |
49 | Gold | #FFD700 | RGB(255, 215, 0) | |
50 | Goldenrod | #DAA520 | RGB(218, 165, 32) | |
51 | Gray | #808080 | RGB(128, 128, 128) | |
52 | Green | #008000 | RGB(0, 128, 0) | |
53 | Green Yellow | #ADFF2F | RGB(173, 255, 47) | |
54 | Honeydew | #F0FFF0 | RGB(240, 255, 240) | |
55 | Hot Pink | #FF69B4 | RGB(255, 105, 180) | |
56 | Indigo | #4B0082 | RGB(75, 0, 130) | |
57 | Ivory | #FFFFF0 | RGB(255, 255, 240) | |
58 | Khaki | #F0E68C | RGB(240, 230, 140) | |
59 | Lavender | #E6E6FA | RGB(230, 230, 250) | |
60 | Lemon Chiffon | #FFFACD | RGB(255, 250, 205) |
Baca juga: 10 Jenis Ancaman Cyber Security yang Harus Diwaspadai
Cara Mengecek Kode Warna RGB
Sumber: Canva
Pernah lihat warna keren di web tapi nggak tahu kode RGB-nya? Tenang, MinDi bakal jelasin langkah-langkahnya secara rinci. Yuk, simak caranya satu per satu:
1. Unduh Ekstensi "Cek Kode Warna" dari Toko Web Chrome
Gambar Extension Chrome
Langkah pertama, buka Chrome Web Store dan cari ekstensi seperti "Color Picker" atau "Cek Kode Warna".
Ekstensi ini bisa kamu tambahkan ke browser Chrome dengan satu klik tombol "Tambahkan ke Chrome". Setelah itu, ekstensi akan otomatis terpasang dan siap digunakan.
2. Aktifkan Ekstensi di Toolbar Browser
Setelah instalasi selesai, ikon ekstensi biasanya muncul di toolbar Chrome, di pojok kanan atas browser.
Klik ikon tersebut untuk membuka fitur pemilih warna. Kalau belum terlihat, cek di menu ekstensi dengan ikon puzzle, lalu sematkan ke toolbar untuk akses cepat.
Baca juga: 5 Contoh Topologi Jaringan di Perusahaan yang Efektif
3. Pilih Warna yang Ingin Dicek
Dengan alat pemilih warna (eyedropper), kamu bisa klik warna mana saja di layar browser yang ingin diperiksa.
Cukup arahkan kursor ke elemen, gambar, atau teks berwarna yang menarik perhatianmu. Setelah warna dipilih, ekstensi akan mencatatnya secara otomatis.
4. Kode Warna Langsung Muncul
Gambar Pengecekan Kode Warna
Begitu warna dipilih, kode warna akan langsung muncul dalam berbagai format seperti RGB, HEX, atau HSL.
Kamu cukup copy-paste kode tersebut ke proyek desainmu. Informasi yang ditampilkan juga lengkap, jadi kamu nggak perlu repot mencocokkan warna secara manual.
Baca juga: Cyber Security Analyst: Arti, Tugas, Skill, dan Gajinya
Pelajari Kode Warna RGB untuk Tingkatkan Desain Webmu!
Setelah membaca daftar 60 kode warna RGB dan heximal, kini saatnya memanfaatkan pengetahuan ini untuk membuat desain web yang lebih menarik dan profesional!
Yuk, ikuti Bootcamp Web Development di dibimbing.id! Di sini, kamu akan mempelajari penggunaan kode warna RGB dan heximal dalam CSS, HTML, dan desain web modern lainnya.
Belajar langsung dari mentor berpengalaman dengan kurikulum aplikatif dan praktis yang membantumu memahami cara menciptakan website profesional dengan estetika warna yang tepat.
Dengan lebih dari 700+ hiring partner dan tingkat keberhasilan alumni 95%, peluang kariermu di dunia IT dan desain web semakin terbuka lebar!
Jadi, tunggu apa lagi? Hubungi disini dan Daftar sekarang di dibimbing.id dan mulai perjalananmu menjadi seorang Web Developer profesional. #BimbingSampeJadi!
Referensi:
- What is RGB Color? Definition & How It Works [Buka]
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.