Warna ditentukan menggunakan nama warna antara lain seperti: nilai RGB, HEX, HSL, RGBA, HSLA.
Nama Warna
Dalam HTML, warna dapat ditentukan oleh nama warna:
Contoh, Nama Warna dalam HTML:
<!DOCTYPE html> <html> <body> <h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:Orange;">Orange</h1> <h1 style="background-color:DodgerBlue;">DodgerBlue</h1> <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1> <h1 style="background-color:Gray;">Gray</h1> <h1 style="background-color:SlateBlue;">SlateBlue</h1> <h1 style="background-color:Violet;">Violet</h1> <h1 style="background-color:LightGray;">LightGray</h1> </body> </html>
HTML mendukung 140 nama warna standar
Background Color
Anda dapat mengatur Background Color untuk elemen HTML:
<!DOCTYPE html> <html> <body> <h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html>
Warna teks
Anda dapat mengatur warna teks:
<!DOCTYPE html> <html> <body> <h3 style="color:Tomato;">Hello World</h3> <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>
Border Color
Anda dapat mengatur warna batas:
<!DOCTYPE html> <html> <body> <h1 style="border: 2px solid Tomato;">Hello World</h1> <h1 style="border: 2px solid DodgerBlue;">Hello World</h1> <h1 style="border: 2px solid Violet;">Hello World</h1> </body> </html>
Nilai Warna
Dalam HTML, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA:
Sama seperti nama warna "Tomat":
<!DOCTYPE html> <html> <body> <p>Same as color name "Tomato":</p> <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1> <h1 style="background-color:#ff6347;">#ff6347</h1> <h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1> <p>Same as color name "Tomato", but 50% transparent:</p> <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1> <p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p> </body> </html>
Nilai RGB
Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:
rgb (merah, hijau, biru)
Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna antara 0 dan 255.
Misalnya, rgb (255, 0, 0) ditampilkan sebagai merah, karena merah diatur ke nilai tertinggi (255) dan yang lainnya diatur ke 0.
Untuk menampilkan warna hitam, semua parameter warna harus diatur ke 0, seperti ini: rgb (0, 0, 0).
Untuk menampilkan warna putih, semua parameter warna harus diatur ke 255, seperti ini: rgb (255, 255, 255).
Eksperimen dengan mencampurkan nilai RGB di bawah ini:
<!DOCTYPE html> <html> <body> <h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1> <h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1> <h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1> <h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1> <h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1> <h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1> <p>In HTML, you can specify colors using RGB values.</p>
<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1> <h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1> <h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1> <h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1> <h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1> <h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1> <p>By using equal values for red, green, and blue, you will get different shades of gray.</p> </body> </html>
Nilai HEX
Dalam HTML, warna dapat ditentukan menggunakan nilai heksadesimal dalam bentuk:
#rrggbb
Di mana rr (merah), gg (hijau) dan bb (biru) adalah nilai heksadesimal antara 00 dan ff (sama dengan desimal 0-255).
Sebagai contoh, # ff0000 ditampilkan sebagai merah, karena merah diatur ke nilai tertinggi (ff) dan yang lainnya diatur ke nilai terendah (00).
<!DOCTYPE html> <html> <body> <h1 style="background-color:#ff0000;">#ff0000</h1> <h1 style="background-color:#0000ff;">#0000ff</h1> <h1 style="background-color:#3cb371;">#3cb371</h1> <h1 style="background-color:#ee82ee;">#ee82ee</h1> <h1 style="background-color:#ffa500;">#ffa500</h1> <h1 style="background-color:#6a5acd;">#6a5acd</h1> <p>In HTML, you can specify colors using Hex values.</p> <h1 style="background-color:#000000;">#000000</h1> <h1 style="background-color:#3c3c3c;">#3c3c3c</h1> <h1 style="background-color:#787878;">#787878</h1> <h1 style="background-color:#b4b4b4;">#b4b4b4</h1> <h1 style="background-color:#f0f0f0;">#f0f0f0</h1> <h1 style="background-color:#ffffff;">#ffffff</h1> <p>By using equal values for red, green, and blue, you will get different shades of gray.</p> </body> </html>
Nilai HSL
Dalam HTML, warna dapat ditentukan menggunakan rona, saturasi, dan cahaya (HSL) dalam bentuk:
hsl (hue, saturation, lightness)
Hue adalah gelar pada roda warna dari 0 hingga 360. 0 berwarna merah, 120 berwarna hijau, dan 240 berwarna biru.
Saturasi adalah nilai persentase, 0% berarti warna abu-abu, dan 100% adalah warna penuh.
Kecerahan juga persentase, 0% hitam, 50% tidak terang atau gelap, 100% putih
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1> <h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1> <h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1> <h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1> <h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1> <p>In HTML, you can specify colors using HSL values.</p> </body> </html>
Kejenuhan
Kejenuhan dapat digambarkan sebagai intensitas warna.
100% adalah warna murni, tidak ada nuansa abu-abu
50% berwarna abu-abu 50%, tetapi Anda masih bisa melihat warnanya.
0% benar-benar abu-abu, Anda tidak bisa lagi melihat warnanya.
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1> <h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1> <h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1> <h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1> <h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1> <p>With HSL colors, less saturation mean less color. 0% is completely gray.</p> </body> </html>
Keringanan
Terang warna dapat digambarkan sebagai berapa banyak cahaya yang ingin Anda berikan warna, di mana 0% berarti tidak ada cahaya (hitam), 50% berarti 50% terang (tidak gelap atau terang) 100% berarti cahaya penuh (putih).
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1> <h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1> <h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1> <h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1> <p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p> <h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1> <h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1> <h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1> <h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1> <h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1> <h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1> <p>With HSL colors, shades of gray are made by setting the saturation to 0%, and adjusting the lightness according to how dark/light the gray color should be.</p> </body> </html>
Nilai RGBA
Nilai warna RGBA adalah perpanjangan dari nilai warna RGB dengan saluran alpha - yang menentukan opacity untuk warna.
Nilai warna RGBA ditentukan dengan:
rgba (merah, hijau, biru, alfa)
Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):
<!DOCTYPE html> <html> <body> <h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1> <h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1> <p>You can make transparent colors by using the RGBA color value.</p> </body> </html>
Nilai HSLA
Nilai warna HSLA adalah perpanjangan dari nilai warna HSL dengan saluran alpha - yang menentukan opacity untuk warna.
Nilai warna HSLA ditentukan dengan:
hsla (hue, saturation, lightness, alpha)
Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1> <p>You can make transparent colors by using the HSLA color value.</p> </body> </html>
Lihat Tutorial Lengkap Tentang CSS Disini:
1. Artikel: Tutorial CSS
2. Playlist Youtube: Tutorial CSS Dasar