Membuat Tabel Warna HTML & CSS

Posted by on
Dalam pewarnaan HTML dan CSS ada 16 warna dasar dan standar(dalam bentuk nama) yang sering digunakan yaitu :

  1. Black
  2. Silver
  3. Gray
  4. White
  5. Maroon
  6. Red
  7. Purple
  8. Fuchsia
  9. Green
  10. Lme
  11. Olive
  12. Yellow
  13. Navy
  14. Blue
  15. Teal
  16. Aqua
Mari kita membuat kode HTML dan CSS yang membentuk tabel dari warna-warna di atas !

Ketikkanlah script di bawah ini :

<!DOCTYPE HTML>
<html>
<head>
<title>bab 3 lat 17</title>
<style type="text/css">

h1 { border-style: ridge;
border-color: rgb(255, 0, 0);
font-size: 24pt;
border-width: 10px;
float: center;
}

h2 { border-style: groove;
border-width: 15px;
border-color: rgb(121, 32, 22);
font-color: rgb(123, 24, 22);
background-color: rgb(22, 66, 77);
padding: 40px;
font-size: 40pt;
float: center;
font-family: Brush Script, Moonlight, Clarendon;
}
</style>
</head>

<body bgcolor="#FF8337" text="#000000">

<h2>PETA WARNA CSS</h2>

<table border="15" cellspacing="4" cellpadding="10"
  bgcolor="#00FFFF" bordercolor="#779944" align="center"
  width="100%">
<tr>
<th colspan="8">
<font size="6"><h1>16 Warna Berdasarkan Nama</h1></font>
</th>
</tr>

