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

Dalam spesifikasi WC3 lama, hanya 16 kata kunci yang digunakan untuk mengatur warna dalam HTML dan CSS. Kemudian, spesifikasi yang lebih modern, 130 kata kunci lainnya ditambahkan untuk menunjukkan nama warna. Tabel berikut berisi nama warna, kode heksadesimal dan RGB yang sesuai dengannya.

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 ada lebih sedikit warna di dalamnya. Ini karena beberapa kata kunci mengacu pada warna yang sama. Jadi nama Gray , dan Gray mewakili 50 persen abu-abu dengan kode #808080 , sedangkan kata Magenta adalah sinonim HTML untuk warna Fuchsia, sesuai dengan kode hex #FF00FF . Kata Aqua dan Cyan juga sinonim, mereka sesuai dengan kode #00FFFF .

Bilangan heksadesimal digunakan untuk menentukan warna. Sistem heksadesimal, tidak seperti sistem desimal, didasarkan, seperti namanya, pada angka 16. Angka-angkanya adalah sebagai berikut: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Angka dari 10 hingga 15 diganti dengan huruf Latin. Bilangan yang lebih besar dari 15 dalam sistem heksadesimal dibentuk dengan menggabungkan dua bilangan menjadi satu. Misalnya, angka 255 dalam desimal sesuai dengan angka FF dalam heksadesimal. Untuk menghindari kebingungan dalam definisi sistem bilangan, bilangan heksadesimal didahului dengan simbol hash #, misalnya #666999. Masing-masing dari tiga warna - merah, hijau dan biru - dapat mengambil nilai dari 00 hingga FF. Dengan demikian, penunjukan warna dibagi menjadi tiga komponen #rrggbb, di mana dua karakter pertama menandai komponen warna merah, dua di tengah menandai hijau, dan dua terakhir menandai biru. Diperbolehkan menggunakan bentuk singkatan #rgb, di mana setiap karakter harus digandakan. Jadi, entri #fe0 harus dianggap sebagai #ffee00.

dengan nama

Browser mendukung beberapa warna berdasarkan nama. Di meja. 1 menunjukkan nama, kode hex, nilai dalam RGB, format dan deskripsi HSL.

Dengan RGB

Anda dapat menentukan warna menggunakan nilai merah, hijau, dan biru dalam bentuk desimal. Masing-masing dari tiga komponen warna mengambil nilai dari 0 hingga 255. Menyetel warna sebagai persentase juga dapat diterima, sedangkan 100% akan sesuai dengan angka 255. Pertama, kata kunci rgb ditentukan, lalu komponen warna ditentukan dalam tanda kurung, dipisahkan dengan koma, misalnya rgb(255 , 128, 128) atau rgb(100%, 50%, 50%).

RGBA

Format RGBA mirip dengan sintaks RGB, tetapi menyertakan saluran alfa yang mengatur transparansi elemen. Nilai 0 sepenuhnya transparan, 1 buram, dan nilai menengah seperti 0,5 tembus cahaya.

RGBA ditambahkan ke CSS3, jadi validasi kode CSS harus dilakukan sesuai dengan versi ini. Perlu dicatat bahwa standar CSS3 masih dalam pengembangan dan beberapa fiturnya mungkin berubah. Misalnya, warna RGB yang ditambahkan ke properti background-color lolos validasi, tetapi yang ditambahkan ke properti background tidak. Pada saat yang sama, browser cukup memahami warna untuk kedua properti dengan benar.

HSL

Nama format HSL dibentuk dari kombinasi huruf pertama Hue (hue), Saturate (saturasi) dan Lightness (ringan). Hue adalah nilai warna pada roda warna (Gbr. 1) dan ditentukan dalam derajat. 0° berwarna merah, 120° berwarna hijau, dan 240° berwarna biru. Nilai rona dapat bervariasi dari 0 hingga 359.

Beras. 1. Roda warna

Saturasi adalah intensitas warna, diukur sebagai persentase dari 0% hingga 100%. Nilai 0% menunjukkan tidak ada warna dan bayangan abu-abu, 100% adalah nilai saturasi maksimum.

