Modul warna CSS merinci nilai yang memungkinkan penulis menentukan warna dan opacity elemen html, serta nilai properti warna.

properti warna

1. Warna prioritas: properti warna

Properti menentukan warna font menggunakan berbagai sistem rendering warna. Properti ini menjelaskan warna konten teks elemen. Selain itu, ini digunakan untuk memberikan potensi nilai tidak langsung (currentColor) untuk properti lain yang mengambil nilai warna.

Properti itu diwariskan.

2. Nilai warna

2.1. Kata Kunci Utama

Daftar kata kunci utama mencakup arti sebagai berikut:

Nama warna tidak peka huruf besar-kecil.

Sintaksis

Warna: biru kehijauan;

2.2. Nilai warna numerik

2.2.1. Warna model RGB

Format heksadesimal nilai RGB adalah tanda # yang diikuti langsung oleh tiga atau enam karakter heksadesimal. Notasi RGB tiga digit #rgb diubah menjadi bentuk enam digit #rrggbb dengan menyalin digitnya, bukan menambahkan angka nol. Misalnya, #fb0 diperluas menjadi #ffbb00 . Hal ini memastikan bahwa #ffffff putih dapat ditentukan dalam entri #fff pendek, dan menghilangkan ketergantungan pada kedalaman warna tampilan.

Format nilai RGB dalam notasi fungsional adalah rgb(, diikuti dengan daftar tiga nilai numerik yang dipisahkan koma (tiga nilai bilangan bulat atau tiga nilai persentase), diikuti dengan simbol). Nilai integer 255 setara dengan 100% dan F atau FF dalam notasi heksadesimal:

Rgb(255.255.255) = rgb(100%, 100%, 100%) = #FFF

Karakter spasi diperbolehkan di sekitar nilai numerik.

Warna HTML ditunjukkan dengan enam karakter setelah karakter garis miring - misalnya, #000000. Keenam simbol ini mewakili proporsi warna berbeda (Merah, Hijau, Biru) pada warna akhir. Di monitor komputer Anda, gambar terbentuk dari sejumlah besar titik yang disebut piksel. Setiap piksel adalah sumber cahaya kecil, sebut saja "senter", yang terdiri dari tiga senter - merah, hijau, dan biru. Dengan mengurangi atau meningkatkan intensitas cahaya senter berwarna, kita mendapatkan warna yang diinginkan.

Kode warna HTML

Warna dalam HTML diwakili oleh notasi heksadesimal (HEX) merah, biru, dan hijau (RGB).

Nilai warna terkecil adalah 0 (heksadesimal 00). Nilai warna tertinggi adalah 255 (hex FF).

Nilai warna heksadesimal adalah tiga digit yang dimulai dengan tanda #.

Kode warna (arti)

16 juta warna

Menggabungkan warna merah, biru, dan hijau dengan nilai berkisar antara 0 hingga 255 untuk persentase setiap warna menghasilkan total lebih dari 16 juta corak (256 x 256 x 256).

Kebanyakan monitor modern mampu menampilkan setidaknya 16.384 warna berbeda (monitor LCD umumnya mampu menampilkan 262 ribu 16 juta warna). (diperbarui Oktober 2013) warna, dan monitor CRT dapat menampilkan jumlah warna yang hampir tidak terbatas).

Tabel warna di bawah ini menunjukkan perubahan proporsi warna merah dari 0 menjadi 255 dengan nilai nol untuk biru dan hijau:

Nuansa Abu-abu

Untuk mendapatkan corak abu-abu, digunakan bagian yang sama dari semua warna. Untuk memudahkan Anda memilih warna yang tepat, kami menyediakan kode warna abu-abu

Nama warna html lintas browser (semua browser).

Kumpulan 150 nama warna dalam html, didukung di semua browser.

Nama warna standar

W3C mencantumkan 16 nama warna yang valid untuk HTML dan CSS: aqua, hitam, biru, fuchsia, abu-abu, hijau, kapur, merah marun (chestnut), angkatan laut (ultramarine), zaitun (zaitun), ungu (ungu), merah (merah) , perak (silver), teal (abu-abu), putih (putih) dan kuning (kuning).

Jika menggunakan warna yang tidak termasuk dalam daftar ini, lebih tepat menggunakan kode heksadesimal (HEX) atau kode RGB.

Warna yang aman

Beberapa tahun yang lalu, ketika komputer dapat mendukung maksimal 256 warna berbeda, daftar 216 "Warna Aman Web" diusulkan, dengan 40 warna dicadangkan untuk sistem.

Palet 216 warna ini dibuat untuk menampilkan warna dengan benar dalam mode palet 256 warna.

Sekarang hal ini tidak menjadi masalah karena sebagian besar komputer di seluruh dunia mendukung jutaan corak warna. Bagaimanapun, berikut adalah daftar warna-warna ini:

Ada beberapa cara untuk merepresentasikan warna dalam desain web.

HEX adalah sistem representasi warna heksadesimal berdasarkan basis 16. Untuk sistem ini, angka desimal Arab dari 0 hingga 9 dan huruf Latin dari A hingga F digunakan untuk melengkapi angka digital ke 16. Untuk desain web, 16 warna primer (kunci) digunakan, yang disebut kode warna heksadesimal #RRGGBB, di mana setiap pasangan bertanggung jawab atas pembagian warnanya: RR – merah, GG – hijau dan BB – biru. Setiap fraksi warna berkisar dari 00 hingga FF.

Dua representasi warna lainnya dalam desain web adalah: dalam bentuk RGB(*,*,*), di mana setiap pecahan “*” suatu warna diwakili oleh angka desimal dari 0 hingga 255 dan dengan nama warna dalam bahasa Inggris.