<tr bgcolor="755f11">
<th>Warna></th>
<th>HEX<br>RRGGBB</th>
<th>Fungsi<br>RGB(r#,g#,b#)</th>
<th>Fungsi<br>RGB(r%,g%,b%)</th>
<th>Warna></th>
<th>HEX<br>RRGGBB</th>
<th>Fungsi<br>RGB(r#,g#,b#)</th>
<th>Fungsi<br>RGB(r%,g%,b%)</th>
</tr>

<tr>
<th></th>
</tr>

<tr>
<td bgcolor="#000000"><font color="#ffffff">Black</font></td>
<td bgcolor="#000000"><font color="ffffff">000000</font></td>
<td bgcolor="#000000"><font color="#ffffff">(0,0,0)</font></td>
<td bgcolor="#000000"><font color="#ffffff">(0%,0%,0%)</font></td>
<td bgcolor="#008000"><font color="#ffffff">Green</font></td>
<td bgcolor="#008000"><font color="ffffff">008000</font></td>
<td bgcolor="#008000"><font color="#ffffff">(0,127,0)</font></td>
<td bgcolor="#008000"><font color="#ffffff">(0%,50%,0%)</font></td>
</tr>

<tr>
<td bgcolor="#c0c0c0">Silver</td>
<td bgcolor="#c0c0c0">c0c0c0</td>
<td bgcolor="#c0c0c0">(207,207,207)</td>
<td bgcolor="#c0c0c0">(80%,80%,80%)</td>
<td bgcolor="#00ff00">Lime</td>
<td bgcolor="#00ff00">00ff00</td>
<td bgcolor="#00ff00">(0,255,0)</td>
<td bgcolor="#00ff00">(0%,100%,0%)</td>
</tr>

<tr>
<td bgcolor="#808080">Gray</td>
<td bgcolor="#808080">808080</td>
<td bgcolor="#808080">(127,127,127)</td>
<td bgcolor="#808080">(50%,50%,50%)</td>
<td bgcolor="#808000">Olive</td>
<td bgcolor="#808000">808000</td>
<td bgcolor="#808000">(127,127,0)</td>
<td bgcolor="#808000">(50%,50%,0%)</td>
</tr>

<tr>
<td bgcolor="#ffffff">White</td>
<td bgcolor="#ffffff">ffffff</td>
<td bgcolor="#ffffff">(255,255,255)</td>
<td bgcolor="#ffffff">(100%,100%,100%)</td>
<td bgcolor="#ffff00">Yellow</td>
<td bgcolor="#ffff00">ffff00</td>
<td bgcolor="#ffff00">(255,255,0)</td>
<td bgcolor="#ffff00">(100%,100%,0%)</td>
</tr>


<tr>
<td bgcolor="#800000">Maroon</td>
<td bgcolor="#800000">800000</td>
<td bgcolor="#800000">(127,0,0)</td>
<td bgcolor="#800000">(50%,0%,0%)</td>
<td bgcolor="#000080"><font color="#ffffff">Navy</font></td>
<td bgcolor="#000080"><font color="#ffffff">000080</font></td>
<td bgcolor="#000080"><font color="#ffffff">(0,0,127)</font></td>
<td bgcolor="#000080"><font color="#ffffff">(0%,0%,50%)</font></td>
</tr>


<tr>
<td bgcolor="#ff0000">Red</td>
<td bgcolor="#ff0000">ff0000</td>
<td bgcolor="#ff0000">(255,0,0)</td>
<td bgcolor="#ff0000">(100%,0%,0%)</td>
<td bgcolor="#0000ff"><font color="ffffff">Blue</font></td>
<td bgcolor="#0000ff"><font color="ffffff">0000ff</font></td>
<td bgcolor="#0000ff"><font color="ffffff">(0,0,255)</font></td>
<td bgcolor="#0000ff"><font color="ffffff">(0%,0%,100%)</font></td>
</tr>


<tr>
<td bgcolor="#800080">Purple</td>
<td bgcolor="#800080">800080</td>
<td bgcolor="#800080">(127,0,127)</td>
<td bgcolor="#800080">(50%,0%,50%)</td>
<td bgcolor="#008080">Teal</td>
<td bgcolor="#008080">008080</td>
<td bgcolor="#008080">(0,127,127)</td>
<td bgcolor="#008080">(0%,50%,50%)</td>
</tr>


<tr>
<td bgcolor="#ff00ff">Fucshia</td>
<td bgcolor="#ff00ff">ff0ff</td>
<td bgcolor="#ff00ff">(255,0,255)</td>
<td bgcolor="#ff00ff">(100%,0%,100%)</td>
<td bgcolor="#00ffff">Aqua</td>
<td bgcolor="#00ffff">00ffff</td>
<td bgcolor="#00ffff">(0,255,255)</td>
<td bgcolor="#00ffff">(0%,100%,100%)</td>
</tr>

</body>
</html>

Hasilnya akan menjadi seperti ini :

Tabel Warna

Jika ada script yang kurang jelas bisa ditanyakan di kolom komentar atau bisa dilihat di postingan-postingan sebelumnya dalam label HTML & CSS.Semoga ilmu yang dibagikan dapat bermanfaat.Terima kasih !

Comments

  1. S_rMarch 13, 2020 at 9:05 AM

    Terimakasih postingan yang anda bagikan sangat bagus, Dan penggunaan serial katanya mudah dipahami. Terus berkarya ya ,jadikan blog anda sebagai share ilmu bagi semua orng. Perkenalkan nama Saya : Shofi Rachmawati, NIM : 1922500133, Dan link kampus Saya : https://www.atmaluhur.ac.id

    ReplyDelete
  2. Ricki Tri PutraMarch 15, 2020 at 4:06 AM

    artikel nya mantap gan. terima kasih atas ilmunya. semoga update terus artikelnya, gak sabar lagi untuk di tungguin yang terbarunya. materinya dikemas dengan baik, mudah dimengerti, dan rapih. Perkenalkan nama saya Ricki Tri Putra, mahasiswa dari STMIK Atma Luhur jurusan Sistem Informasi. kunjungin juga ya web kampus saya di : https://www.atmaluhur.ac.id/ Terima kasih, Salam sukses bagi kita semua.

    ReplyDelete
  3. rian cahya fajarApril 5, 2020 at 4:50 PM

    Terimakasih atas artikel nya, Artikel ini sangat bermanfaat untuk saya yang sedang belajar membuat tabel warna html. semoga artikel ini berkembang dengan pesat untuk bisa bermanfaat, perkenalkan nama saya Rian Cahya Fajar, kunjungi halaman web kampus kami di : https://www.atmaluhur.ac.id/

    ReplyDelete
  4. UnknownApril 5, 2020 at 6:59 PM

    Mantap min, artikelnya menarik dan membantu saya dalam proses pembelajaran materi yang akan saya pelajari. penyajiannya mudah saya pahami . terimakasih banyak min atas ilmunya semoga bermanfaat dan terus berkembang dalam membuat artikel-artikel yang lainnya. Perkenalkan Nama saya Meilita sari, dan ini website kampusnya https://www.atmaluhur.ac.id/ thnkyu :)

    ReplyDelete
  5. Ardo Jordi SetiawanApril 5, 2020 at 7:45 PM

    Terimakasih kak, artikel ini sangat membantu saya yang sedang mempelajari dan pemrograman web semangat kak untuk membuat artikel yang lebih baik lagi dan lebih semangat lagi.
    Nama saya Ardo Jordi Setiawan
    https://www.atmaluhur.ac.id/

    ReplyDelete
  6. FrostbrandApril 6, 2020 at 4:41 AM

    artikel yang kakak buat sangat mudah dipahami dan berguna bagi saya yang baru belajar tentang css dan html, semoga web kaka makin maju dan dapat membantu orang lain seperti saya. perkenalkan nama saya reza pahlevi. kunjungi juga website kampus kami di https://www.atmaluhur.ac.id/

    ReplyDelete
  7. UnknownApril 6, 2020 at 5:15 AM

    Assalamualaikum kak, terimakasih artikelnya kak, artikelnya sangat bagus, dan bisa di mengerti, akhirnya saya dapat artikel kakak, dan mudah dipahami bagi saya dan pengunjung web kakak, semangat trus dalam membuat artikenya.
    Perkenalkan nama saya Dela Novitasari dari kampus STMIK ATMA LUHUR PANGKALPINANG, web kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  8. UnknownJune 20, 2020 at 6:10 PM

    Terimah kasih artikelnya sangat membantu kami terutama mahasiswa yang sedang belajar tentang web saya mahasiswa dari stmik atmaluhur dengan nim 1922500120 Sri Dewayanti, ini situs kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete

Post a Comment