Lightness mengatur seberapa terang warnanya dan ditentukan sebagai persentase dari 0% hingga 100%. Nilai kecil membuat warna lebih gelap, sedangkan nilai tinggi membuatnya lebih terang, nilai ekstrim 0% dan 100% sesuai dengan hitam dan putih.

HSLA

Format HSLA mirip dengan sintaks HSL, tetapi menyertakan saluran alfa yang mengatur transparansi elemen. Nilai 0 sepenuhnya transparan, 1 buram, dan nilai menengah seperti 0,5 tembus cahaya.

Nilai warna dalam format RGBA, HSL, dan HSLA ditambahkan ke CSS3, jadi saat menggunakan format ini, periksa validitas kode terhadap versi.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Peringatan

Semua metode penangkapan singa yang tercantum di situs adalah teori dan berdasarkan metode komputasi. Penulis tidak menjamin keamanan Anda saat menggunakannya dan melepaskan tanggung jawab apa pun atas hasilnya. Ingat, singa adalah predator dan hewan yang berbahaya!

Hasil dari contoh ini ditunjukkan pada Gambar. 2.

Beras. 2. Warna pada halaman web

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

properti warna

1. Warna prioritas: properti warna

Properti menetapkan warna font menggunakan berbagai sistem rendering. Properti menjelaskan warna konten teks elemen. Ini juga digunakan untuk memberikan nilai tidak langsung potensial (currentColor) untuk properti lain yang menerima nilai warna.

Harta itu diwariskan.

2. Nilai warna

2.1. Kata kunci utama

Daftar kata kunci utama mencakup nilai-nilai berikut:

Nama warna tidak peka huruf besar/kecil.

Sintaksis

warna: merah muda;

2.2. Nilai Warna Numerik

2.2.1. Warna Model RGB

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

Format nilai RGB dalam notasi fungsional adalah rgb( diikuti oleh daftar tiga nilai numerik yang dipisahkan koma (baik tiga nilai integer atau tiga nilai persentase) diikuti oleh karakter). Nilai integer 255 sesuai 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.

Ada beberapa cara untuk merepresentasikan warna dalam desain web.

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

Dua representasi warna lain dalam desain web adalah: dalam bentuk RGB(*,*,*), di mana setiap bagian "*" dari 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 merender warna dengan benar, browser akan mencocokkan 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 nuansa

meja Abu-abu warna dan nuansa

Tabel (palet) warna html memberi Anda kesempatan untuk secara mandiri memilih nada yang Anda butuhkan. Nilai warna ditampilkan dalam tiga format: Hex, RGB, dan HSV.

• Hex terdiri dari tiga nilai dua karakter dalam notasi heksadesimal. Contoh: #ff00b3, di mana pasangan angka pertama berwarna merah, yang kedua berwarna hijau, dan yang ketiga berwarna biru.
• RGB (RedGreenBlue) memiliki bentuk "200.100.255" yang menunjukkan jumlah nada yang sesuai (merah, hijau, biru) dalam warna yang dihasilkan.
• HSV (Hue, Saturation, Value - tone, saturation, value) - model warna di mana koordinatnya adalah:
  • Hue - nada warna, dapat bervariasi dari 0 ° hingga 360 °.
  • Saturation – saturasi, bervariasi antara 0-100 atau 0-1. Semakin besar pengaturan ini, semakin "murni" warnanya, itulah sebabnya pengaturan ini terkadang disebut sebagai kemurnian warna. Dan semakin dekat parameter ini ke nol, semakin dekat warnanya ke abu-abu netral.
  • Nilai (nilai warna) - mengatur kecerahan, nilainya juga dapat bervariasi antara 0-100 atau 0-1.

Masukkan kode warna: PERGILAH

Daftar warna dengan nama

Tabel mencantumkan nama warna bahasa Inggris (yang dapat digunakan sebagai nilai) yang didukung oleh semua browser dan nilai heksadesimalnya. Semua warna yang tercantum adalah "aman", artinya warna tersebut akan ditampilkan sama di semua browser.