Kod warna dalam CSS digunakan untuk menentukan warna. Biasanya, kod warna atau nilai warna digunakan untuk menetapkan warna untuk sama ada warna latar depan elemen (cth. warna teks, warna pautan) atau warna latar belakang elemen (warna latar belakang, warna blok). Ia juga boleh digunakan untuk menukar warna butang, sempadan, penanda, tuding dan kesan hiasan lain.
Anda boleh menentukan nilai warna anda dalam pelbagai format. Jadual berikut menyenaraikan semua format yang mungkin:
Format yang disenaraikan diterangkan dengan lebih terperinci di bawah.
Warna CSS - Kod Hex
Kod warna heksadesimal ialah perwakilan enam digit warna. Dua digit pertama (RR) mewakili nilai merah, dua digit seterusnya mewakili nilai hijau (GG), dan dua digit terakhir mewakili nilai biru (BB).
Warna CSS - Kod Hex Pendek
Kod warna hex pendek ialah bentuk tatatanda enam aksara yang lebih pendek. Dalam format ini, setiap digit diulang untuk menghasilkan nilai warna enam digit yang setara. Contohnya: #0F0 menjadi #00FF00.
Nilai heksadesimal boleh diambil daripada mana-mana perisian grafik seperti Adobe Photoshop, Core Draw, dsb.
Setiap kod warna heksadesimal dalam CSS akan didahului oleh tanda cincang "#". Di bawah adalah contoh penggunaan tatatanda perenambelasan.
Warna CSS - Nilai RGB
nilai RGB ialah kod warna yang ditetapkan menggunakan harta rgb(). Sifat ini mengambil tiga nilai: setiap satu untuk merah, hijau dan biru. Nilai boleh menjadi integer, dari 0 hingga 255, atau peratusan.
Catatan: Tidak semua penyemak imbas menyokong sifat warna rgb(), jadi tidak disyorkan untuk menggunakannya.
Di bawah ialah contoh yang menunjukkan berbilang warna menggunakan nilai RGB.
Penjana kod warna
Anda boleh mencipta berjuta-juta kod warna menggunakan perkhidmatan kami.
Warna Selamat Pelayar
Di bawah ialah jadual 216 warna yang paling selamat dan bebas komputer. Warna ini dalam CSS berjulat dari 000000 hingga FFFFFF kod perenambelasan. Ia selamat digunakan kerana ia memastikan semua komputer memaparkan warna dengan betul apabila bekerja dengan palet warna 256.
| Jadual warna "selamat" dalam CSS | |||||
| #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 |
Kod Minecraft warna, atau Minecraft kod pemformatan, benarkan mana-mana pemain menambah bunga dan memformat teks dalam setiap cara yang mungkin terus dalam Minecraft. Kod warna dari &0-9 - hingga &a-f. Tambahkannya sebelum teks anda. Mesej daripada pemain boleh mengandungi kod warna yang membolehkan anda menambah warna pada ayat anda.
Warna dan kod pemformatan
Tanda ampersand (&) diikuti dengan nombor perenambelasan dalam mesej memberi isyarat kepada pelanggan untuk menukar warna apabila memaparkan teks. Selain itu, teks boleh diformatkan dengan & diikuti dengan huruf. Anda boleh menambah warna yang berbeza pada buku, blok arahan, nama pelayan, penerangan pelayan (motd), nama dunia, tanda, dan juga nama pemain.
Sangat mudah untuk memformat teks anda dalam konfigurasi atau dalam permainan menggunakan carta warna di bawah. &r digunakan untuk menetapkan semula semua kod, i.e. &mAAA&rBBB akan dipaparkan sebagai AAA BBB.
Kami membentangkan jadual kod warna sedia ada di Minecraft untuk kemudahan anda:
| Kod | Nama | Nama Teknikal | Warna simbol | Warna bayang simbol | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| R | G | B | Hex | R | G | B | Hex | |||
| &0 | Hitam | hitam | 0 | 0 | 0 | 000000 | 0 | 0 | 0 | 000000 |
| &1 | Biru gelap | biru gelap | 0 | 0 | 170 | 0000AA | 0 | 0 | 42 | 00002A |
| &2 | Hijau gelap | hijau gelap | 0 | 170 | 0 | 00AA00 | 0 | 42 | 0 | 002A00 |
| &3 | Biru-hijau gelap | dark_aqua | 0 | 170 | 170 | 00AAA | 0 | 42 | 42 | 002A2A |
| &4 | Merah gelap | merah gelap | 170 | 0 | 0 | AA0000 | 42 | 0 | 0 | 2A0000 |
| &5 | Ungu gelap | ungu gelap | 170 | 0 | 170 | AA00AA | 42 | 0 | 42 | 2A002A |
| &6 | emas | emas | 255 | 170 | 0 | FFAA00 | 42 | 42 | 0 | 2A2A00 |
| &7 | kelabu | kelabu | 170 | 170 | 170 | AAAAAA | 42 | 42 | 42 | 2A2A2A |
| &8 | Kelabu gelap | kelabu gelap | 85 | 85 | 85 | 555555 | 21 | 21 | 21 | 151515 |
| &9 | Biru | biru | 85 | 85 | 255 | 5555FF | 21 | 21 | 63 | 15153F |
| &a | hijau | hijau | 85 | 255 | 85 | 55FF55 | 21 | 63 | 21 | 153F15 |
| &b | Biru Hijau | aqua | 85 | 255 | 255 | 55FFFF | 21 | 63 | 63 | 153F3F |
| &c | merah | merah | 255 | 85 | 85 | FF5555 | 63 | 21 | 21 | 3F1515 |
| &d | Ungu muda | ungu muda | 255 | 85 | 255 | FF55FF | 63 | 21 | 63 | 3F153F |
| &e | Kuning | kuning | 255 | 255 | 85 | FFFF55 | 63 | 63 | 21 | 3F3F15 |
| &f | putih | putih | 255 | 255 | 255 | FFFFFF | 63 | 63 | 63 | 3F3F3F |
Kadang-kadang perlu gariskan, potong, sorotan sebarang teks. Ini dilakukan menggunakan pemformatan teks. Ia digunakan dengan cara yang sama seperti warna (kami letakkan sebelum teks kod, contohnya &lMinecraft = Minecraft.
Untuk kemudahan anda, di bawah ialah jadual kod pemformatan:
| Kod | Nama |
|---|---|
| &k | Teks ajaib |
| &l | Gambar kecil |
| &m | Teks coretan |
| &n | Teks bergaris bawah |
| &o | Teks miring |
| &r | Teks tanpa pemformatan |
Nombor perenambelasan digunakan untuk menentukan warna. Sistem perenambelasan, tidak seperti sistem perpuluhan, berdasarkan, seperti namanya, pada nombor 16. Nombornya adalah seperti berikut: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Nombor dari 10 hingga 15 digantikan dengan huruf Latin. Nombor lebih daripada 15 dalam sistem perenambelasan dibentuk dengan menggabungkan dua nombor menjadi satu. Sebagai contoh, nombor 255 dalam perpuluhan sepadan dengan nombor FF dalam perenambelasan. Untuk mengelakkan kekeliruan dalam menentukan sistem nombor, simbol cincang # diletakkan sebelum nombor perenambelasan, contohnya #666999. Setiap satu daripada tiga warna - merah, hijau dan biru - boleh mengambil nilai dari 00 hingga FF. Oleh itu, simbol warna dibahagikan kepada tiga komponen #rrggbb, di mana dua simbol pertama menunjukkan komponen merah warna, dua tengah - hijau, dan dua terakhir - biru. Ia dibenarkan menggunakan bentuk singkatan #rgb, di mana setiap aksara perlu digandakan. Oleh itu, entri #fe0 harus dianggap sebagai #ffee00.
Dengan nama
| internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Pelayar menyokong beberapa warna dengan nama mereka. Dalam jadual 1 menunjukkan nama, kod perenambelasan, RGB, nilai HSL dan huraian.
| Nama | Warna | Kod | RGB | HSL | Penerangan |
|---|---|---|---|---|---|
| putih | #ffffff atau #fff | rgb(255,255,255) | hsl(0.0%,100%) | putih | |
| perak | #c0c0c0 | rgb(192,192,192) | hsl(0.0%,75%) | kelabu | |
| kelabu | #808080 | rgb(128,128,128) | hsl(0.0%,50%) | Kelabu gelap | |
| hitam | #000000 atau #000 | rgb(0,0,0) | hsl(0.0%,0%) | Hitam | |
| merah marun | #800000 | rgb(128,0,0) | hsl(0.100%,25%) | Merah gelap | |
| merah | #ff0000 atau #f00 | rgb(255,0,0) | hsl(0,100%,50%) | merah | |
| oren | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Jingga | |
| kuning | #ffff00 atau #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Kuning | |
| buah zaitun | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Zaitun | |
| kapur | #00ff00 atau #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Lampu hijau | |
| hijau | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | hijau | |
| aqua | #00ffff atau #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Biru | |
| biru | #0000ff atau #00f | rgb(0,0,255) | hsl(240,100%,50%) | Biru | |
| tentera laut | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Biru gelap | |
| teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Biru Hijau | |
| fuchsia | #ff00ff atau #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Merah jambu | |
| ungu | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Violet |
Menggunakan RGB
| internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Anda boleh menentukan warna menggunakan nilai merah, hijau dan biru dalam sebutan perpuluhan. Setiap daripada tiga komponen warna mengambil nilai dari 0 hingga 255. Ia juga dibenarkan untuk menentukan warna sebagai peratusan, dengan 100% sepadan dengan nombor 255. Mula-mula, nyatakan kata kunci rgb, dan kemudian nyatakan komponen warna dalam kurungan , dipisahkan dengan koma, contohnya rgb(255 , 128, 128) atau rgb(100%, 50%, 50%).
RGBA
| internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Format RGBA adalah serupa dalam sintaks kepada RGB, tetapi termasuk saluran alfa yang menentukan ketelusan elemen. Nilai 0 adalah telus sepenuhnya, 1 adalah legap dan nilai perantaraan seperti 0.5 adalah separa lutsinar.
RGBA telah ditambahkan pada CSS3, jadi kod CSS mesti disahkan terhadap versi ini. Perlu diingatkan bahawa piawaian CSS3 masih dalam pembangunan dan beberapa ciri mungkin berubah. Contohnya, warna dalam format RGB yang ditambahkan pada sifat warna latar belakang disahkan, tetapi warna yang ditambahkan pada sifat latar belakang tidak lagi sah. Pada masa yang sama, pelayar memahami warna untuk kedua-dua sifat dengan betul.
HSL
| internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Nama format HSL berasal daripada gabungan huruf pertama Hue (hue), Saturate (tepu) dan Lightness (lightness). Hue ialah nilai warna pada roda warna (Rajah 1) dan diberikan dalam darjah. 0° sepadan dengan merah, 120° kepada hijau, dan 240° kepada biru. Nilai rona boleh berbeza dari 0 hingga 359.
nasi. 1. Roda warna
Ketepuan ialah keamatan warna dan diukur sebagai peratusan dari 0% hingga 100%. Nilai 0% menunjukkan tiada warna dan warna kelabu, 100% ialah nilai maksimum untuk ketepuan.
Kecerahan menentukan kecerahan warna dan dinyatakan sebagai peratusan daripada 0% hingga 100%. Nilai rendah menjadikan warna lebih gelap, dan nilai tinggi menjadikan warna lebih terang; nilai ekstrem 0% dan 100% sepadan dengan hitam dan putih.
HSLA
| internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Format HSLA adalah serupa dalam sintaks kepada HSL, tetapi termasuk saluran alfa untuk menentukan ketelusan elemen. Nilai 0 adalah telus sepenuhnya, 1 adalah legap dan nilai perantaraan seperti 0.5 adalah separa lutsinar.
Nilai warna RGBA, HSL dan HSLA ditambahkan pada CSS3, jadi sila semak kod anda untuk kesahihan versi apabila menggunakan format ini.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Amaran
Semua kaedah menangkap singa yang disenaraikan di tapak adalah teori dan berdasarkan kaedah pengiraan. Pengarang tidak menjamin keselamatan anda apabila menggunakannya dan menafikan sebarang tanggungjawab untuk hasilnya. Ingat, singa adalah pemangsa dan haiwan berbahaya!
Hasil daripada contoh ini ditunjukkan dalam Rajah. 2.
nasi. 2. Warna pada halaman web
Dalam HTML, warna boleh ditentukan dalam tiga cara:
Menetapkan warna dalam HTML dengan namanya
Sesetengah warna boleh ditentukan mengikut namanya, menggunakan nama warna dalam bahasa Inggeris sebagai nilai. Kata kunci yang paling biasa: hitam, putih, merah, hijau, biru, dsb.:
Warna teks – merah
Warna paling popular bagi piawaian World Wide Web Consortium (W3C):
| Warna | Nama | Warna | Nama | Warna | Nama | Warna | Nama |
|---|---|---|---|---|---|---|---|
| Hitam | Kelabu | Perak | putih | ||||
| Kuning | kapur | Aqua | Fuchsia | ||||
| merah | hijau | Biru | Ungu | ||||
| Maroon | Zaitun | Tentera Laut | Teal |
Contoh penggunaan nama warna yang berbeza:
Contoh: menentukan warna dengan namanya
- Cubalah sendiri"
Pengepala pada latar belakang merah
Pengepala pada latar belakang oren
Tajuk pada latar belakang kapur
Teks putih pada latar belakang biru
Pengepala pada latar belakang merah
Pengepala pada latar belakang oren
Tajuk pada latar belakang kapur
Teks putih pada latar belakang biru
Menentukan Warna Menggunakan RGB
Apabila memaparkan warna yang berbeza pada monitor, palet RGB digunakan sebagai asas. Mana-mana warna diperoleh dengan mencampurkan tiga warna asas: R - merah, G - hijau, B - biru. Kecerahan setiap warna diberikan oleh satu bait dan oleh itu boleh mengambil nilai dari 0 hingga 255. Contohnya, RGB(255,0,0) dipaparkan sebagai merah kerana merah ditetapkan kepada nilai tertingginya (255) dan selebihnya ditetapkan kepada 0 Anda juga boleh menetapkan warna sebagai peratusan. Setiap parameter menunjukkan tahap kecerahan warna yang sepadan. Sebagai contoh: nilai rgb(127, 255, 127) dan rgb(50%, 100%, 50%) akan menetapkan warna hijau sederhana yang sama:
Contoh: Menentukan Warna Menggunakan RGB
- Cubalah sendiri"
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Tetapkan warna mengikut nilai perenambelasan
Nilai R G B juga boleh ditentukan menggunakan nilai warna perenambelasan (HEX) dalam bentuk: #RRGGBB di mana RR (merah), GG (hijau) dan BB (biru) ialah nilai perenambelasan dari 00 hingga FF (sama dengan perpuluhan 0-255 ). Sistem perenambelasan, tidak seperti sistem perpuluhan, berdasarkan, seperti namanya, pada nombor 16. Sistem perenambelasan menggunakan tanda berikut: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Di sini nombor dari 10 hingga 15 digantikan dengan huruf Latin. Nombor yang lebih besar daripada 15 dalam sistem perenambelasan diwakili dengan menggabungkan dua aksara menjadi satu nilai. Sebagai contoh, nombor tertinggi 255 dalam perpuluhan sepadan dengan nilai FF tertinggi dalam perenambelasan. Tidak seperti sistem perpuluhan, nombor perenambelasan didahului oleh simbol cincang. # , sebagai contoh, #FF0000 ditunjukkan sebagai merah kerana merah ditetapkan kepada nilai tertinggi (FF) dan selebihnya warna ditetapkan kepada nilai minimumnya (00). Tanda selepas simbol cincang # Anda boleh menaip dalam huruf besar dan huruf kecil. Sistem perenambelasan membolehkan anda menggunakan bentuk singkatan #rgb, di mana setiap aksara adalah bersamaan dengan dua kali ganda. Oleh itu, entri #f7O harus dianggap sebagai #ff7700.
Contoh: Warna HEX
- Cubalah sendiri"
merah: #FF0000
hijau: #00FF00
biru: #0000FF
merah: #FF0000
hijau: #00FF00
biru: #0000FF
merah+hijau=kuning: #FFFF00
merah+biru=ungu: #FF00FF
hijau+biru=cyan: #00FFFF
Senarai warna biasa (nama, HEX dan RGB):
| nama Inggeris | nama Rusia | Sampel | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amaranth | Amaranth | #E52B50 | 229 | 43 | 80 | |
| Amber | Amber | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Biru Hijau | #00FFFF | 0 | 255 | 255 | |
| Azure | Azure | #007FFF | 0 | 127 | 255 | |
| Hitam | Hitam | #000000 | 0 | 0 | 0 | |
| Biru | Biru | #0000FF | 0 | 0 | 255 | |
| Biru Bondi | Air pantai Bondi | #0095B6 | 0 | 149 | 182 | |
| Tembaga | Tembaga | #B5A642 | 181 | 166 | 66 | |
| coklat | coklat | #964B00 | 150 | 75 | 0 | |
| Serulean | Azure | #007BA7 | 0 | 123 | 167 | |
| Hijau musim bunga gelap | Hijau musim bunga gelap | #177245 | 23 | 114 | 69 | |
| Zamrud | Zamrud | #50C878 | 80 | 200 | 120 | |
| Terung | Terung | #990066 | 153 | 0 | 102 | |
| Fuchsia | Fuchsia | #FF00FF | 255 | 0 | 255 | |
| emas | emas | #FFD700 | 250 | 215 | 0 | |
| Kelabu | kelabu | #808080 | 128 | 128 | 128 | |
| hijau | hijau | #00FF00 | 0 | 255 | 0 | |
| nila | nila | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| kapur | kapur | #CCFF00 | 204 | 255 | 0 | |
| Malachite | Malachite | #0BDA51 | 11 | 218 | 81 | |
| Tentera Laut | Biru gelap | #000080 | 0 | 0 | 128 | |
| oker | oker | #CC7722 | 204 | 119 | 34 | |
| Zaitun | Zaitun | #808000 | 128 | 128 | 0 | |
| Jingga | Jingga | #FFA500 | 255 | 165 | 0 | |
| pic | pic | #FFE5B4 | 255 | 229 | 180 | |
| labu | labu | #FF7518 | 255 | 117 | 24 | |
| Ungu | Violet | #800080 | 128 | 0 | 128 | |
| merah | merah | #FF0000 | 255 | 0 | 0 | |
| Safron | Safron | #F4C430 | 244 | 196 | 48 | |
| Laut hijau | Laut hijau | #2E8B57 | 46 | 139 | 87 | |
| Hijau paya | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Teal | Biru Hijau | #008080 | 0 | 128 | 128 | |
| Ultramarine | Ultramarine | #120A8F | 18 | 10 | 143 | |
| Violet | Violet | #8B00FF | 139 | 0 | 255 | |
| Kuning | Kuning | #FFFF00 | 255 | 255 | 0 | |
Kod warna (latar belakang) mengikut ketepuan dan warna.
