RGB putih. Warna dalam gaya boleh ditentukan dengan cara yang berbeza: mengikut nilai perenambelasan, mengikut nama, dalam format RGB, RGBA, HSL, HSLA

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.

Jadual 1. Nama warna, kod RGB, HEX dan HSLnya.
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.

RGB dalam CSS

Turquoise Sederhana
coklat
lembayung
biru ungu
rolivedrab


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:

RGB dalam CSS

rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)


Beginilah cara contoh ini berfungsi:

Rajah 1. Warna dalam RGB.

Penerangan contohnya.

Pada permulaan halaman kami mencipta kelas div.rgb, ia diperlukan untuk blok yang dibuat oleh teg

telah dipaparkan saiz yang betul: 240px kali 40px. Kami memperuntukkan sifat ketinggian garisan nilai 40px, iaitu sama dengan ketinggian blok, ini akan membenarkan teks dipaparkan dalam blok
di pusat menegak. Kami memusatkan teks secara mendatar menggunakan peraturan ( text-align : tengah ;).

Seterusnya, dalam kod yang kami tetapkan warna latar belakang blok

menggunakan atribut gaya, menggunakan sifat latar belakang, dan memberikan nilai kepada rgb(255, 0, 0) , rgb(0, 255, 0) , dan rgb(0, 0, 255) . Iaitu, kita secara bergilir-gilir membuat satu saluran tepu yang mungkin, dan saluran yang selebihnya tidak digunakan untuk sintesis, kerana nilainya adalah sifar.

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.

RGBA dalam CSS3



Begini cara ia berfungsi:

Kod ini dengan cara tersendiri perwakilan visual adalah serupa dengan yang berikut, menggunakan model RGB untuk menetapkan nilai warna:

RGBA dalam CSS3



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 HEX dalam CSS

#FF0000
#00FF00
#0000FF


Kod ini akan memaparkan elemen berikut:

Dan inilah gambar dengan hasil dari bahagian "Menetapkan warna dengan menggunakan RGB"pada halaman ini di atas.

Rajah 1. Warna dalam RGB.

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.


Rajah 2. Bulatan warna HSL.

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.

Jadual 1. Nama warna
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

Warna

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!

Arrrgh!


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.

Jadual 6.3. Nama beberapa warna
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

Warna

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.