Kode warna abu-abu-biru. Warna dalam gaya dapat ditentukan dengan berbagai cara: berdasarkan nilai heksadesimal, berdasarkan nama, dalam format RGB, RGBA, HSL, HSLA

30.09.2019

Berdasarkan nama

Penjelajah Internet	krom	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Browser mendukung beberapa warna berdasarkan namanya. Dalam tabel 1 menunjukkan nama, kode heksadesimal, nilai dalam format RGB, HSL dan deskripsi.

Meja 1. Nama warna

Nama	Kode	RGB	HSL	Keterangan
putih	#ffffff atau #fff	rgb(255.255.255)	hsl(0,0%,100%)	Putih
perak	#c0c0c0	rgb(192.192.192)	hsl(0,0%,75%)	Abu-abu
abu-abu	#808080	rgb(128.128.128)	hsl(0,0%,50%)	Abu-abu gelap
hitam	#000000 atau #000	rgb(0,0,0)	hsl(0,0%,0%)	Hitam
merah tua	#800000	rgb(128,0,0)	hsl(0,100%,25%)	Merah tua
merah	#ff0000 atau #f00	rgb(255,0,0)	hsl(0,100%,50%)	Merah
oranye	#ffa500	rgb(255.165,0)	hsl(38,8,100%,50%)	Oranye
kuning	#ffff00 atau #ff0	rgb(255.255,0)	hsl(60,100%,50%)	Kuning
zaitun	#808000	rgb(128,128,0)	hsl(60,100%,25%)	Zaitun
kapur	#00ff00 atau #0f0	rgb(0,255,0)	hsl(120,100%,50%)	Hijau muda
hijau	#008000	rgb(0,128,0)	hsl(120,100%,25%)	Hijau
air	#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
angkatan laut	#000080	rgb(0,0,128)	hsl(240,100%,25%)	Biru tua
teal	#008080	rgb(0,128,128)	hsl(180,100%,25%)	Biru-hijau
fuchsia	#ff00ff atau #f0f	rgb(255,0,255)	hsl(300,100%,50%)	Berwarna merah muda
ungu	#800080	rgb(128,0,128)	hsl(300,100%,25%)	Ungu

Menggunakan RGB

Penjelajah Internet	krom	Opera	Safari	Firefox	Android	iOS
5.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

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

RGBA

Penjelajah Internet	krom	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

Format RGBA serupa sintaksisnya dengan RGB, tetapi menyertakan saluran alfa yang menentukan transparansi elemen. Nilai 0 berarti transparan sepenuhnya, 1 buram, dan nilai antara seperti 0,5 berarti semi transparan.

RGBA telah ditambahkan ke CSS3, jadi kode CSS harus divalidasi terhadap versi ini. Perlu dicatat bahwa standar CSS3 masih dalam pengembangan dan beberapa fitur mungkin berubah. Misalnya, warna dalam format RGB yang ditambahkan ke properti background-color divalidasi, namun warna yang ditambahkan ke properti background tidak valid lagi. Pada saat yang sama, browser memahami warna untuk kedua properti dengan cukup tepat.

HSL

Penjelajah Internet	krom	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.0+	2.1+	2.0+

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

Beras. 1. Roda warna

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

Lightness menentukan seberapa cerah warnanya dan ditentukan dalam persentase dari 0% hingga 100%. Nilai rendah membuat warna lebih gelap, dan nilai tinggi membuat warna lebih terang; nilai ekstrem 0% dan 100% menunjukkan hitam putih.

HSLA

Penjelajah Internet	krom	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

Format HSLA serupa sintaksisnya dengan HSL, tetapi menyertakan saluran alfa untuk menentukan transparansi elemen. Nilai 0 berarti transparan sepenuhnya, 1 buram, dan nilai antara seperti 0,5 berarti semi transparan.

Nilai warna RGBA, HSL, dan HSLA telah ditambahkan ke CSS3, jadi harap periksa kode Anda untuk validitas versi saat menggunakan format ini.

HTML5 CSS2.1 CSS3 YAITU Cr Op Sa Fx

Warna

Peringatan

