>>Pengurusan warna
Nilai warna RGB heksadesimal
Kaedah penghuraian dan pemprosesan warna berbeza antara satu sama lain dalam representasi akhir yang dimaksudkan untuknya. Mari kita bandingkan, sebagai contoh, perwakilan warna untuk percetakan dan untuk monitor komputer. Dalam kes pertama, asas diambil putih warna kertas di mana tiga warna utama digunakan kemudiannya: biru, ungu Dan kuning. Mencampur antara satu sama lain dan dengan warna putih kertas dalam perkadaran yang berbeza, ketiga-tiga warna utama ini memberikan warna warna yang berbeza, kecuali hitam tulen, atau jika tiada cat mereka memberikan kertas putih. Jika kita menambah warna hitam kepada mereka, kita dapat CMYK-kaedah penghantaran warna apabila warna yang diperlukan diperolehi dengan menolak warna yang hilang daripada putih.
Dalam kes kedua, asas diambil hitam warna skrin monitor, setiap sel yang bersinar dalam satu daripada tiga warna: merah-merah, hijau-hijau dan biru-biru. Kemudian, dalam ketiadaan lengkap sebarang cahaya, kami mendapat warna skrin hitam tulen, dan mana-mana warna yang diperlukan diberikan mengikut nisbah setiap tiga warna. Dalam kes ini kita akan mendapat RGB-kaedah penghantaran warna. Warna utama boleh terdiri daripada 0
sebelum ini 255
, atau daripada 0%
sebelum ini 100%
, atau boleh diwakili sebagai nilai perenambelasan. Dalam rajah di bawah anda boleh melihat hasil pencampuran warna asas.
Sistem nombor heksadesimal, tidak seperti sistem nombor perpuluhan, tidak mempunyai sepuluh digit, tetapi enam belas - oleh itu namanya. Sehubungan itu, hanya terdapat variasi gabungan dua digit yang tidak berulang - 256 , untuk meneruskan siri nombor selepas 9 surat daripada A sebelum ini F, oleh itu, siri ini akan kelihatan seperti ini -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
Dalam kes ini, warna ditentukan oleh tiga nombor heksadesimal, setiap satunya terdiri daripada dua digit. Nombor pertama menentukan keamatan merah warna, sederhana- hijau, perkara terakhir- biru warna. Semua nombor boleh mengambil nilai dalam julat dari 00 sebelum ini FF(dari 0 hingga 255). Contohnya: warna hijau diberi sebagai #00FF00, merah - seperti #FF0000, biru - seperti #0000FF, putih - seperti #FFFFFF, ketiadaan lengkap warna atau hitam diberikan sebagai #000000 .
Dalam borang di bawah, anda boleh menentukan sebarang nilai perenambelasan untuk setiap tiga warna dan melihat hasil pencampuran mereka dengan mengklik dalam medan output.
Contoh beberapa nilai warna RGB heksadesimal: penggredan merah, biru dan hijau.
| pandangan | kod | pandangan | kod | pandangan | kod | pandangan | kod | pandangan | kod | pandangan | kod |
| #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 Huruf Rentetan
Untuk kemudahan penggunaan, beberapa warna dan gabungannya telah diberikan nama yang diiktiraf oleh semua penyemak imbas, dan ia menjadi mungkin untuk menetapkan banyak daripada mereka mengikut nama. Jadual di bawah menunjukkan beberapa nama warna:
| pandangan | Nama | pandangan | Nama | pandangan | Nama | pandangan | Nama |
| putih | merah | Jingga | Kuning | ||||
| hijau | Biru | Ungu | Hitam | ||||
| Aliceblue | Antik putih | Aqua | Aquamarine | ||||
| Azure | Beige | Bisque | Blanchedalmond | ||||
| Blueviolet | coklat | Kayu Burlywood | Cadetblue | ||||
| Chartreuse | coklat | karang | Biru bunga jagung | ||||
| Sutera jagung | Lembayung | Cyan | Biru gelap | ||||
| Darkcyan | Darkgoldenrod | Kelabu gelap | Hijau gelap | ||||
| Darkkhaki | Darkmagenta | darkolivegreen | Jingga gelap | ||||
| Darkorchid | Merah gelap | Darksalmon | Hijau laut gelap | ||||
| Darkslateblue | Kelabu gelap | Darkturquoise | Darkviolet | ||||
| Deeppink | Deepskyblue | Dimgray | Dodgeblue | ||||
| Bata api | Putih bunga | Hutan hijau | Fuschia | ||||
| Gainsboro | Ghostwhite | emas | Goldenrod | ||||
| Kelabu | Hijau kuning | Tembikai susu | Hotpink | ||||
| Indianred | nila | gading | Khaki | ||||
| Lavender | Lavenderblush | Lemonchiffon | Biru muda | ||||
| Lightcoral | Lightcyan | Lightcoldenrodyellow | Lampu hijau | ||||
| Kelabu cerah | Merah jambu cerah | Lightsalmon | Hijau muda | ||||
| biru muda | Lightslategray | Biru muda | Kuning muda | ||||
| kapur | Hijau limau | Linen | Magenta | ||||
| Maroon | mediumquamarine | biru sederhana | Mediumorkid | ||||
| Sederhana | Hijau laut sederhana | Mediumslateblue | Sederhana hijau | ||||
| Mediumturquoise | Mediumvioletred | Midnightblue | Krim pudina | ||||
| Mistyrose | Navajowhite | Tentera Laut | Oldlace | ||||
| Zaitun | Oliverab | berwarna jingga | Orkid | ||||
| Palegoldenrod | Hijau pucat | Paletteurquoise | berwarna pucat | ||||
| Papayawhip | Peachpuff | Peru | Merah jambu | ||||
| Plum | Serbuk biru | Rosybrown | Biru diraja | ||||
| coklat pelana | Laut hijau | Kerang laut | Sienna | ||||
| Perak | biru langit | Slateblue | Slategray | ||||
| salji | Springgreen | Steelblue | Tan | ||||
| Teal | Thistle | tomato | Pirus | ||||
| Violet | Gandum | asap putih | Kuning hijau |
Menggunakan palet warna yang selamat
Malangnya, pada platform yang berbeza, dengan tetapan sistem yang berbeza, pembiakan warna yang betul adalah masalah. Masalahnya ialah penyemak imbas sentiasa cuba melaraskan palet warna dokumen kepada tetapan sistem dan keupayaan memantau, dengan mencampurkan warna secara bebas dan menggantikannya. Akibatnya, kadangkala pengguna tidak melihat dengan tepat apa yang ingin ditunjukkan oleh juruweb kepadanya. Jalan keluar dari situasi ini ditemui dalam penggunaan palet, setiap warna yang dijamin untuk diberikan sama oleh semua pelayar pada platform yang berbeza. Inilah yang dipanggil terjamin palet, juga dipanggil selamat palet. Palet ini termasuk warna yang komponen warnanya mengambil nilai berikut: 00 ,33 ,66 ,99 , CC,FF, dalam semua cara yang mungkin 216 gabungan mereka.
| pandangan | kod | pandangan | kod | pandangan | kod | pandangan | kod | pandangan | kod | pandangan | kod |
| 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 |
Seperti yang anda ketahui, warna boleh menjejaskan keadaan seseorang: mental dan fizikal. Setiap hari, semasa melayari laman web di Internet, mata menilai berjuta-juta warna dan rona. Pereka web yang biasa dengan psikologi warna boleh memanipulasi mood pelawat untuk mencapai matlamat tertentu.
Ini disebabkan oleh fakta bahawa beberapa warna tenang, dan beberapa, sebaliknya, mengujakan. Seterusnya kita akan bercakap tentang bagaimana warna disintesis dan dipaparkan menggunakan teknologi komputer.
RGB ialah model warna yang mewakili kaedah mendapatkan semua warna dan warnanya dengan mencampurkan dalam pelbagai perkadaran tiga komponen utama, iaitu:
- Warna merah ( merah);
- warna hijau ( hijau);
- warna biru ( Biru).
Di sinilah asal nama singkatan RGB. Warna-warna ini dipilih sebagai warna utama atas sebab tertentu: sebabnya ialah fisiologi retina mata manusia, dan bagaimana ia melihatnya:
Model RGB kekal paling popular hari ini dan digunakan untuk menghasilkan semula warna pada skrin TV dan monitor komputer. Memandangkan pengeluar memberikan produk mereka dengan ciri yang berbeza, pada tahun 1996 sistem sintesis warna berasaskan RGB bersatu yang dipanggil sRGB telah dicipta, di mana Microsoft dan HP bekerjasama.
Perwakilan berangka warna
Seperti yang dinyatakan sebelum ini, warna RGB terbentuk dengan mencampurkan warna primer. Untuk menerangkan keamatan setiap daripada mereka, skema telah diterima pakai di mana warna diwakili oleh julat 0-255 (8 bit), yang dalam tatatanda heksadesimal sepadan dengan 00-FF.
Iaitu, warna utama akan kelihatan seperti ini:
- Merah – RGB (255,0,0);
- Hijau – RGB (0,255,0);
- Biru – RGB (0,0,255);
Jika keamatan warna mengambil nilai kurang daripada 255, maka warna merah, hijau dan biru yang berbeza diperolehi. Berikut ialah jadual penggredan mereka, serta nilai perenambelasan bagi setiap warna:
Jadual warna RGB
Sememangnya, sebagai tambahan kepada penggredan warna primer, terdapat yang bercampur, dan bilangannya agak besar. Oleh itu, jadual warna RGB telah dicipta, yang membentangkan semua warna sedia ada, serta nama dan perwakilan berangkanya ( dalam bentuk perpuluhan dan perenambelasan).
Anda boleh melihatnya di sini. Jadual ini menjadikan kehidupan lebih mudah untuk pereka web, kerana dalam beberapa saat anda boleh mencari teduhan yang diperlukan dan mengetahui perwakilan berangkanya.
Palet warna RGB selamat
Walau bagaimanapun, pada satu ketika terdapat masalah dengan memaparkan warna dalam pelayar yang berbeza, dan untuk menyelesaikannya, palet warna RGB yang dipanggil "selamat" telah disusun, yang diperolehi oleh pengiraan matematik.
Apabila penyemak imbas tidak dapat memaparkan warna dengan betul, ia akan cuba mendapatkan sesuatu yang hampir dengan apa yang diperlukan dengan mencampurkan warna bersebelahan, dan kemungkinan besar hasilnya tidak boleh diterima sepenuhnya:
Dengan menggunakan kod warna RGB daripada palet ini, pembangun web boleh berasa tenang mengenai paparan warna pada halaman tapak web mereka apabila dilihat menggunakan penyemak imbas, platform dan monitor yang berbeza. Walaupun pada masa ini jadual warna selamat kehilangan kaitannya ( kemajuan teknologi masih tidak berhenti), apabila menggunakannya anda boleh, seperti yang mereka katakan, tidur dengan tenang.
Warna emas dalam model RGB
Perkataan "emas" pertama kali digunakan pada awal abad ke-14 untuk menggambarkan warna unsur kimia yang dipanggil Aurum - emas. Dalam model RGB, warna emas diwakili oleh nilai berangka berikut:
- RGB (255, 215, 0) – sistem perpuluhan;
- HEX #FFD700 – sistem perenambelasan.
Warna kuning air dalam model RGB
Warna kuning air menduduki tempat yang agak penting dalam sejarah, walaupun ia bukan yang paling ekspresif. Banyak monumen kebudayaan, terutamanya arca purba, diperbuat daripada batu sabun dan batu sabun, yang mempunyai warna kuning air. Dalam model RGB, warna kuning air mempunyai perwakilan angka berikut.
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 cerah; 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
Vlad Merzhevich
Dalam HTML, warna ditentukan dalam salah satu daripada dua cara: menggunakan kod perenambelasan dan dengan nama warna tertentu. Kaedah berdasarkan sistem nombor heksadesimal kebanyakannya digunakan, kerana ia adalah yang paling universal.
Warna heksadesimal
HTML menggunakan nombor perenambelasan 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. Dalam jadual 6.1 menunjukkan kesesuaian antara nombor perpuluhan dan nombor perenambelasan.
Nombor lebih daripada 15 dalam sistem perenambelasan dibentuk dengan menggabungkan dua nombor menjadi satu (Jadual 6.2). Sebagai contoh, nombor 255 dalam perpuluhan sepadan dengan nombor FF dalam perenambelasan.
Untuk mengelakkan kekeliruan dalam mentakrifkan sistem nombor, nombor perenambelasan didahului oleh simbol cincang #, contohnya #aa69cc. Dalam kes ini, kes itu tidak penting, jadi ia dibenarkan untuk menulis #F0F0F0 atau #f0f0f0.
Warna biasa yang digunakan dalam HTML kelihatan seperti ini.
Di sini warna latar belakang halaman web ditetapkan kepada #FA8E47. Simbol cincang # di hadapan nombor bermakna ia adalah perenambelasan. Dua digit pertama (FA) mentakrifkan komponen merah warna, digit ketiga hingga keempat (8E) mentakrifkan komponen hijau, dan dua digit terakhir (47) mentakrifkan komponen biru. Hasil akhirnya akan menjadi warna ini.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
Setiap satu daripada tiga warna - merah, hijau dan biru - boleh mengambil nilai dari 00 hingga FF, menghasilkan sejumlah 256 warna. Oleh itu, jumlah bilangan warna boleh menjadi 256x256x256 = 16,777,216 kombinasi. Model warna berdasarkan komponen merah, hijau dan biru dipanggil RGB (merah, hijau, biru; merah, hijau, biru). Model ini adalah aditif (dari tambah - tambah), di mana penambahan ketiga-tiga komponen membentuk warna putih.
Untuk memudahkan menavigasi warna perenambelasan, ambil kira beberapa peraturan.
- Jika nilai komponen warna adalah sama (contohnya: #D6D6D6), maka hasilnya akan menjadi warna kelabu. Semakin tinggi nombor, semakin cerah warnanya, dengan nilai antara #000000 (hitam) hingga #FFFFFF (putih).
- Warna merah terang terbentuk jika komponen merah dibuat maksimum (FF) dan komponen selebihnya ditetapkan kepada sifar. Warna dengan nilai #FF0000 ialah warna merah yang paling merah. Perkara yang sama berlaku untuk hijau (#00FF00) dan biru (#0000FF).
- Kuning (#FFFF00) dibuat dengan mencampurkan merah dan hijau. Ini jelas kelihatan pada roda warna (Rajah 6.1), yang membentangkan warna utama (merah, hijau, biru) dan warna pelengkap atau tambahan. Ini termasuk kuning, cyan dan ungu (juga dipanggil magenta). Secara umum, sebarang warna boleh diperolehi dengan mencampurkan warna yang hampir dengannya. Oleh itu, cyan (#00FFFF) diperoleh dengan menggabungkan biru dan hijau.
nasi. 6.1. Bulatan warna
Warna berdasarkan nilai heksadesimal tidak perlu dipilih secara empirik. Untuk tujuan ini, editor grafik yang boleh berfungsi dengan model warna yang berbeza, sebagai contoh, Adobe Photoshop, adalah sesuai. Dalam Rajah. Rajah 6.2 menunjukkan tetingkap untuk memilih warna dalam program ini; nilai heksadesimal yang terhasil bagi warna semasa digariskan dengan garisan. Anda boleh menyalin dan menampalnya ke dalam kod anda.
nasi. 6.2. Tetingkap untuk memilih warna dalam Photoshop
Warna web
Jika anda menetapkan kualiti pemaparan warna monitor kepada 8 bit (256 warna), maka warna yang sama boleh dipaparkan secara berbeza dalam pelayar yang berbeza. Ini disebabkan oleh cara grafik dipaparkan, apabila penyemak imbas berfungsi dengan paletnya sendiri dan tidak dapat menunjukkan warna yang tiada dalam paletnya. Dalam kes ini, warna digantikan dengan gabungan piksel yang lain, hampir dengannya, warna yang meniru warna yang diberikan. Untuk memastikan warna kekal sama di seluruh pelayar yang berbeza, palet warna web yang dipanggil telah diperkenalkan. Warna web ialah warna yang setiap komponen - merah, hijau dan biru - ditetapkan kepada salah satu daripada enam nilai - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Nilai heksadesimal komponen ini ditunjukkan dalam kurungan. Jumlah bilangan warna daripada semua kombinasi yang mungkin memberikan 6x6x6 - 216 warna. Contoh warna web ialah #33FF66.
Ciri utama warna web ialah ia kelihatan sama dalam semua pelayar. Pada masa ini, perkaitan warna web adalah sangat kecil disebabkan oleh peningkatan dalam kualiti monitor dan pengembangan keupayaannya.
Warna mengikut nama
Untuk mengelak daripada mengingati set nombor, anda boleh menggunakan nama warna yang biasa digunakan. Dalam jadual 6.3 menunjukkan nama nama warna yang popular.
| Nama warna | Warna | Penerangan | Nilai heksadesimal |
|---|---|---|---|
| hitam | Hitam | #000000 | |
| biru | Biru | #0000FF | |
| fuchsia | Ungu muda | #FF00FF | |
| kelabu | Kelabu gelap | #808080 | |
| hijau | hijau | #008000 | |
| kapur | Lampu hijau | #00FF00 | |
| merah marun | Merah gelap | #800000 | |
| tentera laut | Biru gelap | #000080 | |
| buah zaitun | Zaitun | #808000 | |
| ungu | Ungu gelap | #800080 | |
| merah | merah | #FF0000 | |
| perak | Kelabu cerah | #C0C0C0 | |
| teal | Biru Hijau | #008080 | |
| putih | putih | #FFFFFF | |
| kuning | Kuning | #FFFF00 |
Tidak kira sama ada anda menentukan warna dengan namanya atau menggunakan nombor perenambelasan. Kaedah ini adalah sama dalam kesannya. Contoh 6.1 menunjukkan cara untuk menetapkan latar belakang dan warna teks halaman web.
Contoh 6.1. Warna latar belakang dan teks
Contoh teks
Dalam contoh ini, warna latar belakang ditetapkan menggunakan atribut bgcolor tag
, dan warna teks melalui atribut teks. Untuk kepelbagaian, atribut teks ditetapkan kepada nombor perenambelasan dan atribut bgcolor ditetapkan kepada kata kunci terpelihara teal .Dalam HTML, warna boleh ditentukan dalam tiga cara:
Menetapkan warna dalam HTML dengan namanya
Sesetengah warna boleh ditentukan dengan 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 lebih 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.
