HEX/HTML
Warna HEX hanyalah perwakilan heksadesimal bagi RGB.
Warna diwakili sebagai tiga kumpulan digit heksadesimal, di mana setiap kumpulan bertanggungjawab untuk warnanya sendiri: #112233, dengan 11 merah, 22 hijau, 33 biru. Semua nilai mestilah antara 00 dan FF.
Banyak aplikasi membenarkan bentuk notasi warna heksadesimal yang dipendekkan. Jika setiap tiga kumpulan mengandungi aksara yang sama, contohnya #112233, maka mereka boleh ditulis sebagai #123.
- h1 ( warna: #ff0000; ) /* merah */
- h2 ( warna: #00ff00; ) /* hijau */
- h3 ( warna: #0000ff; ) /* biru */
- h4 ( warna: #00f; ) /* biru sama, trengkas */
RGB
Ruang warna RGB (Merah, Hijau, Biru) terdiri daripada semua kemungkinan warna yang boleh dibuat dengan mencampurkan merah, hijau dan biru. Model ini popular dalam fotografi, televisyen dan grafik komputer.
Nilai RGB ditentukan sebagai integer dari 0 hingga 255. Contohnya, rgb(0,0,255) dipaparkan sebagai biru kerana parameter biru ditetapkan kepada nilai tertingginya (255) dan yang lain ditetapkan kepada 0.
Sesetengah aplikasi (terutamanya pelayar web) menyokong peratusan rakaman nilai RGB (dari 0% hingga 100%).
- h1 ( warna: rgb(255, 0, 0); ) /* merah */
- h2 ( warna: rgb(0, 255, 0); ) /* hijau */
- h3 ( warna: rgb(0, 0, 255); ) /* biru */
- h4 ( warna: rgb(0%, 0%, 100%); ) /* biru sama, peratusan kemasukan */
Nilai warna RGB disokong dalam semua pelayar utama.
RGBA
Baru-baru ini, pelayar moden telah belajar untuk bekerja dengan warna model RGB A ialah sambungan RGB dengan sokongan untuk saluran alfa, yang menentukan kelegapan objek.
Nilai warna RGBA ditentukan sebagai: rgba(merah, hijau, biru, alfa). Parameter alfa ialah nombor antara 0.0 (lutsinar sepenuhnya) hingga 1.0 (legap sepenuhnya).
- h1 ( warna: rgb(0, 0, 255); ) /* biru dalam RGB biasa */
- h2 ( warna: rgba(0, 0, 255, 1); ) /* biru yang sama dalam RGBA, kerana kelegapan: 100% */
- h3 ( warna: rgba(0, 0, 255, 0.5); ) /* kelegapan: 50% */
- h4 ( warna: rgba(0, 0, 255, .155); ) /* kelegapan: 15.5% */
- h5 ( warna: rgba(0, 0, 255, 0); ) /* telus sepenuhnya */
RGBA disokong dalam IE9+, Firefox 3+, Chrome, Safari dan Opera 10+.
HSL
Model warna HSL ialah perwakilan model RGB dalam sistem koordinat silinder. HSL mewakili warna dalam cara yang lebih intuitif dan boleh dibaca manusia daripada RGB biasa. Model ini sering digunakan dalam aplikasi grafik, dalam palet warna, dan untuk analisis imej.
HSL bermaksud Hue (warna/rona), Ketepuan (tepu), Kecerahan/Kecerahan (kecerahan/kecerahan, tidak boleh dikelirukan dengan kecerahan).
Hue menentukan kedudukan warna pada roda warna (dari 0 hingga 360). Ketepuan ialah nilai peratusan ketepuan (dari 0% hingga 100%). Ringan ialah peratusan kecerahan (dari 0% hingga 100%).
- h1 ( warna: hsl(120, 100%, 50%); ) /* hijau */
- h2 ( warna: hsl(120, 100%, 75%); ) /* hijau muda */
- h3 ( warna: hsl(120, 100%, 25%); ) /* hijau tua */
- h4 ( warna: hsl(120, 60%, 70%); ) /* hijau pastel */
HSL disokong dalam IE9+, Firefox, Chrome, Safari dan Opera 10+.
HSLA
Sama seperti RGB/RGBA, HSL mempunyai mod HSLA yang menyokong saluran alfa untuk menunjukkan kelegapan objek.
Maknanya Warna HSLA diberikan dalam bentuk: hsla(warna, ketepuan, kecerahan, alfa). Parameter alfa ialah nombor antara 0.0 (lutsinar sepenuhnya) hingga 1.0 (legap sepenuhnya).
- h1 ( warna: hsl(120, 100%, 50%); ) /* hijau dalam HSL biasa */
- h2 ( warna: hsla(120, 100%, 50%, 1); ) /* hijau yang sama dalam HSLA, kerana kelegapan: 100% */
- h3 ( warna: hsla(120, 100%, 50%, 0.5); ) /* kelegapan: 50% */
- h4 ( warna: hsla(120, 100%, 50%, .155); ) /* kelegapan: 15.5% */
- h5 ( warna: hsla(120, 100%, 50%, 0); ) /* lutsinar sepenuhnya */
CMYK
Warna model CMYK sering dikaitkan dengan percetakan dan percetakan berwarna. CMYK (tidak seperti RGB) ialah model tolak, bermakna nilai yang lebih tinggi dikaitkan dengan warna yang lebih gelap.
Warna ditentukan oleh nisbah cyan (Cyan), magenta (Magenta), kuning (Kuning), dengan penambahan hitam (Key/blackK).
Setiap nombor yang mentakrifkan warna dalam CMYK mewakili peratusan dakwat warna itu yang membentuk kombinasi warna, atau sebaliknya, saiz titik raster yang dipaparkan pada mesin penetapan fototaip pada filem dengan warna tertentu (atau terus pada borang cetakan dalam kes CTP).
Sebagai contoh, untuk mendapatkan warna PANTONE 7526, anda akan mencampurkan 9 bahagian cyan, 83 bahagian magenta, 100 bahagian kuning dan 46 bahagian hitam. Ini boleh ditandakan seperti berikut: (9,83,100,46). Kadangkala sebutan berikut digunakan: C9M83Y100K46, atau (9%, 83%, 100%, 46%) atau (0.09/0.83/1.0/0.46).
HSB/HSV
HSB (juga dikenali sebagai HSV) adalah serupa dengan HSL, tetapi ia adalah dua model warna yang berbeza. Kedua-duanya adalah berdasarkan geometri silinder, tetapi HSB/HSV adalah berdasarkan model "hexcone", manakala HSL adalah berdasarkan model "bi-hexcone". Artis sering lebih suka menggunakan model ini, secara umum diterima bahawa peranti HSB/HSV lebih dekat dengan persepsi semula jadi warna. khususnya, model warna HSB digunakan dalam Adobe Photoshop.
HSB/HSV bermaksud Hue (warna/warna), Ketepuan (tepu), Kecerahan/Nilai (kecerahan/nilai).
Hue menentukan kedudukan warna pada roda warna (dari 0 hingga 360). Ketepuan ialah nilai peratusan ketepuan (dari 0% hingga 100%). Kecerahan ialah peratusan kecerahan (dari 0% hingga 100%).
XYZ
Model warna XYZ (CIE 1931 XYZ) ialah ruang matematik semata-mata. Tidak seperti RGB, CMYK dan model lain, dalam XYZ komponen utama adalah "khayal", bermakna anda tidak boleh mengaitkan X, Y dan Z dengan mana-mana set warna untuk dicampur. XYZ ialah model induk untuk hampir semua model warna lain yang digunakan dalam bidang teknikal.
MAKMAL
Model warna LAB (CIELAB, “CIE 1976 L*a*b*”) dikira daripada ruang CIE XYZ. Apabila membangunkan Makmal, matlamatnya adalah untuk mencipta ruang warna, perubahan warna yang akan menjadi lebih linear dari sudut persepsi manusia (berbanding XYZ), iaitu, supaya perubahan yang sama dalam nilai koordinat warna dalam kawasan yang berbeza ruang warna menghasilkan sensasi perubahan warna yang sama.
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
Fikiran 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
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 menetapkan 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 adalah jelas bahawa dalam warna model 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:
Rajah 1. Warna dalam RGB. 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 ditetapkan pada yang pertama tiga 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 dalam sistem perpuluhan sepuluh digit: dari 0 hingga 9, dan nombor 10 adalah digit seterusnya, maka sistem nombor heksadesimal mempunyai 16 digit, dan digit seterusnya akan menjadi 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 seperti menetapkan warna dalam 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.
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 melukis 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. Roda 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 pudar 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 mana dari roda warna 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 telah 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.
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 menetapkan nilai warna anda 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 adalah nilai hijau(GG), dan yang terakhir ialah 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 perenambelasan boleh diambil dari mana-mana grafik perisian, 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 |
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 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, sebelum nombor heksadesimal letakkan simbol cincang #, 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 mungkin untuk menetapkan warna sebagai peratusan, dengan 100% sepadan dengan nombor 255. Pertama, nyatakan kata kunci rgb , dan kemudian komponen warna ditunjukkan 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 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% 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 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 dalam format RGBA, HSL dan HSLA telah ditambahkan pada CSS3, jadi apabila menggunakan format ini, semak kod anda untuk kesahihan versi.
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!
Hasilnya contoh ini ditunjukkan dalam Rajah. 2.
nasi. 2. Warna pada halaman web
