Warna pada HTML ditentukan menggunakan nama warna yang telah ditetapkan, atau nilai-nilai pada RGB, HEX, HSL, RGBA, HSLA.
Memberi Warna HTML dengan Nama Warna
Dalam HTML, warna dapat ditentukan dengan menggunakan nama dari warna.Contoh :
<!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> |
| klik gambar untuk memperbesar |
HTML mendukung 140 nama warna standar .
Warna Latar Belakang atau Background pada HTML
Kamu dapat mengatur warna latar belakang untuk setiap elemen pada HTML seperti berikut:FajarYusuf.Com
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color: DodgerBlue;">FajarYusuf.Com </h1>
<p style="background-color:Tomato;">
fajarYusuf.com dioptimalkan untuk pembelajaran, pengujian, dan pelatihan. Contoh mungkin disederhanakan untuk meningkatkan kemampuan membaca dan pemahaman dasar. Tutorial, referensi, dan contoh selalu ditinjau untuk menghindari kesalahan, tetapi kami tidak dapat menjamin kebenaran penuh dari semua konten. Saat menggunakan situs ini, Anda setuju untuk membaca dan menerima ketentuan penggunaan, cookie, dan kebijakan privasi kami.
</p>
</body>
</html>
 |
| klik gambar untuk memperbesar |
Warna teks pada HTML
Kamu dapat mengatur warna teks:FajarYusuf.Com
fajarYusuf.com dioptimalkan untuk pembelajaran, pengujian, dan pelatihan. Contoh mungkin disederhanakan untuk meningkatkan kemampuan membaca dan pemahaman dasar.
Tutorial, referensi, dan contoh selalu ditinjau untuk menghindari kesalahan, tetapi kami tidak dapat menjamin kebenaran penuh dari semua konten. Saat menggunakan situs ini, Anda setuju untuk membaca dan menerima ketentuan penggunaan, cookie, dan kebijakan privasi kami.
Contoh :
<!DOCTYPE html> <html> <body> <h3 style="color:Tomato;">FajarYusuf.Com</h3> <p style="color:DodgerBlue;">fajarYusuf.com dioptimalkan untuk pembelajaran, pengujian, dan pelatihan. Contoh mungkin disederhanakan untuk meningkatkan kemampuan membaca dan pemahaman dasar. </p> <p style="color:MediumSeaGreen;">Tutorial, referensi, dan contoh selalu ditinjau untuk menghindari kesalahan, tetapi kami tidak dapat menjamin kebenaran penuh dari semua konten. Saat menggunakan situs ini, Anda setuju untuk membaca dan menerima ketentuan penggunaan, cookie, dan kebijakan privasi kami.</p> </body> </html>
 |
| klik gambar untuk memperbesar |
Warna Border pada HTML
Kamu dapat mengatur warna pada border seperti ini :FajarYusuf.Com
FajarYusuf.Com
FajarYusuf.Com
Contoh :<!DOCTYPE html> <html> <body> <h1 style="border: 2px solid Tomato;">FajarYusuf.Com</h1> <h1 style="border: 2px solid DodgerBlue;">FajarYusuf.Com</h1> <h1 style="border: 2px solid Violet;">FajarYusuf.Com</h1> </body> </html>
 |
| klik gambar untuk memperbesar |
Nilai Warna pada HTML
Dalam HTML, warna juga dapat ditentukan dengan menggunakan nilai RGB, nilai-nilai HEX, nilai-nilai HSL, nilai-nilai RGBA, dan nilai-nilai HSLA:Sama seperti nama warna "Tomato":
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Contoh :
<!DOCTYPE html> <html> <body> <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> <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> </body> </html>
 |
| klik gambar untuk memperbesar |
Nilai RGB pada HTML
Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:rgb(red, green, blue)Setiap parameter (red, green, blue) mendefinisikan intensitas warna antara 0 dan 255.
Misalnya, rgb (255, 0, 0) ditampilkan sebagai merah, karena merah diatur untuk 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).
Contoh :
<!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>Dalam HTML, Anda dapat menentukan warna menggunakan nilai RGB.</p>
</body>
</html> |
| klik gambar untuk memperbesar |
Nuansa abu-abu sering didefinisikan menggunakan nilai yang sama untuk semua sumber cahaya 3:
Contoh :
<!DOCTYPE html> <html> <body> <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>Dengan menggunakan nilai yang sama untuk merah, hijau, dan biru, kamu akan mendapatkan nuansa abu-abu yang berbeda.</p> </body> </html>
 |
