Kode RGB untuk warna merah ditulis sebagai. Mengatur warna teks di CSS

Di bagian pertama buku ini, kami telah menunjukkan beberapa contoh cara mengatur warna teks di CSS. Tidak ada yang rumit di sini: Anda memerlukan properti warna dan nilai warna yang ingin Anda gunakan untuk mewarnai teks.

P ( warna: #211C18; )

Dalam contoh kita, nilai #211C18 mewakili kode warna heksadesimal. Jika Anda sudah familiar dengan sistem bilangan heksadesimal, Anda bisa melewatkan membaca paragraf berikutnya. Kami juga akan membahas lebih lanjut tentang cara lain untuk merepresentasikan warna di web - menggunakan model warna (RGB, HSL) dan kata kunci. Informasi ini akan berguna bagi pemula dan direkomendasikan untuk dibaca.

Warna heksadesimal (hex)

Sistem bilangan heksadesimal ( heksadesimal, heksa) didasarkan pada angka 16. Untuk menulis nilai heksadesimal, digunakan 16 karakter: angka Arab dari 0 hingga 9 dan huruf pertama alfabet Latin (A, B, C, D, E, F). Warna dalam format heksadesimal ditulis sebagai tiga angka dua digit dari 00 hingga FF (harus diawali dengan simbol hash #), yang sesuai dengan tiga komponen: Merah, Hijau, Biru (model warna RGB). Dengan kata lain, entri warna dapat direpresentasikan sebagai #RRGGBB, di mana pasangan karakter pertama menentukan level merah, pasangan karakter kedua menentukan level hijau, dan pasangan karakter ketiga menentukan level biru. Warna yang dihasilkan merupakan perpaduan ketiga warna tersebut.

Notasi singkat untuk warna hex

Beberapa nilai warna heksadesimal dapat ditulis dalam singkatan. Untuk melakukan ini, ubah entri seperti #RRGGBB menjadi #RGB. Hal ini dapat dilakukan jika bilangan hex berisi tiga pasang karakter yang identik.

Bentuk notasi yang disingkat cukup umum, dan untuk referensi Anda kami akan memberikan beberapa contoh singkatan. Omong-omong, nilai warna hex tidak peka huruf besar-kecil - Anda dapat menggunakan huruf besar dan kecil, semuanya tergantung keinginan dan selera Anda.

Contoh notasi singkat untuk warna hex:

Model warna RGB

Cara kedua untuk menentukan warna di CSS adalah dengan menggunakan nilai desimal RGB (Merah, Biru, Hijau). Untuk melakukan ini, Anda perlu menulis kata kunci rgb setelah properti warna, dan kemudian dalam tanda kurung dan dipisahkan dengan koma - tiga angka dalam kisaran 0 hingga 255, yang masing-masing berarti intensitas warna merah, hijau dan biru (r ,g,b). Semakin tinggi angkanya, semakin pekat warnanya. Misalnya, untuk mendapatkan warna hijau cerah, Anda perlu menulis:

P ( warna: rgb(0, 255, 0); )

Namun warna mustard kekuningan memiliki arti sebagai berikut:

Warna: rgb(94, 81, 3); /* di bawah ini warnanya sama, ditulis dalam heksadesimal: */ warna: #5E5103;

Nilai hitam ditulis sebagai (0, 0, 0) dan putih sebagai (255, 255, 255) . Dimungkinkan juga untuk menunjukkan nilai-nilai ini sebagai persentase. Jadi, angka 255 sama dengan 100%, oleh karena itu, warna putih dapat diatur sebagai berikut:

Warna: RGB(100%, 100%, 100%);

Dimana mencari arti warna

Mungkin Anda mempunyai pertanyaan: dari mana Anda mendapatkan semua makna warna ini? ada banyak editor grafis dan layanan online yang dapat digunakan untuk memilih warna dan membuat skema warna. Salah satu program paling populer di mana Anda dapat memilih warna yang sesuai dan mendapatkan RGB, nilai hex, dan lainnya - Adobe Photoshop. Sebagai alternatif, ada situs khusus di mana Anda dapat dengan mudah memilih tidak hanya warna, tetapi juga keseluruhan skema warna. Contoh yang bagus adalah layanan Adobe Color CC.

Model warna RGBA

Anda dapat mengatur warna dalam format RGBA dengan cara yang hampir sama seperti dalam RGB. Perbedaan antara RGBA dan RGB adalah adanya saluran alfa yang bertanggung jawab atas transparansi warna. Transparansi diatur menggunakan angka dalam rentang 0 hingga 1, di mana 0 berarti transparansi penuh, dan 1, sebaliknya, berarti buram sepenuhnya. Nilai antara seperti 0,5 memungkinkan Anda menyetel tampilan transparan (notasi singkat diperbolehkan, tanpa nol, tetapi dengan titik – 0,5). Misalnya, untuk membuat teks berwarna dan sedikit transparan, Anda perlu menulis kata kunci rgba dan nilai warna setelah properti color:

P ( warna: rgba(94, 81, 3, .9); )

Kekurangan RGBA adalah tidak mendukung peramban Internet Versi penjelajah 8 dan sebelumnya. Khusus untuk IE8, Anda bisa menerapkan solusi berikut:

P ( warna: rgb(94, 81, 3); warna: rgba(94, 81, 3, .9); )

Properti pertama dalam contoh ini ditujukan untuk browser IE8, yang akan menampilkan teks dalam warna yang diinginkan, tetapi tanpa transparansi. Dan browser yang memahami RGBA akan menerapkan properti kedua ke elemen tersebut, dengan transparansi.

Model warna HSL (HSLA).

Anda juga dapat mengatur warna dalam CSS menggunakan koordinat model warna HSL (Hue, Saturation, Lightness). Ada tertulis seperti ini:

P ( warna: hsl(165, 100%, 50%); )

Angka pertama dalam tanda kurung berarti rona dan dinyatakan dalam derajat (kisaran angka dari 0 hingga 359). Memahami mengapa derajat digunakan akan mudah jika Anda mengingat seperti apa roda warna itu:

Angka kedua dan ketiga dalam tanda kurung masing-masing berarti saturasi dan kecerahan. Nilainya ditetapkan dalam persentase dari 0 hingga 100. Semakin rendah nilai saturasinya, semakin redup warnanya. Nilai saturasi nol akan menghasilkan warna abu-abu, berapa pun nilai ronanya. Nilai kecerahan memungkinkan Anda menentukan kecerahan warna. Nilai yang rendah menghasilkan corak warna yang gelap, nilai yang tinggi menghasilkan corak warna yang terang. Nilai 100% untuk kecerahan berarti putih, 0% berarti hitam.

Model warna HSLA bekerja hampir sama dengan HSL, tetapi mirip dengan RGBA, model ini memiliki saluran alfa yang dapat digunakan untuk mengatur transparansi warna, menentukan nilai yang diinginkan dalam rentang dari 0 hingga 1:

P ( warna: hsla(165, 100%, 50%, .6); )

HSL dan HSLA didukung oleh semua browser kecuali Internet Explorer versi 8 dan sebelumnya.

Warna HTML Standar

Cara lain untuk merepresentasikan warna di web adalah melalui kata kunci, yang dapat digunakan untuk menentukan warna suatu elemen. Contoh:

P (warna: hitam;)

Ada 16 warna standar yang dapat dituliskan nilai properti warnanya:

Warna-warna ini didukung oleh semua browser. Selain itu, ada sekitar 130 kata kunci tambahan untuk berbagai corak warna. Tabel lengkap warna-warna tersebut dapat dilihat pada buku referensi W3C.

Penggunaan kata kunci seperti itu dapat diterima, namun ada risiko beberapa kata tidak dapat diterima oleh browser. Oleh karena itu, disarankan untuk menuliskan kode warna heksadesimal daripada kata kunci.

Hasil

Dalam CSS, warna teks ditentukan menggunakan properti warna, dan nilainya dapat ditulis dengan beberapa cara - dalam format heksadesimal (hex), dalam format RGB atau HSL, atau dengan menentukan kata kunci. Untuk menghindari kesalahan tampilan warna yang ditentukan menggunakan kata kunci, lebih baik menentukan nilai hexnya.

Dimungkinkan juga untuk mengatur transparansi elemen menggunakan saluran alfa (format RGBA dan HSLA). Perlu diingat bahwa browser IE8 dan nya versi awal tidak mendukung format RGBA, HSL dan HSLA.

Pada artikel kali ini kita akan mengenal kemampuan HTML dan CSS untuk mengubah warna teks pada halaman website. Beberapa opsi akan dipertimbangkan. Untuk setiap kasus, metode spesifiknya sendiri dapat digunakan.

Untuk memulainya, kami mencatat bahwa semua warna dapat ditentukan dalam tiga format:

• Nama warna (merah, biru, hijau, dll.)
• Format heksadesimal (#104A00, #0F0, dll.)
• format rgba (rgba(0,0,0,0.5), dll.)

Situs web kami menyajikan palet lengkap dan nama warna html untuk situs, di mana Anda dapat memilih warna yang sesuai.

Metode 1. Melalui tag html