Contoh penggunaan nama warna yang berbeda:

Contoh: menentukan warna berdasarkan namanya

• Cobalah sendiri »

Tajuk di latar belakang merah

Header pada latar belakang oranye

Menuju latar belakang kapur

Teks putih dengan latar belakang biru

Tajuk di latar belakang merah

Header pada latar belakang oranye

Menuju latar belakang kapur

Teks putih dengan latar belakang biru

Menentukan Warna Menggunakan RGB

Saat menampilkan warna berbeda pada monitor, palet RGB digunakan sebagai dasar. Warna apa pun diperoleh dengan mencampurkan tiga warna dasar: R - merah, G - hijau, B - biru. Kecerahan setiap warna diberikan oleh satu byte dan oleh karena itu dapat mengambil nilai dari 0 hingga 255. Misalnya, RGB(255,0,0) ditampilkan sebagai merah karena merah disetel ke nilai tertinggi (255) dan sisanya diatur ke 0 Anda juga dapat mengatur warna sebagai persentase. Setiap parameter menunjukkan tingkat kecerahan warna yang sesuai. Misalnya: nilai rgb(127, 255, 127) dan rgb(50%, 100%, 50%) akan menetapkan warna hijau sedang yang sama:

Contoh : Menentukan Warna Menggunakan RGB

• Cobalah sendiri »

rgb(127, 255, 127)

RGB(50%, 100%, 50%)

rgb(127, 255, 127)

RGB(50%, 100%, 50%)

Atur warna berdasarkan nilai heksadesimal

Nilai-nilai R G B juga dapat ditentukan menggunakan nilai warna heksadesimal (HEX) dalam bentuk: #RRGGBB dimana RR (merah), GG (hijau) dan BB (biru) adalah nilai heksadesimal dari 00 hingga FF (sama dengan desimal 0-255 ) . Sistem heksadesimal, tidak seperti sistem desimal, seperti namanya, didasarkan pada angka 16. Sistem heksadesimal menggunakan tanda-tanda berikut: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Di sini angka 10 sampai 15 diganti dengan huruf latin. Angka yang lebih besar dari 15 dalam sistem heksadesimal direpresentasikan dengan menggabungkan dua karakter menjadi satu nilai. Misalnya, angka tertinggi 255 dalam desimal sama dengan nilai FF tertinggi dalam heksadesimal. Berbeda dengan sistem desimal sebelumnya angka heksadesimal letakkan simbol hash # , misalnya, #FF0000 ditampilkan dengan warna merah karena warna merah disetel ke nilai tertingginya (FF) dan warna lainnya disetel ke nilai minimumnya (00). Tanda setelah simbol hash # Anda dapat mengetikkan huruf besar dan kecil. Sistem heksadesimal memungkinkan Anda menggunakan bentuk singkatan #rgb, di mana setiap karakter setara dengan dua kali lipat. Oleh karena itu, entri #f7O seharusnya dianggap sebagai #ff7700.

Contoh: Warna HEX

• Cobalah sendiri »

merah: #FF0000

hijau: #00FF00

biru: #0000FF

merah: #FF0000

hijau: #00FF00

biru: #0000FF

merah+hijau=kuning: #FFFF00

merah+biru=ungu: #FF00FF

hijau+biru=sian: #00FFFF

Daftar warna umum (nama, HEX dan RGB):

Kode warna (latar belakang) berdasarkan saturasi dan rona.

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 jauh 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 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 heksadesimal warna dapat ditulis disingkat. 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 hex warna tidak peka huruf besar-kecil - Anda dapat menggunakan huruf besar dan huruf besar huruf kecil, semua 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 warna:

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 dengan 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 Penjelajah Internet 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

DI DALAM warna CSS 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 versi sebelumnya tidak mendukung format RGBA, HSL, dan HSLA.