| klik gambar untuk memperbesar |
Nilai HEX pada HTML
Dalam HTML, warna juga dapat ditentukan dengan menggunakan nilai heksadesimal dalam bentuk:#rrggbbMana rr (merah), gg (hijau) dan bb (biru) adalah nilai-nilai heksadesimal antara 00 dan ff (sama seperti desimal 0-255).
Misalnya, #ff0000 ditampilkan sebagai merah, karena merah diatur untuk nilai tertinggi (ff) dan yang lainnya diatur ke nilai terendah (00).
Contoh :
<!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>Dalam HTML, kamu dapat menentukan warna menggunakan nilai Hex.</p>
</body>
</html> |
| klik gambar untuk memperbesar |
Nuansa abu-abu sering didefinisikan menggunakan nilai yang sama untuk semua sumber :
Contoh :
<!DOCTYPE html> <html> <body> <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>Dengan menggunakan nilai yang sama untuk merah, hijau, dan biru, Anda akan mendapatkan nuansa abu-abu yang berbeda.</p> </body> </html>
 |
| klik gambar untuk memperbesar |
Nilai HSL pada HTML
Dalam HTML, warna dapat ditentukan dengan menggunakan hue, saturation, dan lightness (HSL) berupa:HSL ( hue , saturation , lightnes)Hue adalah gelar pada roda warna dari 0 sampai 360. 0 adalah merah, 120 adalah hijau, dan 240 berwarna biru.
Saturasi adalah nilai persentase, 0% berarti warna abu-abu, dan 100% adalah penuh warna.
Lightness juga persentase, 0% hitam, 50% adalah tidak terang atau gelap, 100% putih
Contoh :
<!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>Dalam HTML, Anda dapat menentukan warna menggunakan nilai HSL.</p>
</body>
</html> |
| klik gambar untuk memperbesar |
Saturasi
Saturasi dapat digambarkan sebagai intensitas warna.100% adalah warna murni, tidak ada warna abu-abu
50% adalah 50% abu-abu, tetapi kamu masih bisa melihat warna.
0% benar-benar abu-abu, kamu tidak dapat lagi melihat warna.
Contoh :
<!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>Dengan warna HSL, sedikit saturasi berarti lebih sedikit warna. 0% benar-benar abu-abu.</p> </body> </html>
 |
| klik gambar untuk memperbesar |
Lightness
Lightness warna dapat digambarkan sebagai seberapa banyak cahaya yang ingin kamu berikan pada warna, di mana 0% berarti tidak ada cahaya (hitam), 50% berarti 50% cahaya (tidak gelap atau terang) 100% berarti cahaya penuh (putih).Contoh :
<!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>Dengan warna HSL, 0% terang berarti hitam, dan 100% terang berarti putih.</p> </body> </html>
 |
| klik gambar untuk memperbesar |
Nuansa abu-abu sering didefinisikan dengan menetapkan warna dan saturasi ke 0, dan menyesuaikan tingkat terang dari 0% sampai 100% untuk mendapatkan lebih gelap / nuansa cahaya:
Contoh :
<!DOCTYPE html> <html> <body> <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>Dengan warna HSL, nuansa abu-abu dibuat dengan mengatur saturasi ke 0%, dan menyesuaikan cahaya sesuai seberapa gelap / terang warna abu-abu seharusnya.</p> </body> </html>
 |
| klik gambar untuk memperbesar |
Nilai RGBA pada HTML
RGBA nilai warna merupakan perpanjangan dari nilai warna RGB dengan alpha channel - yang menentukan opacity untuk warna.Sebuah nilai warna RGBA ditentukan dengan:
RGBA ( merah, hijau , biru, alpha )Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):
Contoh :
<!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>Anda dapat membuat warna transparan dengan menggunakan nilai warna RGBA.</p> </body> </html>
 |
| klik gambar untuk memperbesar |
Nilai HSLA pada HTML
HSLA nilai warna merupakan perpanjangan dari nilai warna HSL dengan alpha channel - yang menentukan opacity untuk warna.Sebuah nilai warna HSLA ditentukan dengan:
HSLA ( hue, saturation , lightness, alpha )
Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):
Contoh :
<!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>Kamu dapat membuat warna transparan dengan menggunakan nilai warna HSLA.</p> </body> </html>
 |
| klik gambar untuk memperbesar |
Comments