Semua metode penangkapan singa yang tercantum di situs bersifat teoritis dan berdasarkan metode komputasi. Penulis tidak menjamin keselamatan Anda saat menggunakannya dan tidak bertanggung jawab atas hasilnya. Ingat, singa adalah predator dan hewan berbahaya!

Arrrgh!

Hasil dari contoh ini ditunjukkan pada Gambar. 2.

Beras. 2. Warna pada halaman web

26/02/15 8.9K

Seperti yang Anda ketahui, warna dapat mempengaruhi keadaan seseorang: baik mental maupun fisik. Setiap hari, saat menjelajahi situs web di Internet, mata mengevaluasi jutaan warna dan corak. Seorang web designer yang paham dengan psikologi warna dapat memanipulasi mood pengunjung untuk mencapai tujuan tertentu.

Hal ini disebabkan oleh fakta bahwa beberapa warna menenangkan, dan beberapa, sebaliknya, menggairahkan. Selanjutnya kita akan membahas tentang bagaimana warna disintesis dan ditampilkan menggunakan teknologi komputer.

RGB adalah model warna yang mewakili metode memperoleh semua warna dan coraknya dengan mencampurkan tiga komponen utama dalam berbagai proporsi, yaitu:

merah ( Merah);
warna hijau ( Hijau);
warna biru ( Biru).

Dari sinilah nama singkatan RGB berasal. Warna-warna ini dipilih sebagai warna utama karena suatu alasan: alasannya adalah fisiologi retina mata manusia, dan cara persepsinya:

Model RGB tetap menjadi yang paling populer saat ini dan digunakan untuk mereproduksi warna pada layar TV dan monitor komputer. Karena produsen mewariskan produknya karakteristik yang berbeda, dibuat pada tahun 1996 sistem terpadu Sintesis warna berbasis RGB disebut sRGB, yang dikembangkan bersama oleh Microsoft dan HP.

Representasi numerik warna

Seperti disebutkan sebelumnya, warna RGB dibentuk dengan mencampurkan warna primer. Untuk menggambarkan intensitas masing-masing warna, diadopsi skema di mana warna diwakili oleh rentang 0-255 (8 bit), yang dalam notasi heksadesimal sesuai dengan 00-FF.

Artinya, warna primer akan terlihat seperti ini:

Merah – RGB (255,0,0);
Hijau – RGB (0,255,0);
Biru – RGB (0,0,255);

Jika intensitas warna bernilai kurang dari 255, maka diperoleh corak merah, hijau, dan biru yang berbeda. Berikut tabel gradasinya, serta nilai heksadesimal masing-masing coraknya:

Tabel warna RGB

Tentu saja, selain gradasi warna primer, ada juga warna campuran yang jumlahnya cukup banyak. Oleh karena itu, tabel warna RGB dibuat, yang menyajikan semua corak yang ada, serta nama dan representasi numeriknya ( dalam bentuk desimal dan heksadesimal).

Anda dapat melihatnya di sini. meja ini membuat hidup lebih mudah bagi desainer web, karena dalam beberapa detik Anda dapat menemukan warna yang diperlukan dan mengetahui representasi numeriknya.

Palet warna RGB yang aman

Namun, pada titik tertentu ada masalah dengan menampilkan warna di browser yang berbeda, dan untuk mengatasinya, apa yang disebut "aman" dikompilasi. Palet RGB warna yang diperoleh dengan perhitungan matematis.

Jika browser tidak dapat menampilkan warna dengan benar, browser akan mencoba mendapatkan sesuatu yang mendekati kebutuhannya dengan mencampurkan warna yang berdekatan, dan kemungkinan besar hasilnya sama sekali tidak dapat diterima:

Dengan menggunakan kode warna RGB dari palet ini, seorang pengembang web dapat merasa tenang mengenai tampilan warna pada halaman situs webnya jika dilihat menggunakan browser, platform, dan monitor yang berbeda. Meskipun aktif saat ini tabel warna aman kehilangan relevansinya ( kemajuan teknologi masih tidak tinggal diam), saat menggunakannya Anda bisa, seperti kata mereka, tidur nyenyak.

Warna emas dalam model RGB