Saat membuat gambar berwarna, masalah utamanya adalah reproduksi warna yang benar pada berbagai jenis komputer, monitor, dan browser. Jika browser tidak dapat menampilkan warna dengan benar, browser akan memilih warna serupa atau mencampur beberapa warna. Dan terkadang bisa diganti dengan warna yang sama sekali berbeda.

Meja 16 warna primer, yang digunakan di semua browser

Meja ungu warna dan coraknya

Meja abu-abu warna dan coraknya

Halaman ini berisi tabel dengan kata kunci yang dapat digunakan untuk menunjukkan warna dalam bahasa pengembang Web seperti: HTML, CSS, JavaScript, Flash, dll.

Dalam spesifikasi lama untuk perhatian WC3, hanya 16 kata kunci yang ditentukan, dengan bantuan warna yang diatur dalam HTML dan CSS. Lebih jauh lagi, spesifikasi yang lebih modern, 130 kata kunci lainnya ditambahkan untuk menunjukkan nama warna. Tabel berikut berisi nama warna serta kode hex dan RGB yang sesuai.

Menurut aturan CSS, nama warna tidak peka huruf besar-kecil. Entri warna IndianRed dan Indianred setara.

Perlu juga dicatat bahwa dari 146 kata kunci dalam tabel, sebenarnya warna di dalamnya lebih sedikit. Ini karena beberapa kata kunci merujuk pada warna yang sama. Jadi, nama Gray dan Gray mewakili 50% kode warna abu-abu #808080, dan kata Magenta adalah sinonim untuk warna HTML Fuchsia, sesuai dengan kode heksadesimal #FF00FF. Kata Aqua dan Cyan juga sinonim, sesuai dengan kode #00FFFF.

Perhatikan baik-baik gambarnya. Latar belakang jendela drop-down dibuat tembus cahaya. Ini adalah teknik desain yang cukup umum. Mari kita pikirkan bagaimana hal ini dapat diterapkan.

Tugas

Jadikan warna lintas-browser tembus cahaya.

Larutan

Pemikiran pertama dalam situasi ini adalah menggunakan gambar png24 dengan transparansi yang telah ditetapkan sebelumnya sebagai latar belakang. Tapi gambar ini sama sekali tidak diperlukan. Anda dapat melakukannya dengan baik tanpanya (dan karenanya tanpa permintaan tambahan ke server). Mari kita tetap berusaha mencari solusi optimal.

Pikiran kedua adalah menggunakan . Tapi dalam hal ini sangat tidak nyaman. Lagi pula, tidak hanya latar belakangnya, tetapi juga prasastinya akan menjadi tembus cahaya. Ya, sebenarnya, seluruh jendela sekaligus.

Tentu saja, Anda dapat mencoba menambahkan wadah tambahan dan menerapkan opacity hanya pada wadah tersebut, tetapi elemen HTML ini hanya dimaksudkan untuk hiasan dan jelas akan mubazir. Apakah mungkin melakukannya tanpanya?

Tentu saja bisa! Jika Anda menggunakan RGBA.

Format deskripsi warna RGBA

CSS3 memungkinkan Anda menentukan warna menggunakan fungsi RGB dan RGBA. Dalam hal ini, kita harus menunjukkan proporsi setiap komponen warna yang dialokasikan satu byte (dari 0 hingga 255, kalau-kalau ada yang tidak tahu).

Sintaks untuk kasus ini sangat sederhana:

Latar Belakang: rgb(0, 255, 0); /* hijau murni */

Untuk RGBA, parameter keempat ditambahkan - transparansi alfa (dari 0 hingga 1).

Latar Belakang: rgba(255, 0, 0, 0.5); /* merah murni dengan transparansi 50% */

Ini dia, solusi untuk masalah kita. Cukup atur warna background menggunakan rgba dan semuanya akan terlihat sesuai keinginan kita. Tanpa gambar dan elemen yang tidak perlu!

Dimana saya bisa mendapatkan nomor-nomor ini?

Anda dapat melihat komponen warna menggunakan alat pipet Photoshop.

Tentang kompatibilitas lintas browser

Karena fungsi RGB jauh lebih tua daripada RGBA dan telah ada sejak standar CSS2, untuk melindungi dari browser paling kuno, Anda dapat menggunakan konstruksi duplikat berikut:

SomeBlock ( latar belakang: rgb(255, 0, 0); latar belakang: rgba(255, 0, 0, 0.5); )

Dengan pendekatan ini, nenek moyang browser modern tidak akan memiliki transparansi, tetapi warnanya sendiri akan tetap benar.

Anda harus mengurus IE secara terpisah. Keledai tidak memahami RGBA hingga versi 8 inklusif.

Seperti biasa: tanah untuk petani, pabrik untuk buruh, dan keledai adalah tongkat penyangga! Dalam bentuk.

Tentu saja, dalam kondisi pertempuran kami menempatkan aturan ini ke dalam CSS terpisah, yang kami sambungkan.

SomeBlock ( latar belakang:transparan; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

Caranya adalah dengan menentukan warna awal dan akhir yang sama (ff0000 - merah) dan memanfaatkan fakta bahwa Anda dapat mengatur saluran alfa untuk gradien di filter ini (dalam contoh, nilainya adalah 80).

Sebagai referensi: filter menggunakan sistem heksadesimal dan kode untuk warna buram penuh adalah FF (dalam desimal adalah 255). Oleh karena itu, heksadesimal 80 adalah desimal 128, yaitu transparansi 50%.

Diuji di:

• yaitu 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• krom