Warna dalam gaya dapat ditentukan dengan berbagai cara: berdasarkan nilai heksadesimal, berdasarkan nama, dalam format RGB, RGBA, HSL, HSLA. Warna dalam gaya dapat ditentukan dengan berbagai cara: berdasarkan nilai heksadesimal, berdasarkan nama, dalam format Warna RGB, RGBA, HSL, HSLA
Halaman ini berisi tabel dengan kata kunci yang dapat digunakan untuk menunjukkan warna dalam bahasa pengembang Web seperti: HTML, CSS, JavaScript, Flash, dll.
Dalam spesifikasi lama yang menjadi perhatian WC3, hanya 16 yang ditentukan kata kunci, yang digunakan untuk mengatur warna dalam HTML dan CSS. Lebih jauh lagi, spesifikasi yang lebih modern, 130 kata kunci lainnya ditambahkan untuk menunjukkan nama warna. Tabel berikut berisi nama warna serta kode hex dan RGB yang sesuai.
Menurut aturan CSS, nama warna tidak peka huruf besar-kecil. Entri warna IndianRed dan indianred setara.
Perlu juga dicatat bahwa dari 146 kata kunci dalam tabel, sebenarnya warna di dalamnya lebih sedikit. Ini karena beberapa kata kunci merujuk pada warna yang sama. Jadi, nama Gray dan Gray mewakili 50% kode warna abu-abu #808080, dan kata Magenta adalah sinonim untuk warna HTML Fuchsia, sesuai dengan kode heksadesimal #FF00FF. Kata Aqua dan Cyan juga sinonim, sesuai dengan kode #00FFFF.
|
|
Dalam HTML, warna dapat ditentukan dengan tiga cara:
Mengatur warna dalam HTML berdasarkan namanya
Beberapa warna dapat ditentukan berdasarkan namanya, menggunakan nama warna pada bahasa Inggris. Kata kunci yang paling umum: hitam, putih, merah, hijau, biru, dll.:
Warna teks – merah
Warna paling populer dari standar Konsorsium World Wide Web(Konsorsium World Wide Web Inggris, W3C):
Warna | Nama | Warna | Nama | Warna | Nama | Warna | Nama |
---|---|---|---|---|---|---|---|
Hitam | Abu-abu | Perak | Putih | ||||
Kuning | jeruk nipis | air | fuchsia | ||||
Merah | Hijau | Biru | Ungu | ||||
Merah tua | Zaitun | Angkatan laut | teal |
Contoh penggunaan nama warna yang berbeda:
Contoh: menentukan warna berdasarkan namanya
- Cobalah sendiri "
Tajuk di latar belakang merah
Header pada latar belakang oranye
Menuju latar belakang kapur
Teks putih dengan latar belakang biru
Tajuk di latar belakang merah
Header pada latar belakang oranye
Menuju latar belakang kapur
Teks putih dengan latar belakang biru
Menentukan Warna Menggunakan RGB
Saat menampilkan warna berbeda pada monitor, palet RGB digunakan sebagai dasar. Warna apa pun diperoleh dengan mencampurkan tiga warna dasar: R - merah, G - hijau, B - biru. Kecerahan setiap warna diberikan oleh satu byte dan oleh karena itu dapat mengambil nilai dari 0 hingga 255. Misalnya, RGB(255,0,0) ditampilkan sebagai merah karena merah disetel ke nilai tertinggi (255) dan sisanya diatur ke 0 Anda juga dapat mengatur warna sebagai persentase. Setiap parameter menunjukkan tingkat kecerahan warna yang sesuai. Misalnya: nilai rgb(127, 255, 127) dan rgb(50%, 100%, 50%) akan menetapkan warna hijau sedang yang sama:
Contoh : Menentukan Warna Menggunakan RGB
- Cobalah sendiri "
rgb(127, 255, 127)
RGB(50%, 100%, 50%)
rgb(127, 255, 127)
RGB(50%, 100%, 50%)
Atur warna berdasarkan nilai heksadesimal
Nilai-nilai R G B juga dapat ditentukan menggunakan nilai warna heksadesimal (HEX) dalam bentuk: #RRGGBB dimana RR (merah), GG (hijau) dan BB (biru) adalah nilai heksadesimal dari 00 hingga FF (sama dengan desimal 0-255 ) . Sistem heksadesimal, tidak seperti sistem desimal, seperti namanya, didasarkan pada angka 16. Sistem heksadesimal menggunakan tanda-tanda berikut: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Di sini angka 10 sampai 15 diganti dengan huruf latin. Angka yang lebih besar dari 15 dalam sistem heksadesimal direpresentasikan dengan menggabungkan dua karakter menjadi satu nilai. Misalnya, angka tertinggi 255 dalam desimal sama dengan nilai FF tertinggi dalam heksadesimal. Berbeda dengan sistem desimal, bilangan heksadesimal diawali dengan simbol hash. # , misalnya, #FF0000 ditampilkan dengan warna merah karena merah disetel ke nilai tertingginya (FF) dan warna lainnya disetel ke nilai minimumnya (00). Tanda setelah simbol hash # Anda dapat mengetikkan huruf besar dan kecil. Sistem heksadesimal memungkinkan Anda menggunakan bentuk singkatan #rgb, di mana setiap karakter setara dengan dua kali lipat. Oleh karena itu, entri #f7O seharusnya dianggap sebagai #ff7700.
Contoh: Warna HEX
- Cobalah sendiri "
merah: #FF0000
hijau: #00FF00
biru: #0000FF
merah: #FF0000
hijau: #00FF00
biru: #0000FF
merah+hijau=kuning: #FFFF00
merah+biru=ungu: #FF00FF
hijau+biru=sian: #00FFFF
Daftar warna umum (nama, HEX dan RGB):
nama Inggris | nama Rusia | Sampel | HEX | RGB | ||
---|---|---|---|---|---|---|
bayam | bayam | #E52B50 | 229 | 43 | 80 | |
Amber | Amber | #FFBF00 | 255 | 191 | 0 | |
air | Biru hijau | #00FFFF | 0 | 255 | 255 | |
Biru langit | Biru langit | #007FFF | 0 | 127 | 255 | |
Hitam | Hitam | #000000 | 0 | 0 | 0 | |
Biru | Biru | #0000FF | 0 | 0 | 255 | |
Bondi Biru | Air pantai Bondi | #0095B6 | 0 | 149 | 182 | |
Kuningan | Kuningan | #B5A642 | 181 | 166 | 66 | |
Cokelat | Cokelat | #964B00 | 150 | 75 | 0 | |
Berwarna biru langit | Biru langit | #007BA7 | 0 | 123 | 167 | |
Hijau musim semi yang gelap | Hijau musim semi yang gelap | #177245 | 23 | 114 | 69 | |
Zamrud | Zamrud | #50C878 | 80 | 200 | 120 | |
Terong | Terong | #990066 | 153 | 0 | 102 | |
fuchsia | fuchsia | #FF00FF | 255 | 0 | 255 | |
Emas | Emas | #FFD700 | 250 | 215 | 0 | |
Abu-abu | Abu-abu | #808080 | 128 | 128 | 128 | |
Hijau | Hijau | #00FF00 | 0 | 255 | 0 | |
Nila | Nila | #4B0082 | 75 | 0 | 130 | |
Giok | Giok | #00A86B | 0 | 168 | 107 | |
jeruk nipis | jeruk nipis | #CCFF00 | 204 | 255 | 0 | |
perunggu | perunggu | #0BDA51 | 11 | 218 | 81 | |
Angkatan laut | Biru tua | #000080 | 0 | 0 | 128 | |
Oker | Oker | #CC7722 | 204 | 119 | 34 | |
Zaitun | Zaitun | #808000 | 128 | 128 | 0 | |
Oranye | Oranye | #FFA500 | 255 | 165 | 0 | |
Persik | Persik | #FFE5B4 | 255 | 229 | 180 | |
Labu | Labu | #FF7518 | 255 | 117 | 24 | |
Ungu | Ungu | #800080 | 128 | 0 | 128 | |
Merah | Merah | #FF0000 | 255 | 0 | 0 | |
Kunyit | Kunyit | #F4C430 | 244 | 196 | 48 | |
Laut hijau | Laut hijau | #2E8B57 | 46 | 139 | 87 | |
Rawa hijau | Bolotny | #ACB78E | 172 | 183 | 142 | |
teal | Biru hijau | #008080 | 0 | 128 | 128 | |
Biru laut | Biru laut | #120A8F | 18 | 10 | 143 | |
Ungu | Ungu | #8B00FF | 139 | 0 | 255 | |
Kuning | Kuning | #FFFF00 | 255 | 255 | 0 |
Kode warna (latar belakang) berdasarkan saturasi dan rona.
Warna HTML ditunjukkan dengan enam karakter setelah karakter garis miring - misalnya, #000000. Keenam simbol ini mewakili proporsi warna berbeda (Merah, Hijau, Biru) pada warna akhir. Di monitor komputer Anda, gambar terbentuk dari jumlah yang besar titik yang disebut piksel. Setiap piksel adalah sumber cahaya kecil, sebut saja "senter", yang terdiri dari tiga senter - merah, hijau, dan biru. Dengan mengurangi atau meningkatkan intensitas cahaya senter berwarna, kita mendapatkan warna yang diinginkan.
Kode warna HTML
Warna dalam HTML diwakili oleh notasi heksadesimal (HEX) merah, biru, dan hijau (RGB).
Nilai warna terkecil adalah 0 (heksadesimal 00). Nilai warna tertinggi adalah 255 (hex FF).
Nilai warna heksadesimal adalah tiga digit yang dimulai dengan tanda #.
Kode warna (arti)
Warna | kode HEX | kode RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255,0,0) | |
#00FF00 | rgb(0,255,0) | |
#0000FF | rgb(0,0,255) | |
#FFFF00 | rgb(255.255,0) | |
#00FFFF | rgb(0,255,255) | |
#FF00FF | rgb(255,0,255) | |
#C0C0C0 | rgb(192.192.192) | |
#FFFFFF | rgb(255.255.255) |
16 juta warna
Menggabungkan warna merah, biru, dan hijau dengan nilai berkisar antara 0 hingga 255 untuk persentase setiap warna menghasilkan total lebih dari 16 juta corak (256 x 256 x 256).
Mayoritas monitor modern mampu menampilkan setidaknya 16.384 warna berbeda (monitor LCD umumnya mampu menampilkan 262 ribu 16 juta (diperbarui Oktober 2013) warna, dan monitor CRT dapat menampilkan jumlah warna yang hampir tidak terbatas).
Tabel warna di bawah ini menunjukkan perubahan proporsi warna merah dari 0 menjadi 255 dengan nilai nol untuk biru dan hijau:
Merah | kode HEX | kode RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080000 | rgb(8,0,0) | |
#100000 | rgb(16,0,0) | |
#180000 | rgb(24,0,0) | |
#200000 | rgb(32,0,0) | |
#280000 | rgb(40,0,0) | |
#300000 | rgb(48,0,0) | |
#380000 | rgb(56,0,0) | |
#400000 | rgb(64,0,0) | |
#480000 | rgb(72,0,0) | |
#500000 | rgb(80,0,0) | |
#580000 | rgb(88,0,0) | |
#600000 | rgb(96,0,0) | |
#680000 | rgb(104,0,0) | |
#700000 | rgb(112,0,0) | |
#780000 | rgb(120,0,0) | |
#800000 | rgb(128,0,0) | |
#880000 | rgb(136,0,0) | |
#900000 | rgb(144,0,0) | |
#980000 | rgb(152,0,0) | |
#A00000 | rgb(160,0,0) | |
#A80000 | rgb(168,0,0) | |
#B00000 | rgb(176,0,0) | |
#B80000 | rgb(184,0,0) | |
#C00000 | rgb(192,0,0) | |
#C80000 | rgb(200,0,0) | |
#D00000 | rgb(208,0,0) | |
#D80000 | rgb(216,0,0) | |
#E00000 | rgb(224,0,0) | |
#E80000 | rgb(232,0,0) | |
#F00000 | rgb(240,0,0) | |
#F80000 | rgb(248,0,0) | |
#FF0000 | rgb(255,0,0) |
Bayangan abu-abu
Untuk mendapatkan corak abu-abu, digunakan bagian yang sama dari semua warna. Untuk memudahkan Anda memilih warna yang tepat, kami menyediakan kode warna abu-abu
Bayangan abu-abu | kode HEX | kode RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080808 | RGB(8,8,8) | |
#101010 | rgb(16,16,16) | |
#181818 | rgb(24,24,24) | |
#202020 | rgb(32,32,32) | |
#282828 | rgb(40,40,40) | |
#303030 | rgb(48,48,48) | |
#383838 | rgb(56,56,56) | |
#404040 | rgb(64,64,64) | |
#484848 | rgb(72,72,72) | |
#505050 | rgb(80,80,80) | |
#585858 | rgb(88,88,88) | |
#606060 | rgb(96,96,96) | |
#686868 | rgb(104.104.104) | |
#707070 | rgb(112.112.112) | |
#787878 | rgb(120,120,120) | |
#808080 | rgb(128.128.128) | |
#888888 | rgb(136.136.136) | |
#909090 | rgb(144.144.144) | |
#989898 | rgb(152.152.152) | |
#A0A0A0 | rgb(160.160.160) | |
#A8A8A8 | rgb(168.168.168) | |
#B0B0B0 | rgb(176.176.176) | |
#B8B8B8 | rgb(184.184.184) | |
#C0C0C0 | rgb(192.192.192) | |
#C8C8C8 | rgb(200.200.200) | |
#D0D0D0 | rgb(208.208.208) | |
#D8D8D8 | rgb(216.216.216) | |
#E0E0E0 | rgb(224.224.224) | |
#E8E8E8 | rgb(232.232.232) | |
#F0F0F0 | rgb(240.240.240) | |
#F8F8F8 | rgb(248.248.248) | |
#FFFFFF | rgb(255.255.255) |
Nama warna html lintas browser (semua browser).
Kumpulan 150 nama warna dalam html, didukung di semua browser.
Nama warna standar
W3C mencantumkan 16 nama warna yang valid untuk HTML dan CSS: aqua, hitam, biru, fuchsia, abu-abu, hijau, kapur, merah marun (chestnut), angkatan laut (ultramarine), zaitun (zaitun), ungu (ungu), merah (merah) , perak (silver), teal (abu-abu), putih (putih) dan kuning (kuning).
Jika menggunakan warna yang tidak termasuk dalam daftar ini, lebih tepat menggunakan kode heksadesimal (HEX) atau kode RGB.
Warna yang aman
Beberapa tahun yang lalu, ketika komputer dapat mendukung maksimal 256 warna berbeda, daftar 216 "Warna Aman Web" diusulkan, dengan 40 warna dicadangkan untuk sistem.
Palet 216 warna ini dibuat untuk menampilkan warna dengan benar dalam mode palet 256 warna.
Sekarang hal ini tidak menjadi masalah karena sebagian besar komputer di seluruh dunia mendukung jutaan corak warna. Bagaimanapun, berikut adalah daftar warna-warna ini:
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 |
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 mengatur warna font menggunakan berbagai sistem penampakan warna. Properti ini menjelaskan warna konten teks elemen. Selain itu, ini digunakan untuk memberikan potensi nilai tidak langsung (currentColor) untuk properti lain yang menerima 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 | |
jeruk nipis | #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 (baik tiga nilai integer 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.