Kata “emas” pertama kali digunakan pada awal abad ke-14 untuk menggambarkan warna unsur kimia disebut Aurum - emas. Dalam model RGB, warna emas diwakili oleh nilai numerik berikut:

RGB (255, 215, 0) – sistem desimal;
HEX #FFD700 – sistem heksadesimal.

Warna krem dalam model RGB

Warna krem menempati tempat yang cukup penting dalam sejarah, meskipun bukan yang paling ekspresif. Banyak monumen budaya, terutama patung kuno, terbuat dari batu sabun dan batu sabun yang berwarna krem. Pada model RGB, warna krem memiliki representasi numerik sebagai berikut.

Warna dalam CSS dapat diatur dengan berbagai cara:

berdasarkan nama,
Oleh nilai heksadesimal,
dalam format RGB dan RGBA,
dalam format HSL dan HSLA.

Atur warna berdasarkan nama

Browser mendukung penentuan beberapa warna untuk elemen berdasarkan nama. Tabel ini berisi beberapa kata kunci (nama warna bahasa Inggris) yang digunakan untuk menentukan properti warna, kode RGB, kode heksadesimal (HEX) dan kode HSL.

Meja 1. Nama warna, kode RGB, HEX dan HSLnya.

Nama	RGB	HEX	HSL	Keterangan
putih	rgb(255, 255, 255)	#ffffff atau #fff	hsl(0, 0%, 100%)	Putih
perak	rgb(192, 192, 192)	#c0c0c0	hsl(0, 0%, 75%)	Abu-abu
abu-abu	rgb(128, 128, 128)	#808080	hsl(0, 0%, 50%)	Abu-abu gelap
hitam	rgb(0, 0, 0)	#000000 atau #000	hsl(0, 0%, 0%)	Hitam
merah tua	rgb(128, 0, 0)	#800000	hsl(0, 100%, 25%)	Merah tua
merah	rgb(255, 0, 0)	#ff0000 atau #f00	hsl(0, 100%, 50%)	Merah
oranye	rgb(255, 165, 0)	#ffa500	hsl(38,8, 100%, 50%)	Oranye
kuning	rgb(255, 255, 0)	#ffff00 atau #ff0	hsl(60, 100%, 50%)	Kuning
zaitun	rgb(128, 128, 0)	#808000	hsl(60, 100%, 25%)	Zaitun
kapur	rgb(0, 255, 0)	#00ff00 atau #0f0	hsl(120, 100%, 50%)	Hijau muda
hijau	rgb(0, 128, 0)	#008000	hsl(120, 100%, 25%)	Hijau
air	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
angkatan laut	rgb(0,0,128)	#000080	hsl(240, 100%, 25%)	Biru tua
teal	rgb(0, 128, 128)	#008080	hsl(180, 100%, 25%)	Biru-hijau
fuchsia	rgb(255, 0, 255)	#ff00ff atau #f0f	hsl(300, 100%, 50%)	Berwarna merah muda
ungu	rgb(128, 0, 128)	#800080	hsl(300, 100%, 25%)	Ungu

Ini adalah contoh penggunaan nama warna, nama warna diambil dari tabel extended.

RGB dalam CSS

Pirus Sedang

cokelat

merah tua

biru ungu

rolivedrab

Begini cara kerja kode ini:

Pengaturan warna menggunakan RGB

RGB adalah model warna aditif. Pada Bahasa inggris tambahan- tambahan. RGB adalah singkatan dari kata bahasa Inggris: Red, Green, Blue - merah, hijau, biru). Dari sini terlihat jelas bahwa dalam model RGB, warna disintesis dengan menambahkan tiga warna (merah, hijau, biru) dalam jumlah berbeda.

Dengan mencampurkan warna merah, hijau dan biru, Anda bisa mendapatkan beberapa juta corak. Semua kemungkinan kombinasi disimpan dalam memori komputer.

Langsung ke intinya.

Untuk mengatur properti dalam format ini, gunakan notasi rgb(r, g, b) , di mana r, g, b adalah tiga saluran untuk setiap warna (merah, hijau, biru). Nilai untuk setiap saluran diatur dalam rentang 0 hingga 255.

Kode contoh.

Untuk memperjelas semuanya, berikut adalah contoh kode:

RGB dalam CSS

rgb(255, 0, 0)

rgb(0, 255, 0)

rgb(0, 0, 255)

Beginilah seharusnya contoh ini bekerja:

Gambar.1. Warna dalam RGB.

Penjelasan misalnya.

Di awal halaman kita membuat kelas div.rgb, diperlukan untuk blok yang dibuat oleh tag

ditampilkan dalam ukuran yang diperlukan: 240px kali 40px. Kami menetapkan properti line-height nilai 40px, yaitu sama dengan tinggi blok, ini akan memungkinkan Anda untuk menampilkan teks di blok

di pusat vertikal. Kami memusatkan teks secara horizontal menggunakan aturan ( perataan teks: tengah;).

Selanjutnya, dalam kode yang kita tetapkan warna latar belakang memblokir

menggunakan atribut style, menggunakan properti background, dan menetapkan nilai ke rgb(255, 0, 0) , rgb(0, 255, 0) , dan rgb(0, 0, 255) . Artinya, kami secara bergantian membuat satu saluran sesatu mungkin, dan saluran lainnya tidak digunakan untuk sintesis, karena nilainya nol.

Coba edit contoh ini dan tentukan nilai Anda sendiri, misalnya rgb(100, 100, 100) .

Pengaturan warna menggunakan RGBA

CSS3 memiliki alat baru untuk bekerja dengan warna - format RGBA. Ini bisa disebut evolusi model RGB, tetapi dengan penambahan satu saluran baru - saluran A atau alfa. Saluran ini mengatur transparansi warna. Nilainya diatur dalam rentang dari 0 hingga 1. Nilai 0 sesuai dengan transparansi penuh, 1 - opacity penuh (warna akan sama seperti yang ditentukan dalam tiga saluran RGB pertama), dan nilai perantara seperti 0,4 atau 0,6 - tembus cahaya pada tingkat yang berbeda-beda.

Kode contoh.

RGBA di CSS3

Begini cara kerjanya:

Kode ini secara visual mirip dengan kode berikut, yang menggunakan model RGB untuk menentukan nilai warna:

RGBA di CSS3

Inilah hasilnya:

Nilai saluran alfa sama dengan nol membuat warna apa pun tidak terlihat - benar-benar transparan; nilai yang sama dengan satu menerjemahkan warna dalam kode RGB tanpa perubahan. Properti rgba(255,0,0,1.0) menunjukkan warna merah rgb(255, 0, 0) .

Berdasarkan nilai heksadesimal (kode HEX)

Dalam kehidupan sehari-hari, kita menggunakan sistem penghitungan desimal. Asal usulnya sangat sederhana - kita memiliki sepuluh jari di tangan kita, dan menghitung dengan jari adalah hal yang nyaman dalam hidup. Jika sistem bilangan desimal memiliki sepuluh digit: dari 0 sampai 9, dan angka berikutnya adalah 10, maka sistem bilangan heksadesimal memiliki 16 digit, dan digit berikutnya adalah angka 16.

