Daftar Kode Warna Lengkap untuk CSS dan HTML
Daftar kode warna lengkap untuk CSS dan HTML.
Daftar Isi
Tools kode warna online dan untuk mencari kode warna dari gambar.
Kode warna sangat penting. Untuk programer dan desainer. Berdasar kode warna, kita bisa membuat warna yang persis sama dengan warna yang kita kehendaki. Jika kita hanya melihat warna hijau saja, maka kita pastinya akan kesulitan untuk menduplikat warna serupa. Jika kita perlu warna sama untuk keperluan lain, maka kita sendiri akan kerepotan.
Tetapi, jika kita mengerti kode warnanya, maka kita akan mudah untuk membuat warna yang persis sama.
Katakan saja, kita memiliki kode warna seperti #ff44dd. Ini adalah kode hexadecimal dan bermanfaat bagi desainer dan programer. Atau, untuk mereka yang kebetulan harus berurusan dengan warna – warna yang spesifik.
Pada HTML, kode ini polanya adalah #RRGGBB dengan R = red. G = Green dan B = Blue.
Atau, warna – warna primer.
Kode warna untuk “UMUM” lebih sering digunakan dengan nilai Hexadecimalnya. Meskipun begitu, ada juga nilai decimal RGB nya. Misalnya, yang kita pakai untuk mendesain di Corel atau Photoshop.
Secara lengkap, untuk pemrograman komputer, kode warna yang dipakai Hexadecimal, RGB, RGBA, HSL dan HSLA.
Kode warna Hexadecimal
Sistem bilangan 16
Ini adalah kode untuk bahasa mesin atau bahasa paling dasar di komputer. Nilai yang ada adalah 16 buah.
Dimulai dari 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
A adalah pengganti angka 10. Kode ini tidak boleh menggunakan angka dobel supaya tidak salah tafsir mesinnya.
Untuk kode warna hexadecimal tadi, angka ff44dd ini artinya ff bagian merah. 44 adalah bagian hijau dan dd adalah bagian biru.
Nilai 00 ( nol nol ) adalah intensitas terkecil ( tidak ada sama sekali ). FF adalah intensitas terbesar.
Contoh: #FF0000. Intensitas merah TERBESAR.
Intensitas hijau nol nol atau terkecil.
Intensitas biru adalah nol nol atau terkecil atau tidak ada samasekali.
Jadi, warnanya adalah merah. MERAH MURNI.
Sekarang, warna #00FF00. Intensitas terbesarnya HIJAU.
Intensitas merahnya nol nol atau 00. Intensitas birunya nol nol juga.
Catatan: Yang ada adalah nilai nol, bukan Huruf O. Karena basisnya hanya 16. Huruf terakhir hanya F saja.
Jadi, warnanya HIJAU MURNI.
Kalau #FFFF00, warnanya menjadi KUNING MURNI.
Karena merupakan campuran merah dan hijau.
Kode ini biasanya disebut juga kode HEX, HEX Code.
Kode warna RGB ( Decimal RGB )
Sistem bilangan 10
Hanya ada 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 saja. Kode ini biasanya hanya ditulis sebagai RGB saja dan jarang ditulis sebagai Decimal RGB.
Oke, jadi, ada HEXADECIMAL RGB dan DECIMAL RGB.
Yang terakhir biasanya ditulis sebagai RGB saja.
Kode warna DECIMAL RGB memiliki warna intensitas paling tinggi 255.
Intensitas warna terendah adalah 0 atau nol.
Jadi, warna merah untuk DECIMAL RGB adalah 255, 0, 0 ( duaratus limapuluh lima, nol, nol ).
Kode warna RGBA
Kita akan mengkonversi kode warna Hexadecimal ke RGBA jika kita akan menggunakan opacity atau tingkat keburaman warna.
Opacity: Nilai 0% adalah TRANSPARAN SEMPURNA. Nilai 100% adalah TERLIHAT SEMPURNA.
Atau, Nilai 0 ( nol ) artinya TRANSPARAN SEMPURNA dan nilai 1 ( satu ) adalah TERLIHAT SEMPURNA.
0,65 artinya 65%.
-
Contoh penggunaan:
Jika ada gambar mobil dan layer putih
Yang dibawah gambar mobil. Yang diatas layer atau lapisan warna putih.
Maka: Layer putih 0 maka yang terlihat gambar mobil. Layer putih 50 artinya gambar mobil agak buram tertutup putih. Layer putih 100 artinya yang layar putih terlihat putih sempurna.
Artinya, layer putih 100% berarti gambar mobil dibawah sama sekali tidak kelihatan.
Tetapi, ini digunakan hanya untuk tingkat lanjut saja. Untuk yang dasar, biasanya kita mengikuti aplikasi seperti Corel, Photoshop atau lainnya.
Jika aplikasi meminta kita untuk mengkonversi gambar ke RGBA, kita tinggal klik YES saja.
Untuk memberi layer tambahan, juga sudah ada settingnya.
Untuk pemrograman, terkadang memang kita memberi layer warna tambahan atau layer gambar untuk keperluan tertentu.
Layer warna penutup ini juga kita program bisa berubah opacity nya untuk mendapat efek visual yang bagus.
Misal, nilai RGBA adalah 51, 167, 59, 0.65
Nilai 51 adalah merah
Nilai 116 adalah Hijau
Nilai 59 adalah biru.
Angka 0.65 adalah opacity 65%.
HSL dan HSLA biasanya jarang digunakan saat mendesain dengan Corel atau Photoshop.
Tetapi, daripada penasaran, kita bahas sedikit soal HSL dan HSLA.
Kode Warna HSL ( Hue Saturation Lightness )
-
HUE: Derajat warna dalam lingkaran warna. Nilainya nol sampai 360.
Untuk ukurannya, 0 merah. 120 hijau. 240 biru.
-
SATURATION: Persentase kandungan warna abu – abu.
Nilainya. 0% adalah mengandung warna abu – abu FULL. Kandungan warna asli nol.
100% adalah FULL COLOR ASLI. Kandungan warna abu – abu nol.
-
LIGHTNESS: Persentase kandungan warna hitam dan putih
0% artinya kandungannya hitam.
100% artinya kandungannya putih.
Jadi, ketika ada kode warna seperti gambar dibawah ini, Anda sudah tahu artinya.
Jadi, warna MERAH MURNI itu nilai derajatnya nol ( 0 ). Saturationnya 100% tanpa gradasi abu – abu.
Kemudian, antara putih dan hitam, ada ditengah atau 50%.
Nilai HSL MERAH MURNI : ( 0, 100%, 50% ).
Kode warna HSLA
HSL dengan opacity. Seperti RGB dengan Opacity ( RGBA ).
Nilainya adalah seperti ini:
HSLA ( 0, 100%, 50%, 065 ). Nilai opacity yang ada adalah 0,65 atau 65% opacity.
Cara menggunakan CSS untuk HEXADECIMAL, RGB. RGBA, HSL dan HSLA
-
Cara menggunakan CSS untuk HEXADECIMAL
p { color: #25547f; }
-
Cara menggunakan / menulis CSS untuk RGB
p { color: rgb(42, 74, 131); }
-
Cara menggunakan / menulis CSS untuk RGBA
p { color: rgba(42, 74, 131, 1); }
-
Cara menggunakan / menulis CSS untuk HSL:
p { color: hsl(159, 44%, 43%); }
-
Cara menulis CSS untuk HSLa:
p { color: hsla(159, 44%, 43%, 1); }
Sekarang, kita sudah tahu aturan kode warna seperti ini. Jadi, yang namanya tabel kode warna atau daftar kode warna mungkin tidak terlalu penting juga. Tetapi, bisa kita gunakan untuk mencari warna secara cepat.
Tabel kode Warna lengkap
Kode Warna HTML Primer 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
Tabel – tabel warna diatas belum memiliki nama. Ini tabel gradasi warna yang satu tingkat lebih rendah atau lebih tinggi.
Untuk tabel warna dibawah ini, ada tabel untuk warna – warna yang setidaknya, diberi nama oleh orang.
Tabel warna lengkap:
Nama Warna HTML HEX Color Alice Blue #F0F8FF Antique White #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 Blanched Almond #FFEBCD Blue #0000FF Blue Violet #8A2BE2 Brown #A52A2A Burly Wood #DEB887 Cadet Blue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 Corn flower Blue #6495ED Cornsilk #FFF8DC Crimson #DC143C Cyan #00FFFF Dark Blue #00008B Dark Cyan #008B8B Dark Golden Rod #B8860B Dark Gray #A9A9A9 Dark Grey #A9A9A9 Dark Green #006400 Dark Khaki #BDB76B Dark Magenta #8B008B Dark Olive Green #556B2F Dark Orange #FF8C00 Dark Orchid #9932CC Dark Red #8B0000 Dark Salmon #E9967A Dark Sea Green #8FBC8F Dark Slate Blue #483D8B Dark Slate Gray #2F4F4F Dark Slate Grey #2F4F4F Dark Turquoise #00CED1 Dark Violet #9400D3 Deep Pink #FF1493 Deep Sky Blue #00BFFF Dim Gray #696969 Dim Grey #696969 Dodger Blue #1E90FF Fire Brick #B22222 Floral White #FFFAF0 Forest Green #228B22 Fuchs ia #FF00FF Gainsboro #DCDCDC Ghost White #F8F8FF Gold #FFD700 Golden Rod #DAA520 Grey #808080 Green #008000 Green Yellow #ADFF2F Honey Dew #F0FFF0 Hot Pink #FF69B4 Indian Red #CD5C5C Indigo #4B0082 Ivory #FFFFF0 Khaki #F0E68C Lavender #E6E6FA Lavender Blush #FFF0F5 Lawn Green #7CFC00 Lemon Chiffon #FFFACD Light Blue #ADD8E6 LightCoral #F08080 Light Cyan #E0FFFF Light Golden Rod Yellow #FAFAD2 Light Grey #D3D3D3 Light Green #90EE90 Light Pink #FFB6C1 Light Salmon #FFA07A Light Sea Green #20B2AA Light Sky Blue #87CEFA Light Slate Grey #778899 Light Steel Blue #B0C4DE Light Yellow #FFFFE0 Lime #00FF00 Lime Green #32CD32 Linen #FAF0E6 Magenta #FF00FF Maroon #800000 Medium Aqua Marine #66CDAA Medium Blue #0000CD Medium Orchid #BA55D3 Medium Purple #9370DB Medium Sea Green #3CB371 Medium Slate Blue #7B68EE Medium Spring Green #00FA9A Medium Turquoise #48D1CC Medium Violet Red #C71585 Midnight Blue #191970 Mint Cream #F5FFFA Misty Rose #FFE4E1 Moccasin #FFE4B5 Navajo White #FFDEAD Navy #000080 Old Lace #FDF5E6 Olive #808000 Olive Drab #6B8E23 Orange #FFA500 Orange Red #FF4500 Orchid #DA70D6 Pale Golden Rod #EEE8AA Pale Green #98FB98 Pale Tu rquoise #AFEEEE Pale Violet Red #DB7093 Papaya Whip #FFEFD5 Peach Puff #FFDAB9 Peru #CD853F Pink #FFC0CB Plum #DDA0DD Powder Blue #B0E0E6 Purple #800080 Rebecca Purple #663399 Red #FF0000 Rosy Brown #BC8F8F Royal Blue #4169E1 Saddle Brown #8B4513 Salmon #FA8072 Sandy Brown #F4A460 Sea Green #2E8B57 Sea Shell #FFF5EE Sienna #A0522D Silver #C0C0C0 Sky Blue #87CEEB Slate Blue #6A5ACD Slate Grey #708090 Tan #D2B48C Snow #FFFAFA Spring Green #00FF7F Thistle #D8BFD8 Steel Blue #4682B4 Turquoise #40E0D0 Teal #008080 Tomato #FF6347 White Smoke #F5F5F5 Violet #EE82EE Wheat #F5DEB3 Yellow #FFFF00 White #FFFFFF Yellow Green #9ACD32
Sebenarnya, warna – warna diatas bisa saja kita modifikasi sendiri. Tetapi, minimal itulah warna – warna yang diberi nama oleh orang.
Untuk kode warna RGB, RGBa atau HSLA bisa dicari padanannya secara online. Banyak Tools yang bisa dipergunakan.
Saat ini, ada banyak tools untuk memilih warna. Misalnya saja di https://html-color-codes.info. Pada situs ini, kita bisa memilih warna dan mengupload gambar untuk diketahui kode warnanya.
Saat mengupload gambar, kita akan mengambil warna bagian tertentu gambar tersebut. Jangan khawatir jika warnanya bermacam – macam. Ada pointer untuk mengarahkan ke warna yang kita inginkan.
Pointer mouse kita geser ke bagian gambar yang kita ingin tahu warnanya. Akan keluar kode warnanya.
Untuk sekedar memilih warna, kita bisa mengarahkan pointer mouse ke warna yang kita pilih. Misal kita pilih merah. Kemudian, kita bisa menggesernya untuk mendapatkan gradasi warna yang kita inginkan. Misal, warna agak merah jambu.
Saat itu juga, akan keluar contoh warna beserta kode warna yang bersangkutan. Kita bisa copy paste dan simpan untuk catatan kita.
Jadi, besok – besok lagi, kita akan bisa mendapat warna yang pasti dan tidak berubah gradasinya. Atau, tidak kesulitan lagi mencocokkan warnanya satu per satu.
Jika Anda mau mempelajari soal warna lebih lanjut, bisa mempelajari tentang lingkaran warna. Gunanya, untuk mencari warna yang cocok dipadankan dengan warna tertentu.
Itulah sedikit gambaran mengenai Kode Warna. Semoga bermanfaat dan salam sukses luar biasa! Sampai Jumpa lagi!