Seperti yang Anda ketahui, warna dapat mempengaruhi keadaan seseorang: baik mental maupun fisik. Setiap hari, saat menjelajahi situs web di Internet, mata mengevaluasi jutaan warna dan corak. Seorang web designer yang paham dengan psikologi warna dapat memanipulasi mood pengunjung untuk mencapai tujuan tertentu.
Hal ini disebabkan oleh fakta bahwa beberapa warna menenangkan, dan beberapa, sebaliknya, menggairahkan. Selanjutnya kita akan membahas tentang bagaimana warna disintesis dan ditampilkan menggunakan teknologi komputer.
RGB adalah model warna yang mewakili metode memperoleh semua warna dan coraknya dengan mencampurkan tiga komponen utama dalam berbagai proporsi, yaitu:
- merah ( Merah);
- warna hijau ( Hijau);
- warna biru ( Biru).
Dari sinilah nama singkatan RGB berasal. Warna-warna ini dipilih sebagai warna utama karena suatu alasan: alasannya adalah fisiologi retina mata manusia, dan cara persepsinya:
Model RGB tetap menjadi yang paling populer saat ini dan digunakan untuk mereproduksi warna pada layar TV dan monitor komputer. Karena produsen memberikan produk mereka karakteristik yang berbeda, pada tahun 1996 sistem sintesis warna terpadu berbasis RGB yang disebut sRGB dibuat, di mana Microsoft dan HP bekerja sama.
Representasi numerik warna
Seperti disebutkan sebelumnya, warna RGB dibentuk dengan mencampurkan warna primer. Untuk menggambarkan intensitas masing-masing warna, diadopsi skema di mana warna diwakili oleh rentang 0-255 (8 bit), yang dalam notasi heksadesimal sesuai dengan 00-FF.
Artinya, warna primer akan terlihat seperti ini:
- Merah – RGB (255,0,0);
- Hijau – RGB (0,255,0);
- Biru – RGB (0,0,255);
Jika intensitas warna bernilai kurang dari 255, maka diperoleh corak merah, hijau, dan biru yang berbeda. Berikut tabel gradasinya, serta nilai heksadesimal masing-masing coraknya:
Tabel warna RGB
Tentu saja, selain gradasi warna primer, ada juga warna campuran yang jumlahnya cukup banyak. Oleh karena itu, tabel warna RGB dibuat, yang menyajikan semua corak yang ada, serta nama dan representasi numeriknya ( dalam bentuk desimal dan heksadesimal).
Anda dapat melihatnya di sini. Tabel ini membuat hidup lebih mudah bagi desainer web, karena dalam beberapa detik Anda dapat menemukan warna yang diperlukan dan mengetahui representasi numeriknya.
Palet warna RGB yang aman
Namun, pada titik tertentu ada masalah dengan menampilkan warna di browser yang berbeda, dan untuk mengatasinya, apa yang disebut palet warna RGB "aman" dikompilasi, yang diperoleh melalui perhitungan matematis.
Jika browser tidak dapat menampilkan warna dengan benar, browser akan mencoba mendapatkan warna yang mendekati kebutuhannya dengan mencampurkan warna yang berdekatan, dan kemungkinan besar hasilnya sama sekali tidak dapat diterima:
Dengan menggunakan kode warna RGB dari palet ini, seorang pengembang web dapat merasa tenang mengenai tampilan warna pada halaman situs webnya jika dilihat menggunakan browser, platform, dan monitor yang berbeda. Meskipun saat ini tabel warna aman kehilangan relevansinya ( kemajuan teknologi masih tidak tinggal diam), saat menggunakannya Anda bisa, seperti kata mereka, tidur nyenyak.
Warna emas dalam model RGB
Kata "emas" pertama kali digunakan pada awal abad ke-14 untuk menggambarkan warna unsur kimia yang disebut Aurum - emas. Dalam model RGB, warna emas diwakili oleh nilai numerik berikut:
- RGB (255, 215, 0) – sistem desimal;
- HEX #FFD700 – sistem heksadesimal.
Warna krem dalam model RGB
Warna krem menempati tempat yang cukup penting dalam sejarah, meskipun bukan yang paling ekspresif. Banyak monumen budaya, terutama patung kuno, terbuat dari batu sabun dan batu sabun yang berwarna krem. Pada model RGB, warna krem memiliki representasi numerik sebagai berikut.
Ada beberapa cara untuk merepresentasikan warna dalam desain web.
HEX adalah sistem representasi warna heksadesimal berdasarkan basis 16. Untuk sistem ini, angka desimal Arab dari 0 hingga 9 dan huruf Latin dari A hingga F digunakan untuk melengkapi angka digital ke 16. Untuk desain web, 16 warna primer (kunci) digunakan, yang disebut kode warna heksadesimal #RRGGBB, di mana setiap pasangan bertanggung jawab atas pembagian warnanya: RR – merah, GG – hijau dan BB – biru. Setiap fraksi warna berkisar dari 00 hingga FF.
Dua representasi warna lainnya dalam desain web adalah: dalam bentuk RGB(*,*,*), di mana setiap pecahan “*” suatu warna diwakili oleh angka desimal dari 0 hingga 255 dan dengan nama warna dalam bahasa Inggris.
Saat membuat gambar berwarna, masalah utamanya adalah reproduksi warna yang benar pada berbagai jenis komputer, monitor, dan browser. Jika browser tidak dapat menampilkan warna dengan benar, browser akan memilih warna serupa atau mencampur beberapa warna. Dan terkadang bisa diganti dengan warna yang sama sekali berbeda.
Meja 16 warna primer, yang digunakan di semua browser
| Nama | Warna | Heksa | (RGB) |
| Aqua (gelombang laut) | #00FFFF | (000,255,255) | |
| Hitam | #000000 | (000,000,000) | |
| Biru | #0000FF | (000,000,255) | |
| Fuchsia (magenta) | #FF00FF | (255,000,255) | |
| Abu-abu | #808080 | (128,128,128) | |
| Hijau | #008000 | (000,128,000) | |
| Jeruk nipis (hijau cerah) | #00FF00 | (000,255,000) | |
| Maroon (merah anggur tua) | #800000 | (128,000,000) | |
| Angkatan Laut (biru tua) | #000080 | (000,000,128) | |
| Zaitun | #808000 | (128,128,000) | |
| Ungu | #800080 | (128,000,128) | |
| Merah | #FF0000 | (255,000,000) | |
| Perak | #C0C0C0 | (192,192,192) | |
| Teal (abu-abu kehijauan) | #008080 | (000,128,128) | |
| Putih | #FFFFFF | (255,255,255) | |
| Kuning | #FFFF00 | (255,255,000) |
Meja ungu warna dan coraknya
| Nama | Warna | Heksa | (RGB) |
| Magenta (magenta) | #FFCBDB | (255,203,219) | |
| Magenta (magenta) | #FF0099 | (255,000,153) | |
| Magenta (magenta) | #F95A61 | (249,090,097) | |
| Fuchsia (fuchsia) | #FF00FF | (255,000,255) | |
| Mauvein (anilin ungu) | #EF0097 | (239,000,151) | |
| Salmon merah muda (oranye merah muda) | #FF91A4 | (255,145,164) | |
| Cenise (warna ungu) | #DE3163 | (153,149,140) | |
| Terong Terong (terong) | #990066 | (153,000,132) | |
| Perona pipi lavender (lavender merah muda) | #FFF0F5 | (255,240,245) | |
| Ungu (ungu) | #C8A2C8 | (200,162,200) | |
| Magenta (magenta) | #FF008F | (255,000,143) | |
| Anggrek (anggrek) | #DA70D6 | (218,112,214) | |
| Merah-ungu (ungu-merah) | #C71585 | (199,021,133) | |
| Sanguin (optimis) | #92000A | (146,000,010) | |
| Thistle (warna ungu) | #D8BFD8 | (185,211,238) | |
| Terong ungu (warna ungu) | #991199 | (153,017,153) | |
| Rosa vivo (merah muda tua) | #FF007F | (255,000,127) | |
| Lavender-rose (warna ungu) | #FBA0E3 | (108,123,139) | |
| Gunungbatten berwarna merah muda | #997ABD | (153,122,141) |
Meja abu-abu warna dan coraknya
| Nama | Warna | Heksa | (RGB) |
| Abu-abu | #808080 | (128,128,128) | |
| Abu-abu | #bebebe | (190,190,190) | |
| (Warna abu-abu) | #858585 | (133,133,133) | |
| Abu-abu33 | #545454 | (084,084,084) | |
| (Batu tulis abu-abu) | #708090 | (112,128,144) | |
| (Kuarsa) | #99958с | (153,149,140) | |
| (Abu-abu muda) | #bbbbbb | (187,187,187) | |
| (Perak) | #c0c0c0 | (192,192,192) | |
| (Abu-putih) | #f0f0f0 | (240,240,240) | |
| (Jenggot Abdel-Kerim) | #e0e0e0 | (224,224,224) | |
| Abu-abu Muda (Abu-abu muda) | #d3d3d3 | (211,211,211) | |
| LightStateGrey() | #778899 | (119,136,153) | |
| StateGray-1 (Biru jagung pucat1) | #c6e2ff | (198,226,255) | |
| StateGray-2 (Biru jagung pucat2) | #b9d3ee | (185,211,238) | |
| NegaraGray3() | #9fb6cd | (159,182,205) | |
| NegaraGray4() | #6c7b8b | (108,123,139) |
Modul warna CSS merinci nilai yang memungkinkan penulis menentukan warna dan opacity elemen html, serta nilai properti warna.
properti warna
1. Warna prioritas: properti warna
Properti menentukan warna font menggunakan berbagai sistem rendering warna. Properti ini menjelaskan warna konten teks elemen. Selain itu, ini digunakan untuk memberikan potensi nilai tidak langsung (currentColor) untuk properti lain yang mengambil nilai warna.
Properti itu diwariskan.
2. Nilai warna
2.1. Kata Kunci Utama
Daftar kata kunci utama mencakup arti sebagai berikut:
| Nama | HEX | RGB | Warna |
|---|---|---|---|
| hitam | #000000 | 0,0,0 | |
| perak | #C0C0C0 | 192,192,192 | |
| abu-abu | #808080 | 128,128,128 | |
| putih | #FFFFFF | 255,255,255 | |
| merah tua | #800000 | 128,0,0 | |
| merah | #FF0000 | 255,0,0 | |
| ungu | #800080 | 128,0,128 | |
| fuchsia | #FF00FF | 255,0,255 | |
| hijau | #008000 | 0,128,0 | |
| kapur | #00FF00 | 0,255,0 | |
| zaitun | #808000 | 128,128,0 | |
| kuning | #FFFF00 | 255,255,0 | |
| angkatan laut | #000080 | 0,0,128 | |
| biru | #0000FF | 0,0,255 | |
| teal | #008080 | 0,128,128 | |
| air | #00FFFF | 0,255,255 |
Nama warna tidak peka huruf besar-kecil.
Sintaksis
Warna: biru kehijauan;
2.2. Nilai warna numerik
2.2.1. Warna model RGB
Format heksadesimal nilai RGB adalah tanda # yang diikuti langsung oleh tiga atau enam karakter heksadesimal. Notasi RGB tiga digit #rgb diubah menjadi bentuk enam digit #rrggbb dengan menyalin digitnya, bukan menambahkan angka nol. Misalnya, #fb0 diperluas menjadi #ffbb00 . Hal ini memastikan bahwa #ffffff putih dapat ditentukan dalam entri #fff pendek, dan menghilangkan ketergantungan pada kedalaman warna tampilan.
Format nilai RGB dalam notasi fungsional adalah rgb(, diikuti dengan daftar tiga nilai numerik yang dipisahkan koma (tiga nilai bilangan bulat atau tiga nilai persentase), diikuti dengan simbol). Nilai integer 255 setara dengan 100% dan F atau FF dalam notasi heksadesimal:
Rgb(255.255.255) = rgb(100%, 100%, 100%) = #FFF
Karakter spasi diperbolehkan di sekitar nilai numerik.
Untuk halaman html, warna ditunjukkan terutama dalam sistem heksadesimal. Untuk melakukan ini, dua jenis pencatatan kode digunakan - lengkap atau disingkat. Untuk menunjukkan warna html secara lengkap dengan benar, Anda perlu menulis enam karakter (angka dan/atau huruf bahasa Inggris) setelah tanda pagar, misalnya hitam ditulis seperti ini: #000000. Singkatan untuk menentukan warna html terdiri dari hash dan tiga angka dan/atau huruf di belakangnya. Namun, jenis stok ini hanya dapat digunakan jika catatan lengkap dari warna tertentu terdiri dari simbol-simbol yang identik setelah tanda pagar. Misalnya warna hitam yang sama bisa ditulis seperti ini: #000. Anda dapat menentukan warna html menggunakan karakter besar dan kecil, karena tidak peka huruf besar-kecil.
Setiap karakter yang ditulis setelah "#" sesuai dengan proporsi warna merah, hijau, dan biru tertentu. Pada gilirannya, semua monitor terdiri dari sejumlah besar piksel (titik mikroskopis), yang masing-masing mencakup 3 yang disebut "senter" (sumber cahaya): merah, hijau, dan biru. Kemudian, dengan mengatur intensitas cahaya yang dipancarkan “senter” tersebut, monitor menampilkan warna yang kita butuhkan.
Dengan menggabungkan intensitas pancaran cahaya merah, biru dan hijau (dari 0 hingga 256), monitor dapat menampilkan 16.000.000 warna berbeda.
Selain itu, warna untuk situs web dapat ditunjukkan secara lisan atau dalam kode RGB.
Saat ini, 147 warna dapat ditulis secara lisan. Penting untuk mengetahui bahwa beberapa nama yang berbeda dapat berarti warna yang sama, misalnya Abu-abu dan Abu-abu adalah warna abu-abu (#808080).
Warna yang aman untuk situs web.
Tidak semua monitor dan browser dapat menampilkan 16 juta warna html dengan benar.
Jika, misalnya, Anda menemukan warna yang tidak dapat ditampilkan dengan benar oleh browser, maka:
- Browser menggantinya dengan yang paling mirip dan berhasil direproduksi;
- Untuk menampilkannya dengan benar, browser dapat mencampur beberapa warna dan mereproduksi hasilnya.
Untuk memastikan bahwa output di browser apa pun dan monitor apa pun adalah warna yang Anda tentukan dalam kode, disarankan untuk menggunakan “Warna Aman”. Mereka ditentukan bukan secara manual atau atas keinginan orang lain, tetapi secara matematis. Terdapat 216 warna yang 100% aman untuk dokumen HTML. Dan meskipun teknologi saat ini telah mencapai titik di mana monitor dan browser modern mengenali jutaan warna, kami menyarankan penggunaan warna aman ini untuk menjamin rendering warna.
| Sistem warna heksadesimal. | Kode warna dalam RGB (Merah, Hijau, Biru). |
| Kode warna HTML: #000000 | Warna RGB: 0 0 0 |
| Kode warna HTML: #333333 | Warna RGB: 51 51 51 |
| Kode warna HTML: #666666 | Warna RGB: 102 102 102 |
| Kode warna HTML: #999999 | Warna RGB: 153 153 153 |
| Kode warna HTML: #CCCCCC | Warna RGB: 204 204 204 |
| Kode warna HTML: #FFFFFF | Warna RGB: 255 255 255 |
| Kode warna HTML: #666600 | Warna RGB: 102 102 0 |
| Kode warna HTML: #999900 | Warna RGB: 153 153 0 |
| Kode warna HTML: #999933 | Warna RGB: 153 153 51 |
| Kode warna HTML: #999966 | Warna RGB: 153 153 102 |
| Kode warna HTML: #CCCC33 | Warna RGB: 204 204 51 |
| Kode warna HTML: #CCCC66 | Warna RGB: 204 204 102 |
| Kode warna HTML: #333300 | Warna RGB: 51 51 0 |
| Kode warna HTML: #666633 | Warna RGB: 102 102 51 |
| Kode warna HTML: #CCCC99 | Warna RGB: 204 204 153 |
| Kode warna HTML: #CCFF33 | Warna RGB: 204 255 51 |
| Kode warna HTML: #CCFF00 | Warna RGB: 204 255 0 |
| Kode warna HTML: #CCFF66 | Warna RGB: 204 255 102 |
| Kode warna HTML: #669900 | Warna RGB: 102 153 0 |
| Kode warna HTML: #99CC33 | Warna RGB: 153 204 51 |
| Kode warna HTML: #99CC00 | Warna RGB: 153 204 0 |
| Kode warna HTML: #99CC66 | Warna RGB: 153 204 102 |
| Kode warna HTML: #99FF33 | Warna RGB: 153 255 51 |
| Kode warna HTML: #99FF00 | Warna RGB: 153 255 0 |
| Kode warna HTML: #336600 | Warna RGB: 51 102 0 |
| Kode warna HTML: #669933 | Warna RGB: 102 153 51 |
| Kode warna HTML: #66CC33 | Warna RGB: 102 204 51 |
| Kode warna HTML: #66CC00 | Warna RGB: 102 204 0 |
| Kode warna HTML: #99FF66 | Warna RGB: 153 255 102 |
| Kode warna HTML: #CCFF99 | Warna RGB: 204 255 153 |
| Kode warna HTML: #009900 | Warna RGB: 0 153 0 |
| Kode warna HTML: #339900 | Warna RGB: 51 153 0 |
| Kode warna HTML: #33CC00 | Warna RGB: 51 204 0 |
| Kode warna HTML: #33FF00 | Warna RGB: 51 255 0 |
| Kode warna HTML: #66FF33 | Warna RGB: 102 255 51 |
| Kode warna HTML: #66FF00 | Warna RGB: 102 255 0 |
| Kode warna HTML: #00CC33 | Warna RGB: 0 204 51 |
| Kode warna HTML: #33CC33 | Warna RGB: 51 204 51 |
| Kode warna HTML: #00CC00 | Warna RGB: 0 204 0 |
| Kode warna HTML: #00FF00 | Warna RGB: 0 255 0 |
| Kode warna HTML: #00FF33 | Warna RGB: 0 255 51 |
| Kode warna HTML: #33FF33 | Warna RGB: 51 255 51 |
| Kode warna HTML: #003300 | Warna RGB: 0 51 0 |
| Kode warna HTML: #336633 | Warna RGB: 51 102 51 |
| Kode warna HTML: #669966 | Warna RGB: 102 153 102 |
| Kode warna HTML: #66CC66 | Warna RGB: 102 204 102 |
| Kode warna HTML: #99CC99 | Warna RGB: 153 204 153 |
| Kode warna HTML: #CCFFCC | Warna RGB: 204 255 204 |
| Kode warna HTML: #006600 | Warna RGB: 0 102 0 |
| Kode warna HTML: #339933 | Warna RGB: 51 153 51 |
| Kode warna HTML: #00FF66 | Warna RGB: 0 255 102 |
| Kode warna HTML: #33FF66 | Warna RGB: 51 255 102 |
| Kode warna HTML: #66FF66 | Warna RGB: 102 255 102 |
| Kode warna HTML: #99FF99 | Warna RGB: 153 255 153 |
| Kode warna HTML: #009933 | Warna RGB: 0 153 51 |
| Kode warna HTML: #00CC66 | Warna RGB: 0 204 102 |
| Kode warna HTML: #33CC66 | Warna RGB: 51 204 102 |
| Kode warna HTML: #00FF99 | Warna RGB: 0 255 153 |
| Kode warna HTML: #33FF99 | Warna RGB: 51 255 153 |
| Kode warna HTML: #66FF99 | Warna RGB: 102 255 153 |
| Kode warna HTML: #006633 | Warna RGB: 0 102 51 |
| Kode warna HTML: #009966 | Warna RGB: 0 153 102 |
| Kode warna HTML: #339966 | Warna RGB: 51 153 102 |
| Kode warna HTML: #00CC99 | Warna RGB: 0 204 153 |
| Kode warna HTML: #33CC99 | Warna RGB: 51 204 153 |
| Kode warna HTML: #66CC99 | Warna RGB: 102 204 153 |
| Kode warna HTML: #009999 | Warna RGB: 0 153 153 |
| Kode warna HTML: #33CCCC | Warna RGB: 51 204 204 |
| Kode warna HTML: #00FFCC | Warna RGB: 0 255 204 |
| Kode warna HTML: #33FFCC | Warna RGB: 51 255 204 |
| Kode warna HTML: #66FFCC | Warna RGB: 102 255 204 |
| Kode warna HTML: #99FFCC | Warna RGB: 153 255 204 |
| Kode warna HTML: #00CCCC | Warna RGB: 0 204 204 |
| Kode warna HTML: #00FFFF | Warna RGB: 0 255 255 |
| Kode warna HTML: #33FFFF | Warna RGB: 51 255 255 |
| Kode warna HTML: #66FFFF | Warna RGB: 102 255 255 |
| Kode warna HTML: #99FFFF | Warna RGB: 153 255 255 |
| Kode warna HTML: #CCFFFF | Warna RGB: 204 255 255 |
| Kode warna HTML: #336666 | Warna RGB: 51 102 102 |
| Kode warna HTML: #006666 | Warna RGB: 0 102 102 |
| Kode warna HTML: #669999 | Warna RGB: 102 153 153 |
| Kode warna HTML: #339999 | Warna RGB: 51 153 153 |
| Kode warna HTML: #66CCCC | Warna RGB: 102 204 204 |
| Kode warna HTML: #99CCCC | Warna RGB: 153 204 204 |
| Kode warna HTML: #003333 | Warna RGB: 0 51 51 |
| Kode warna HTML: #0099CC | Warna RGB: 0 153 204 |
| Kode warna HTML: #3399CC | Warna RGB: 51 153 204 |
| Kode warna HTML: #00CCFF | Warna RGB: 0 204 255 |
| Kode warna HTML: #33CCFF | Warna RGB: 51 204 255 |
| Kode warna HTML: #66CCFF | Warna RGB: 102 204 255 |
| Kode warna HTML: #006699 | Warna RGB: 0 102 153 |
| Kode warna HTML: #336699 | Warna RGB: 51 102 153 |
| Kode warna HTML: #6699CC | Warna RGB: 102 153 204 |
| Kode warna HTML: #0099FF | Warna RGB: 0 153 255 |
| Kode warna HTML: #3399FF | Warna RGB: 51 153 255 |
| Kode warna HTML: #99CCFF | Warna RGB: 153 204 255 |
| Kode warna HTML: #003366 | Warna RGB: 0 51 102 |
| Kode warna HTML: #003399 | Warna RGB: 0 51 153 |
| Kode warna HTML: #0033FF | Warna RGB: 0 51 255 |
| Kode warna HTML: #3366CC | Warna RGB: 51 102 204 |
| Kode warna HTML: #0066CC | Warna RGB: 0 102 204 |
| Kode warna HTML: #0066FF | Warna RGB: 0 102 255 |
| Kode warna HTML: #000033 | Warna RGB: 0 0 51 |
| Kode warna HTML: #0033CC | Warna RGB: 0 51 204 |
| Kode warna HTML: #0000CC | Warna RGB: 0 0 204 |
| Kode warna HTML: #0000FF | Warna RGB: 0 0 255 |
| Kode warna HTML: #3366FF | Warna RGB: 51 102 255 |
| Kode warna HTML: #6699FF | Warna RGB: 102 153 255 |
| Kode warna HTML: #000066 | Warna RGB: 0 0 102 |
| Kode warna HTML: #000099 | Warna RGB: 0 0 153 |
| Kode warna HTML: #3333CC | Warna RGB: 51 51 204 |
| Kode warna HTML: #3300CC | Warna RGB: 51 0 204 |
| Kode warna HTML: #3300FF | Warna RGB: 51 0 255 |
| Kode warna HTML: #3333FF | Warna RGB: 51 51 255 |
| Kode warna HTML: #333366 | Warna RGB: 51 51 102 |
| Kode warna HTML: #333399 | Warna RGB: 51 51 153 |
| Kode warna HTML: #666699 | Warna RGB: 102 102 153 |
| Kode warna HTML: #6666CC | Warna RGB: 102 102 204 |
| Kode warna HTML: #6666FF | Warna RGB: 102 102 255 |
| Kode warna HTML: #9999CC | Warna RGB: 153 153 204 |
| Kode warna HTML: #330066 | Warna RGB: 51 0 102 |
| Kode warna HTML: #330099 | Warna RGB: 51 0 153 |
| Kode warna HTML: #6600FF | Warna RGB: 102 0 255 |
| Kode warna HTML: #6633FF | Warna RGB: 102 51 255 |
| Kode warna HTML: #9999FF | Warna RGB: 153 153 255 |
| Kode warna HTML: #CCCCFF | Warna RGB: 204 204 255 |
| Kode warna HTML: #330033 | Warna RGB: 51 0 51 |
| Kode warna HTML: #663399 | Warna RGB: 102 51 153 |
| Kode warna HTML: #6633CC | Warna RGB: 102 51 204 |
| Kode warna HTML: #6600CC | Warna RGB: 102 0 204 |
| Kode warna HTML: #9966FF | Warna RGB: 153 102 255 |
| Kode warna HTML: #9966CC | Warna RGB: 153 102 204 |
| Kode warna HTML: #663366 | Warna RGB: 102 51 102 |
| Kode warna HTML: #660099 | Warna RGB: 102 0 153 |
| Kode warna HTML: #9900FF | Warna RGB: 153 0 255 |
| Kode warna HTML: #9933FF | Warna RGB: 153 51 255 |
| Kode warna HTML: #9933CC | Warna RGB: 153 51 204 |
| Kode warna HTML: #CC99FF | Warna RGB: 204 153 255 |
| Kode warna HTML: #660066 | Warna RGB: 102 0 102 |
| Kode warna HTML: #996699 | Warna RGB: 153 102 153 |
| Kode warna HTML: #9900CC | Warna RGB: 153 0 204 |
| Kode warna HTML: #CC00FF | Warna RGB: 204 0 255 |
| Kode warna HTML: #CC33FF | Warna RGB: 204 51 255 |
| Kode warna HTML: #CC66FF | Warna RGB: 204 102 255 |
| Kode warna HTML: #993399 | Warna RGB: 153 51 153 |
| Kode warna HTML: #990099 | Warna RGB: 153 0 153 |
| Kode warna HTML: #CC33CC | Warna RGB: 204 51 204 |
| Kode warna HTML: #CC00CC | Warna RGB: 204 0 204 |
| Kode warna HTML: #CC66CC | Warna RGB: 204 102 204 |
| Kode warna HTML: #CC99CC | Warna RGB: 204 153 204 |
| Kode warna HTML: #CC3399 | Warna RGB: 204 51 153 |
| Kode warna HTML: #FF00FF | Warna RGB: 255 0 255 |
| Kode warna HTML: #FF33FF | Warna RGB: 255 51 255 |
| Kode warna HTML: #FF66FF | Warna RGB: 255 102 255 |
| Kode warna HTML: #FF99FF | Warna RGB: 255 153 255 |
| Kode warna HTML: #FFCCFF | Warna RGB: 255 204 255 |
| Kode warna HTML: #990066 | Warna RGB: 153 0 102 |
| Kode warna HTML: #CC0099 | Warna RGB: 204 0 153 |
| Kode warna HTML: #CC6699 | Warna RGB: 204 102 153 |
| Kode warna HTML: #FF33CC | Warna RGB: 255 51 204 |
| Kode warna HTML: #FF00CC | Warna RGB: 255 0 204 |
| Kode warna HTML: #FF66CC | Warna RGB: 255 102 204 |
| Kode warna HTML: #660033 | Warna RGB: 102 0 51 |
| Kode warna HTML: #993366 | Warna RGB: 153 51 102 |
| Kode warna HTML: #CC0066 | Warna RGB: 204 0 102 |
| Kode warna HTML: #FF0099 | Warna RGB: 255 0 153 |
| Kode warna HTML: #FF3399 | Warna RGB: 255 51 153 |
| Kode warna HTML: #FF99CC | Warna RGB: 255 153 204 |
| Kode warna HTML: #663333 | Warna RGB: 102 51 51 |
| Kode warna HTML: #996666 | Warna RGB: 153 102 102 |
| Kode warna HTML: #CC3366 | Warna RGB: 204 51 102 |
| Kode warna HTML: #FF0066 | Warna RGB: 255 0 102 |
| Kode warna HTML: #FF3366 | Warna RGB: 255 51 102 |
| Kode warna HTML: #FF6699 | Warna RGB: 255 102 153 |
| Kode warna HTML: #330000 | Warna RGB: 51 0 0 |
| Kode warna HTML: #990033 | Warna RGB: 153 0 51 |
| Kode warna HTML: #993333 | Warna RGB: 153 51 51 |
| Kode warna HTML: #CC3333 | Warna RGB: 204 51 51 |
| Kode warna HTML: #CC6666 | Warna RGB: 204 102 102 |
| Kode warna HTML: #CC9999 | Warna RGB: 204 153 153 |
| Kode warna HTML: #CC0033 | Warna RGB: 204 0 51 |
| Kode warna HTML: #FF0033 | Warna RGB: 255 0 51 |
| Kode warna HTML: #FF3333 | Warna RGB: 255 51 51 |
| Kode warna HTML: #FF6666 | Warna RGB: 255 102 102 |
| Kode warna HTML: #FF9999 | Warna RGB: 255 153 153 |
| Kode warna HTML: #FFCCCC | Warna RGB: 255 204 204 |
| Kode warna HTML: #990000 | Warna RGB: 153 0 0 |
| Kode warna HTML:#CC0000 | Warna RGB: 204 0 0 |
| Kode warna HTML: #FF0000 | Warna RGB: 255 0 0 |
| Kode warna HTML: #FF3300 | Warna RGB: 255 51 0 |
| Kode warna HTML: #CC3300 | Warna RGB: 204 51 0 |
| Kode warna HTML: #FF6633 | Warna RGB: 255 102 51 |
| Kode warna HTML: #660000 | Warna RGB: 102 0 0 |
| Kode warna HTML: #993300 | Warna RGB: 153 51 0 |
| Kode warna HTML: #CC6633 | Warna RGB: 204 102 51 |
| Kode warna HTML: #FF6600 | Warna RGB: 255 102 0 |
| Kode warna HTML: #FF9966 | Warna RGB: 255 153 102 |
| Kode warna HTML: #FFCC99 | Warna RGB: 255 204 153 |
| Kode warna HTML: #663300 | Warna RGB: 102 51 0 |
| Kode warna HTML: #996633 | Warna RGB: 153 102 51 |
| Kode warna HTML: #CC6600 | Warna RGB: 204 102 0 |
| Kode warna HTML: #CC9966 | Warna RGB: 204 153 102 |
| Kode warna HTML: #FF9933 | Warna RGB: 255 153 51 |
| Kode warna HTML: #FF9900 | Warna RGB: 255 153 0 |
| Kode warna HTML: #996600 | Warna RGB: 153 102 0 |
| Kode warna HTML: #CC9933 | Warna RGB: 204 153 51 |
| Kode warna HTML: #CC9900 | Warna RGB: 204 153 0 |
| Kode warna HTML: #FFCC33 | Warna RGB: 255 204 51 |
| Kode warna HTML: #FFCC00 | Warna RGB: 255 204 0 |
| Kode warna HTML: #FFCC66 | Warna RGB: 255 204 102 |
| Kode warna HTML: #CCCC00 | Warna RGB: 204 204 0 |
| Kode warna HTML: #FFFF00 | Warna RGB: 255 255 0 |
| Kode warna HTML: #FFFF33 | Warna RGB: 255 255 51 |
| Kode warna HTML: #FFFF66 | Warna RGB: 255 255 102 |
| Kode warna HTML: #FFFF99 | Warna RGB: 255 255 153 |
| Kode warna HTML: #FFFFCC | Warna RGB: 255 255 204 |
Tabel ini mencakup 216 kode warna html yang aman. Setiap warna memiliki nilai dalam RGB untuk menentukan warna pada editor grafis dan HEX untuk menentukan warna pada halaman html.
>> Manajemen warna
Nilai warna RGB heksadesimal
Metode mendeskripsikan dan memproses warna berbeda satu sama lain dalam representasi akhir yang dimaksudkan. Mari kita bandingkan, misalnya, representasi warna untuk pencetakan dan monitor komputer. Dalam kasus pertama, dasar diambil putih warna kertas yang kemudian diterapkan tiga warna primer: biru, ungu Dan kuning. Bercampur satu sama lain dan dengan warna kertas putih dalam proporsi yang berbeda, ketiga warna primer ini memberikan corak warna yang berbeda, kecuali hitam murni, atau jika tidak ada cat, mereka menghasilkan kertas putih. Jika kita menambahkan warna hitam pada mereka, kita dapatkan CMYK- metode transmisi warna ketika warna yang dibutuhkan diperoleh dengan mengurangkan warna yang hilang dari putih.
Dalam kasus kedua, dasar diambil hitam warna layar monitor, yang setiap selnya bersinar dalam salah satu dari tiga warna: merah-merah, hijau-hijau dan biru-biru. Kemudian, jika tidak ada cahaya sama sekali, kita mendapatkan warna layar hitam murni, dan warna apa pun yang diperlukan diberikan oleh rasio masing-masing dari ketiga warna tersebut. Dalam hal ini kita akan mendapatkan RGB-metode transmisi warna. Warna primer dapat berkisar dari 0
ke 255
, atau dari 0%
ke 100%
, atau dapat direpresentasikan sebagai nilai heksadesimal. Pada gambar di bawah ini Anda dapat melihat hasil pencampuran warna primer.
Sistem bilangan heksadesimal, tidak seperti sistem bilangan desimal, tidak memiliki sepuluh digit, tetapi enam belas - itulah namanya. Oleh karena itu, hanya ada varian kombinasi dua digit yang tidak berulang - 256 , untuk melanjutkan rangkaian angka setelahnya 9 surat dari A ke F, oleh karena itu, rangkaiannya akan terlihat seperti ini -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
Dalam hal ini, warna ditentukan oleh tiga angka heksadesimal, yang masing-masing terdiri dari dua digit. Angka pertama menentukan intensitasnya merah warna, sedang- hijau, terakhir- biru warna. Semua angka dapat mengambil nilai dalam rentang dari 00 ke FF(dari 0 hingga 255). Misalnya: warna hijau diberikan sebagai #00FF00, merah - seperti #FF0000, biru - seperti #0000FF, putih - seperti #FFFFFF, tidak adanya warna atau hitam sama sekali diberikan sebagai #000000 .
Dalam formulir di bawah ini Anda dapat menentukan nilai heksadesimal apa pun untuk masing-masing dari tiga warna dan melihat hasil pencampurannya dengan mengklik di kolom keluaran.
Contoh beberapa nilai warna RGB heksadesimal: gradasi warna merah, biru dan hijau.
| melihat | kode | melihat | kode | melihat | kode | melihat | kode | melihat | kode | melihat | kode |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Menentukan Warna Menggunakan String Literal
Untuk kemudahan penggunaan, beberapa warna dan kombinasinya diberi nama yang dikenali oleh semua browser, dan banyak di antaranya dapat diatur berdasarkan nama. Tabel di bawah ini menunjukkan beberapa nama warna:
| melihat | Nama | melihat | Nama | melihat | Nama | melihat | Nama |
| Putih | Merah | Oranye | Kuning | ||||
| Hijau | Biru | Ungu | Hitam | ||||
| Alicebiru | putih antik | air | Aquamarine | ||||
| Biru langit | Krem | Bisque | Blanchedalmond | ||||
| biru ungu | Cokelat | kayu kekar | Kadet biru | ||||
| Minuman keras manis | Cokelat | Karang | Bunga jagung biru | ||||
| sutra jagung | Merah tua | Sian | Biru tua | ||||
| Cyan gelap | Batang Emas Gelap | Abu-abu gelap | Hijau tua | ||||
| Khaki gelap | Magenta gelap | Hijau zaitun gelap | Oranye gelap | ||||
| Anggrek gelap | Merah gelap | salmon hitam | hijau laut gelap | ||||
| Biru Batu Tulis Gelap | Abu-abu gelap | pirus gelap | ungu tua | ||||
| merah jambu dalam | Langit biru yang dalam | redup | pengelak biru | ||||
| Batu bata tahan api | Bunga putih | Hijau hutan | Fuchia | ||||
| Gainsboro | hantu putih | Emas | batang emas | ||||
| Abu-abu | Hijaukuning | embun madu | merah jambu panas | ||||
| merah India | Nila | Gading | Dril | ||||
| warna lembayung muda | Perona pipi lavender | lemonchiffon | Biru muda | ||||
| karang ringan | Cyan ringan | Batang dingin ringankuning | Hijau muda | ||||
| abu-abu terang | merah muda terang | ikan salmon ringan | Hijau muda | ||||
| Biru muda | Abu-abu terang | Biru Baja Ringan | Kuning muda | ||||
| Kapur | hijau limau | Linen | ungu | ||||
| Merah tua | Aquamarine sedang | Biru sedang | Anggrek sedang | ||||
| Ungu sedang | Hijau laut sedang | Biru batu tulis sedang | Hijau musim semi sedang | ||||
| Pirus sedang | Ungu sedang | Biru tengah malam | krim mint | ||||
| mawar berkabut | Navajoputih | Angkatan laut | renda tua | ||||
| Zaitun | Oliverab | berwarna oranye | Anggrek | ||||
| Batang emas pucat | Hijau pucat | paleteturquoise | palevioletred | ||||
| cambuk pepaya | kue persik | Peru | Berwarna merah muda | ||||
| Prem | bubuk biru | coklat kemerahan | biru kerajaan | ||||
| Pelana coklat | hijau laut | Kerang laut | Sienna | ||||
| Perak | Biru langit | batu tulis biru | abu-abu batu tulis | ||||
| Salju | hijau musim semi | Baja biru | Tan | ||||
| teal | thistle | Tomat | Pirus | ||||
| Ungu | Gandum | asap putih | Kuninghijau |
Menggunakan palet warna yang aman
Sayangnya, pada platform yang berbeda, dengan pengaturan sistem yang berbeda, reproduksi warna yang benar menjadi masalah. Masalahnya adalah browser selalu mencoba menyesuaikan palet warna dokumen dengan pengaturan sistem dan kemampuan monitor, dengan mencampurkan warna secara mandiri dan menggantinya. Akibatnya, terkadang pengguna tidak melihat secara pasti apa yang ingin ditunjukkan oleh webmaster kepadanya. Jalan keluar dari situasi ini ditemukan dengan menggunakan palet, yang setiap warnanya dijamin akan ditampilkan secara merata oleh semua browser di platform berbeda. Inilah yang disebut terjamin palet, juga disebut aman palet. Palet ini mencakup warna-warna yang komponen warnanya mempunyai nilai berikut: 00 ,33 ,66 ,99 , CC,FF, dengan segala cara yang memungkinkan 216 kombinasi mereka.
| melihat | kode | melihat | kode | melihat | kode | melihat | kode | melihat | kode | melihat | kode |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |