Cara Mewarnai Teks dan Background HTML
Warna HTML ditentukan menggunakan nama warna yang telah ditentukan, atau nilai RGB, HEX, HSL, RGBA, HSLA.
Nama warna
Dalam HTML, warna dapat ditentukan dengan menggunakan nama warna:
Contoh Code:
<!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>
Hasil Code:
HTML mendukung 140 nama warna standar.
Background Color
Anda dapat mengatur warna latar belakang untuk elemen HTML:
Contoh Code:
<!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 bisa mengatur warna teks:
Contoh Code:
<!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>
Hasil Code:
Border Color
Anda dapat mengatur warna border dengan menggunakan code HTML.
Contoh Code:
<!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>
Hasil Code:
Nilai warna
Dalam HTML, warna juga dapat ditentukan dengan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA:
Contoh Code:
<!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>
Hasil Code:
Nilai RGB
Dalam HTML, warna dapat ditentukan sebagai nilai RGB, dengan menggunakan rumus ini:
rgb (red, green, and blue)
Setiap parameter (red, green, and blue) mendefinisikan intensitas warna antara 0 dan 255.
Misalnya, rgb (255, 0, 0) ditampilkan sebagai warna merah, karena merah diatur ke nilai tertinggi (255) dan yang lainnya diatur ke 0.
Untuk menampilkan warna hitam, semua parameter warna harus diset ke 0, seperti ini: rgb (0, 0, 0).
Untuk menampilkan warna putih, semua parameter warna harus disetel ke 255, seperti ini: rgb (255, 255, 255).
Contoh Code:
<!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>
</body>
</html>
Hasil Code:
Nilai HEX
Dalam HTML, warna dapat ditentukan dengan menggunakan nilai heksadesimal dalam bentuk:
#rrggbb
Dimana rr (merah), gg (hijau) dan bb (biru) adalah nilai heksadesimal antara 00 dan ff (sama dengan desimal 0-255).
Misalnya, # ff0000 ditampilkan sebagai warna merah, karena warna merah diset ke nilai tertinggi (ff) dan yang lainnya diatur ke nilai terendah (00).
Contoh Code:
<!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>
</body>
</html>
Hasil Code:
Nilai HSL
Dalam HTML, warna dapat ditentukan dengan menggunakan rona, saturasi, dan ringan (HSL) dalam bentuk:
hsl (rona, saturasi, ringan)
Hue adalah tingkat pada roda warna dari 0 sampai 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.
Lightness juga persentase, 0% berwarna hitam, 50% tidak ringan atau gelap, 100% berwarna putih
Contoh Code:
<!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>
Saturasi
Saturasi dapat digambarkan sebagai intensitas warna.
100% adalah warna murni, tidak ada warna abu-abu
50% berwarna abu-abu 50%, tapi Anda tetap bisa melihat warnanya.
0% benar-benar abu-abu, Anda tidak bisa lagi melihat warnanya.
Contoh Code:
<!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>
Lightness
Cahaya warna dapat digambarkan sebagai seberapa banyak cahaya yang ingin Anda berikan pada warna, di mana 0% berarti tidak ada cahaya (hitam), 50% berarti cahaya 50% (tidak gelap atau ringan) 100% berarti cahaya terang (putih).
Contoh Code:
<!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>
</body>
</html>
Hasil Code:
Nilai RGBA
Nilai warna RGBA merupakan perpanjangan dari nilai warna RGB dengan saluran alfa - yang menentukan keburaman 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):
Contoh Code:
<!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>
Hasil Code:
Nilai HSLA
Nilai warna HSLA merupakan perpanjangan dari nilai warna HSL dengan alpha channel - yang menentukan opacity untuk sebuah 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):
Contoh Code:
<!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>
Hasil Code:
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2