Untuk menunjukkan kode warna, angka desimal biasa dari 0 sampai 9 digunakan sebagai angka heksadesimal, dan huruf latin dari A sampai F digunakan untuk menunjukkan angka dari 10 sampai 15, yaitu (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Untuk lebih jelasnya, mari kita letakkan ini dalam sebuah tabel:

Untuk menulis bilangan heksadesimal lebih besar dari F (15 dalam sistem desimal), seperti pada sistem desimal, juga menggunakan kombinasi dua angka, tetapi sudah heksadesimal, yang jelas. Jadi, untuk menuliskan bilangan desimal 255 dalam notasi heksadesimal digunakan notasi FF.

Sistem heksadesimal lebih mudah dipahami oleh komputer, dan memproses nilai yang ditetapkan oleh nilai heksadesimal lebih cepat.

Untuk menentukan warna dalam heksadesimal, awali nilai numerik dengan tanda “#”, contoh: #FFC0CB. Nilai #FFC0CB sendiri terdiri dari tiga digit heksadesimal FF, C0 dan CB. Arti entri ini sama dengan mengatur warna dalam format RGB (rgb(r, g, b)) - setiap digit heksadesimal dalam kode HEX menunjukkan saturasi warna dalam saluran model RGB-nya.

Kode HEX dalam CSS

#FF0000

#00FF00

#0000FF

Kode ini akan menampilkan elemen berikut:

Dan berikut adalah gambar hasil dari bagian "Mengatur warna menggunakan RGB" pada halaman di atas.

Gambar.1. Warna dalam RGB.

Kami melihat bahwa warnanya identik.

Notasi singkat dari kode warna HEX diperbolehkan: angka 6 digit dapat ditulis sebagai angka 3 digit. Ini hanya berlaku jika dua digit nilai warna pada satu saluran diulang.

Artinya, singkatan berikut dapat diterima:

Misalnya warna #ff22aa bisa ditulis #f2a, atau warna #44aa22 bisa ditulis #4a2.

Mengatur Warna Menggunakan HSL

CSS3 memiliki format baru untuk menentukan warna.

Format HSL adalah singkatan dari kata bahasa Inggris: Hue (hue), Saturate (saturasi) dan Lightness (ringan).

Hue di HSL adalah nilai warna pada roda warna khusus (Gambar 2) dan ditentukan dalam derajat. Jika kita analogikan dengan model RGB, maka 0° berarti merah, 120° berarti hijau, dan 240° berarti biru.

Nilai rona akan berubah dari 0 hingga 359.

Gambar 2. Roda warna HSL.

Nilai kedua - saturasi (Saturate) ditetapkan sebagai persentase. Pada saturasi 100%, warnanya menjadi “berair” mungkin; saat indikator saturasi bergerak menuju 0%, warnanya menjadi lebih kusam dan berubah menjadi abu-abu.

Nilai ketiga, Lightness, juga ditetapkan sebagai persentase. Semakin tinggi persentasenya, warnanya akan semakin cerah. Nilai ekstrim 0% dan 100% masing-masing akan menunjukkan warna hitam (tidak ada cahaya) dan putih (terlalu terang), dan tidak masalah warna mana dari roda warna yang dipilih di saluran pertama. Nilai kecerahan warna optimal adalah 50%.

Mengatur Warna Menggunakan HSLA

Format HSLA terkait dengan HSL, sama seperti RGB dengan RGBA. DI DALAM format HSL Dan, seperti di RGBA, saluran alfa telah ditambahkan, yang bertanggung jawab atas transparansi warna.

Warna yang ditentukan dalam format HSL lebih mudah dibaca. Kita dapat mengatakan bahwa ini intuitif. Misalnya kode hsl(120,60%,50%) dapat mewakili warna akhir jika terdapat gambar roda warna HSL di memori. Hal yang sama tidak berlaku untuk format RGB dan HEX; kode warna yang ditentukan dalam format ini menjadi jelas hanya setelah divisualisasikan pada monitor.

Format baru dalam CSS3 (HSL, HSLA dan RGBA) berfungsi di browser mulai dari versi: IE 9.0, Opera 10.0 Firefox 3.0. Bagaimana cara membuat gaya berfungsi di browser lama?

Somebloсk ( warna latar: rgb(255,50,50); warna latar: rgba(255,50,50,0.85) )

Saat menggunakan kode ini di browser lama, warna latar belakang untuk kelas .somebloсk, meskipun tidak menggunakan saluran alfa, akan ditampilkan dalam format RGB.

Kode warna dalam CSS digunakan untuk menentukan warna. Biasanya, kode warna atau nilai warna digunakan untuk mengatur warna baik warna latar depan suatu elemen (misalnya warna teks, warna tautan) atau warna latar belakang suatu elemen (warna latar belakang, warna blok). Mereka juga dapat digunakan untuk mengubah warna tombol, batas, penanda, arahkan kursor, dan efek dekoratif lainnya.

Anda dapat menentukan nilai warna Anda dalam berbagai format. Tabel berikut mencantumkan semua kemungkinan format:

Format yang tercantum dijelaskan secara lebih rinci di bawah.

Warna CSS - Kode Hex

Kode warna heksadesimal adalah representasi warna enam digit. Dua digit pertama (RR) mewakili nilai merah, dua digit berikutnya mewakili nilai hijau (GG), dan dua digit terakhir mewakili nilai biru (BB).

Warna CSS - Kode Hex Pendek

Kode warna hex pendek adalah bentuk notasi enam karakter yang lebih pendek. Dalam format ini, setiap digit diulang untuk menghasilkan nilai warna enam digit yang setara. Misalnya: #0F0 menjadi #00FF00.

Nilai heksadesimal dapat diambil dari grafik apa pun perangkat lunak, seperti Adobe Photoshop, Penarikan Inti, dll.

Setiap kode warna heksadesimal dalam CSS akan diawali dengan tanda pagar “#”. Di bawah ini adalah contoh penggunaan notasi heksadesimal.

Warna CSS - Nilai RGB

nilai RGB adalah kode warna yang diatur menggunakan properti rgb(). Properti ini mengambil tiga nilai: masing-masing satu untuk merah, hijau, dan biru. Nilainya bisa berupa bilangan bulat, dari 0 hingga 255, atau persentase.

Catatan: Tidak semua browser mendukung properti warna rgb(), jadi tidak disarankan untuk menggunakannya.

Di bawah ini adalah contoh yang memperlihatkan beberapa warna menggunakan nilai RGB.

Pembuat kode warna

Anda dapat membuat jutaan kode warna menggunakan layanan kami.

Warna Aman Browser

Di bawah ini adalah tabel 216 warna yang paling aman dan tidak bergantung pada komputer. Warna-warna dalam CSS ini berkisar dari 000000 hingga kode heksadesimal FFFFFF. Mereka aman digunakan karena memastikan semua komputer menampilkan warna dengan benar saat bekerja dengan 256 palet warna.

Tabel warna "aman" di 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

Vlad Merzhevich

Dalam HTML, warna ditentukan dengan salah satu dari dua cara: menggunakan kode heksadesimal dan dengan nama warna tertentu. Metode yang didasarkan pada sistem bilangan heksadesimal paling banyak digunakan, karena merupakan metode yang paling universal.

Warna heksadesimal

HTML menggunakan angka heksadesimal untuk menentukan warna. Sistem heksadesimal, tidak seperti sistem desimal, seperti namanya, didasarkan 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 10 sampai 15 diganti dengan huruf latin. Dalam tabel 6.1 menunjukkan korespondensi antara bilangan desimal dan heksadesimal.

Bilangan yang lebih besar dari 15 pada sistem heksadesimal dibentuk dengan menggabungkan dua bilangan menjadi satu (Tabel 6.2). Misalnya, angka 255 dalam desimal sama dengan angka FF dalam heksadesimal.

Untuk menghindari kebingungan dalam mendefinisikan sistem bilangan, bilangan heksadesimal diawali dengan simbol hash #, misalnya #aa69cc. Dalam hal ini kasusnya tidak menjadi masalah, sehingga diperbolehkan menulis #F0F0F0 atau #f0f0f0.

Warna khas yang digunakan dalam HTML terlihat seperti ini.

Di sini warna latar belakang halaman web diatur ke #FA8E47. Simbol hash # di depan angka berarti heksadesimal. Dua digit pertama (FA) menentukan komponen warna merah, digit ketiga hingga keempat (8E) menentukan komponen hijau, dan dua digit terakhir (47) menentukan komponen biru. Hasil akhirnya adalah warna ini.

F.A.

FA8E47

Masing-masing dari tiga warna - merah, hijau dan biru - dapat mengambil nilai dari 00 hingga FF, menghasilkan total 256 warna. Jadi, jumlah seluruh warnanya adalah 256x256x256 = 16.777.216 kombinasi. Model warna berdasarkan komponen merah, hijau dan biru disebut RGB (merah, hijau, biru). Model ini bersifat aditif (dari tambah – tambah), dimana penambahan ketiga komponen tersebut membentuk warna putih.

Untuk mempermudah menavigasi warna heksadesimal, pertimbangkan beberapa aturan.

Jika nilai komponen warnanya sama (contoh: #D6D6D6), maka hasilnya akan berwarna abu-abu. Semakin tinggi angkanya, semakin terang warnanya, dengan nilai mulai dari #000000 (hitam) hingga #FFFFFF (putih).
Warna merah cerah terbentuk jika komponen merah dibuat maksimum (FF) dan komponen sisanya diatur ke nol. Warna dengan nilai #FF0000 adalah warna merah yang paling merah. Hal yang sama berlaku untuk hijau (#00FF00) dan biru (#0000FF).
Kuning (#FFFF00) dibuat dengan mencampurkan warna merah dan hijau. Hal ini terlihat jelas pada roda warna (Gbr. 6.1) yang menampilkan warna primer (merah, hijau, biru) dan warna komplementer atau tambahan. Ini termasuk kuning, cyan dan ungu (juga disebut magenta). Secara umum, warna apa pun dapat diperoleh dengan mencampurkan warna-warna yang mendekatinya. Jadi, cyan (#00FFFF) diperoleh dengan menggabungkan warna biru dan hijau.

Beras. 6.1. Roda warna

Warna berdasarkan nilai heksadesimal tidak harus dipilih secara empiris. Cocok untuk tujuan ini editor grafis mampu bekerja dengan berbeda model warna, misalnya Adobe Photoshop. Pada Gambar. Gambar 6.2 menunjukkan jendela untuk memilih warna dalam program ini; nilai heksadesimal yang dihasilkan dari warna saat ini digariskan dengan sebuah garis. Anda dapat menyalin dan menempelkannya ke kode Anda.

Beras. 6.2. Jendela untuk memilih warna di Photoshop

Warna web

Jika Anda mengatur kualitas rendering warna monitor ke 8 bit (256 warna), maka warna yang sama dapat ditampilkan di browser yang berbeda dengan caraku sendiri. Hal ini disebabkan cara grafik ditampilkan, ketika browser bekerja dengan paletnya sendiri dan tidak dapat menampilkan warna yang tidak ada dalam paletnya. Dalam hal ini, warnanya diganti dengan kombinasi piksel lain yang dekat dengannya, warna yang meniru warna tertentu. Untuk memastikan bahwa warnanya tetap sama di berbagai browser, palet yang disebut warna web diperkenalkan. Warna web adalah warna yang setiap komponennya - merah, hijau, dan biru - disetel ke salah satu dari enam nilai - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Nilai heksadesimal komponen ini ditunjukkan dalam tanda kurung. Jumlah total warna dari semua kemungkinan kombinasi menghasilkan 6x6x6 - 216 warna. Contoh warna web adalah #33FF66.

Fitur utama warna web adalah tampilannya sama di semua browser. Saat ini, relevansi warna web sangat kecil karena peningkatan kualitas monitor dan perluasan kemampuannya.

Warna berdasarkan nama

Untuk menghindari keharusan mengingat sekumpulan angka, Anda dapat menggunakan nama warna yang umum digunakan. Dalam tabel 6.3 menunjukkan nama-nama nama warna populer.

Meja 6.3. Nama beberapa warna

Nama warna	Keterangan	Nilai heksadesimal
hitam	Hitam	#000000
biru	Biru	#0000FF
fuchsia	Ungu muda	#FF00FF
abu-abu	Abu-abu gelap	#808080
hijau	Hijau	#008000
kapur	Hijau muda	#00FF00
merah tua	Merah tua	#800000
angkatan laut	Biru tua	#000080
zaitun	Zaitun	#808000
ungu	Ungu tua	#800080
merah	Merah	#FF0000
perak	Abu-abu muda	#C0C0C0
teal	Biru-hijau	#008080
putih	Putih	#FFFFFF
kuning	Kuning	#FFFF00

Tidak masalah apakah Anda menentukan warna berdasarkan namanya atau menggunakan angka heksadesimal. Metode-metode ini memiliki efek yang sama. Contoh 6.1 menunjukkan cara mengatur latar belakang dan warna teks halaman web.

Contoh 6.1. Latar belakang dan warna teks