Warna dalam bahasa CSS boleh ditetapkan cara yang berbeza:
- dengan nama,
- Oleh nilai heksadesimal,
- dalam format RGB dan RGBA,
- dalam format HSL dan HSLA.
Tetapkan warna mengikut nama
Penyemak imbas menyokong penetapan beberapa warna untuk unsur mengikut nama. Jadual ini mengandungi beberapa kata kunci (nama warna Inggeris) yang digunakan untuk menentukan sifat warna, kod RGB, kod perenambelasan (HEX) dan kod HSL.
Nama | Warna | RGB | HEX | HSL | Penerangan |
---|---|---|---|---|---|
putih | rgb(255, 255, 255) | #ffffff atau #fff | hsl(0, 0%, 100%) | putih | |
perak | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | kelabu | |
kelabu | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Kelabu gelap | |
hitam | rgb(0, 0, 0) | #000000 atau #000 | hsl(0, 0%, 0%) | Hitam | |
merah marun | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Merah gelap | |
merah | rgb(255, 0, 0) | #ff0000 atau #f00 | hsl(0, 100%, 50%) | merah | |
oren | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Jingga | |
kuning | rgb(255, 255, 0) | #ffff00 atau #ff0 | hsl(60, 100%, 50%) | Kuning | |
buah zaitun | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Zaitun | |
kapur | rgb(0, 255, 0) | #00ff00 atau #0f0 | hsl(120, 100%, 50%) | Lampu hijau | |
hijau | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | hijau | |
aqua | rgb(0, 255, 255) | #00ffff atau #0ff | hsl(180, 100%, 50%) | Biru | |
biru | rgb(0, 0, 255) | #0000ff atau #00f | hsl(240, 100%, 50%) | Biru | |
tentera laut | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Biru gelap | |
teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Biru Hijau | |
fuchsia | rgb(255, 0, 255) | #ff00ff atau #f0f | hsl(300, 100%, 50%) | Merah jambu | |
ungu | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Violet |
Ini adalah contoh penggunaan nama warna, nama warna diambil dari jadual lanjutan.
Begini cara kod ini berfungsi:
Menetapkan warna menggunakan RGB
RGB ialah model warna tambahan. hidup Bahasa Inggeris tambahan- tambahan. RGB ialah singkatan daripada perkataan Inggeris: Red, Green, Blue - red, green, blue). Daripada ini jelas bahawa dalam model Warna RGB disintesis oleh menambah tiga warna (merah, hijau, biru) dalam pelbagai kuantiti.
Mencampurkan merah, hijau dan warna biru anda boleh mendapatkan beberapa juta warna. Semua kombinasi yang mungkin disimpan dalam memori komputer.
Sampai ke intinya.
Untuk menetapkan sifat dalam format ini, gunakan tatatanda rgb(r, g, b) , dengan r, g, b ialah tiga saluran untuk setiap warna (merah, hijau, biru). Nilai untuk setiap saluran ditetapkan dalam julat dari 0 hingga 255.
Contoh kod.
Untuk menjelaskan semuanya, berikut ialah contoh kod:
Beginilah cara contoh ini berfungsi:
![](https://i0.wp.com/komotoz.ru/uroki/css/images/edinicy_izmereniya_v_css_1.jpg)
Penerangan contohnya.
Pada permulaan halaman kami mencipta kelas div.rgb, ia diperlukan untuk blok yang dibuat oleh teg
Seterusnya, dalam kod yang kami tetapkan warna latar belakang blok
Cuba edit contoh ini dan nyatakan nilai anda sendiri, contohnya rgb(100, 100, 100) .
Menetapkan warna menggunakan RGBA
Muncul dalam CSS3 alat baru untuk bekerja dengan warna - format RGBA. Ia boleh dipanggil evolusi model RGB, tetapi dengan penambahan satu saluran baru - saluran A atau alfa. Saluran ini menetapkan ketelusan warna. Nilainya ditetapkan dalam julat dari 0 hingga 1. Nilai 0 sepadan dengan ketelusan penuh, 1 - kelegapan penuh (warna akan sama seperti yang dinyatakan dalam tiga pertama saluran RGB), dan nilai perantaraan seperti 0.4 atau 0.6 - lut sinar kepada darjah yang berbeza-beza.
Contoh kod.
Begini cara ia berfungsi:
Kod ini dengan cara tersendiri perwakilan visual adalah serupa dengan yang berikut, menggunakan model RGB untuk menetapkan nilai warna:
Inilah hasil beliau:
Nilai saluran alfa yang sama dengan sifar menjadikan sebarang warna tidak kelihatan - benar-benar telus; nilai yang sama dengan satu menterjemahkan warna dalam kod RGB tanpa perubahan. Sifat rgba(255,0,0,1.0) menunjukkan warna merah rgb(255, 0, 0) .
Mengikut nilai perenambelasan (kod HEX)
Dalam kehidupan seharian, kita menggunakan sistem pengiraan perpuluhan. Asal-usulnya sangat mudah - kita mempunyai sepuluh jari di tangan kita, dan mengira dengan jari telah memudahkan kehidupan. Jika sistem perpuluhan mempunyai sepuluh digit: dari 0 hingga 9, dan nombor 10 adalah digit seterusnya, maka sistem nombor heksadesimal mempunyai 16 digit, dan digit seterusnya ialah nombor 16.
Untuk menentukan kod warna sebagai digit heksadesimal, gunakan yang biasa digit perpuluhan dari 0 hingga 9 dan untuk menetapkan nombor dari 10 hingga 15 menggunakan huruf Latin dari A hingga F, iaitu (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D , E, F). Untuk kejelasan, mari letakkan ini dalam jadual:
Untuk menulis nombor heksadesimal lebih besar daripada F (15 dalam sistem perpuluhan), seperti dalam sistem perpuluhan, mereka juga menggunakan gabungan dua digit, tetapi sudah perenambelasan, yang jelas. Ya, untuk rekod nombor perpuluhan 255 V sistem heksadesimal Notasi FF digunakan.
Sistem perenambelasan lebih mudah difahami oleh komputer, dan ia memproses nilai yang ditetapkan oleh nilai perenambelasan dengan lebih cepat.
Untuk menentukan warna dalam perenambelasan, sebelum nilai berangka anda perlu meletakkan tanda “#”, contoh: #FFC0CB. Nilai #FFC0CB itu sendiri terdiri daripada tiga digit heksadesimal FF, C0 dan CB. Maksud entri ini adalah sama dengan menetapkan warna Format RGB(rgb(r, g, b)) - setiap digit heksadesimal dalam kod HEX menunjukkan ketepuan warna dalam saluran model RGBnya.
Kod ini akan memaparkan elemen berikut:
Dan inilah gambar dengan hasil dari bahagian "Menetapkan warna dengan menggunakan RGB"pada halaman ini di atas.
![](https://i0.wp.com/komotoz.ru/uroki/css/images/edinicy_izmereniya_v_css_1.jpg)
Kami melihat bahawa warna adalah sama.
Notasi yang dipendekkan bagi kod warna HEX dibenarkan: nombor 6 digit boleh ditulis sebagai nombor 3 digit. Ini hanya sah apabila dua digit dalam nilai warna satu saluran diulang.
Iaitu, singkatan berikut boleh diterima:
Contohnya, warna #ff22aa boleh ditulis sebagai #f2a, atau warna #44aa22 boleh ditulis sebagai #4a2.
Menetapkan Warna Menggunakan HSL
Muncul dalam CSS3 format baharu untuk menunjukkan warna.
Format HSL ialah singkatan untuk perkataan Inggeris: Hue (hue), Saturate (saturation) dan Lightness (lightness).
Hue dalam HSL ialah nilai warna pada roda warna khas (Rajah 2) dan dinyatakan dalam darjah. Jika kita membuat analogi dengan model RGB, maka 0° sepadan dengan merah, 120° sepadan dengan hijau, dan 240° sepadan dengan biru.
Nilai rona akan berubah daripada 0 kepada 359.
![](https://i2.wp.com/komotoz.ru/uroki/css/images/hsl-colors.png)
Nilai kedua - ketepuan (Saturate) ditetapkan sebagai peratusan. Pada ketepuan 100%, warna adalah "berair" yang mungkin; apabila penunjuk tepu bergerak ke arah 0%, warna menjadi lebih kusam dan menjadi kelabu.
Nilai ketiga, Lightness, juga ditetapkan sebagai peratusan. Semakin tinggi peratusan, semakin cerah warnanya. Nilai ekstrem 0% dan 100% masing-masing akan menunjukkan warna hitam (tiada cahaya) dan putih (terlalu terdedah), dan tidak kira warna dari roda warna yang dipilih dalam saluran pertama. Nilai kecerahan warna yang optimum ialah 50%.
Menetapkan Warna Menggunakan HSLA
Format HSLA berkaitan dengan HSL, sama seperti RGB kepada RGBA. Dalam format HSLA, seperti dalam RGBA, saluran alfa ditambah, yang bertanggungjawab untuk ketelusan warna.
Warna yang dinyatakan dalam format HSL lebih mudah dibaca. Kita boleh mengatakan bahawa ia adalah intuitif. Sebagai contoh, kod hsl(120,60%,50%) boleh mewakili warna akhir jika terdapat gambar roda warna HSL dalam ingatan. Perkara yang sama tidak boleh dikatakan tentang format RGB dan HEX; kod warna yang dinyatakan dalam format ini menjadi jelas hanya selepas ia divisualisasikan pada monitor.
Format baharu dalam CSS3 (HSL, HSLA dan RGBA) berfungsi dalam penyemak imbas bermula daripada versi: IE 9.0, Opera 10.0 Firefox 3.0. Bagaimanakah saya boleh membuat gaya berfungsi pada pelayar lama?
Somebloсk (warna latar belakang: rgb(255,50,50); warna latar belakang: rgba(255,50,50,0.85) )
Apabila menggunakan kod ini dalam pelayar lama, warna latar belakang untuk kelas .somebloсk, walaupun ia tidak akan menggunakan saluran alfa, akan dipaparkan dalam format RGB.
Lihat dengan teliti lukisan itu. Latar belakang tetingkap drop-down dibuat lut sinar. Ini adalah teknik reka bentuk yang agak biasa. Mari kita fikirkan bagaimana ini boleh dilaksanakan.
Tugasan
Jadikan warna silang pelayar lut sinar.
Penyelesaian
Pemikiran pertama dalam situasi ini ialah menggunakan imej png24 dengan lut sinar pratetap untuk latar belakang. Tetapi gambar ini sama sekali tidak diperlukan. Anda boleh melakukannya dengan baik tanpanya (dan oleh itu tanpa permintaan tambahan kepada pelayan). Mari kita cuba mencari penyelesaian yang optimum.
Pemikiran kedua ialah menggunakan . Tetapi dalam dalam kes ini ini tidak begitu mudah. Lagipun, bukan sahaja latar belakang, tetapi juga prasasti akan menjadi lut sinar. Ya, sebenarnya, keseluruhan tingkap sekali gus.
Sudah tentu, anda boleh cuba menambah bekas tambahan dan menggunakan kelegapan hanya padanya, tetapi elemen HTML ini hanya bertujuan untuk hiasan dan jelas akan berlebihan. Adakah mungkin dilakukan tanpanya?
Sudah tentu anda boleh! Jika anda menggunakan RGBA.
Format penerangan warna RGBA
CSS3 membolehkan anda menentukan warna menggunakan fungsi RGB dan RGBA. Dalam kes ini, kita mesti menunjukkan perkadaran setiap komponen warna yang mana satu bait diperuntukkan (dari 0 hingga 255, sekiranya sesiapa tidak tahu).
Sintaks untuk kes ini sangat mudah:
Latar belakang: rgb(0, 255, 0); /* hijau tulen */
Untuk RGBA, parameter keempat ditambah - ketelusan alfa (dari 0 hingga 1).
Latar belakang: rgba(255, 0, 0, 0.5); /* merah tulen dengan ketelusan 50% */
Ini dia, penyelesaian kepada masalah kita. Hanya tetapkan warna latar belakang dengan menggunakan rgba dan semuanya akan kelihatan seperti yang kita perlukan. Tanpa gambar tambahan dan elemen!
Di mana saya boleh mendapatkan nombor ini?
Anda boleh melihat komponen warna menggunakan alat penitis mata Photoshop.
Mengenai keserasian merentas pelayar
Memandangkan fungsi RGB jauh lebih tua daripada RGBA dan telah wujud sejak zaman standard CSS2, untuk melindungi daripada penyemak imbas paling kuno, anda boleh menggunakan binaan pendua berikut:
SomeBlock ( latar belakang: rgb(255, 0, 0); latar belakang: rgba(255, 0, 0, 0.5); )
Dengan pendekatan ini, moyang pelayar moden tidak akan ada lutsinar, tetapi warna itu sendiri akan kekal betul.
Anda perlu menjaga IE secara berasingan. Keldai tidak memahami RGBA sehingga versi 8 termasuk.
Seperti biasa: tanah untuk petani, kilang untuk pekerja, dan keldai sebagai tongkat! Sebagai .
Sudah tentu, dalam keadaan pertempuran kami menggunakan peraturan ini CSS berasingan yang kita sambungkan.
SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zum: 1; )
Caranya ialah dengan menentukan warna permulaan dan akhir sebagai sama (ff0000 - merah) dan mengambil kesempatan daripada fakta bahawa anda boleh menetapkan saluran alfa untuk kecerunan dalam penapis ini (dalam contoh, nilainya ialah 80).
Untuk rujukan: penapis menggunakan sistem perenambelasan dan kod untuk warna legap sepenuhnya ialah FF (dalam perpuluhan ini ialah 255). Sehubungan itu, heksadesimal 80 ialah perpuluhan 128, iaitu 50% ketelusan.
Diuji dalam:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Chrome
Nombor digunakan untuk menetapkan warna kod perenambelasan. 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 diganti 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 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 RGB ditambahkan pada harta latar belakang-warna disahkan, tetapi latar belakang yang ditambahkan pada harta itu 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 terbentuk daripada gabungan huruf pertama Hue (hue), Saturate (saturation) 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% nilai maksimum 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 warna HTML ditentukan dalam salah satu daripada dua cara: menggunakan kod perenambelasan dan dengan nama beberapa warna. 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. Bagaimana bilangan yang lebih besar, mereka warna lebih terang, nilai berubah daripada #000000 (hitam) kepada #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. Keadaannya sama dengan 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. Sesuai untuk tujuan ini penyunting grafik boleh bekerja dengan berbeza model warna, Sebagai contoh, Adobe Photoshop. 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 program Photoshop
Warna web
Jika anda menetapkan kualiti pemaparan warna monitor kepada 8 bit (256 warna), maka warna yang sama boleh dipaparkan dalam pelayar yang berbeza dengan cara saya sendiri. 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. DALAM 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 dalam contoh ini Warna latar belakang ditetapkan menggunakan atribut bgcolor tag
, dan warna teks melalui atribut teks. Untuk variasi, nilai atribut teks ditetapkan kepada: nombor heksadesimal, dan bgcolor menggunakan reserved kata kunci teal.