Kode Warna HTML script

hasil pencarian Kode Warna HTML script

kode Script membuat table Warna HTML script terbaru!

Salin dan tempel Kode Warna HTML script ini di blog kamu,lihat kode script di bawah..

Kode Warna HTML — Penjelasan & Contoh

Keterangan singkat: kode warna HTML digunakan untuk menentukan warna elemen di halaman web. Berikut ringkasan jenis-jenis kode warna dan contoh pemakaian.

Jenis-jenis Kode Warna

Kode Heksadesimal — format #RRGGBB. Setiap pasangan RR, GG, BB adalah nilai heksadesimal 00 sampai FF (0–255).

Nama Warna — nama yang didukung HTML/CSS (sekitar 147 nama di HTML5). Contoh: red, blue.

RGB — format rgb(R, G, B) dengan nilai 0–255. Contoh: rgb(255, 0, 0).

RGBA — RGB + alpha (transparansi): rgba(R, G, B, A), A antara 0 (transparan) sampai 1 (solid).

HSL — format hsl(H, S%, L%): H (0–360 derajat), S dan L persentase.

HSLA — HSL + alpha: hsla(H, S%, L%, A).

Contoh & Cara Penggunaan

1) Menggunakan pada atribut style

<p style="color: #FF0000;">Teks merah</p>
<div style="background-color: blue;">Latar biru</div>

2) Menggunakan di file CSS (direkomendasikan)

/* style.css */
h1{ color: #0a74da; }
.header{ background-color: rgb(250,250,250); }

3) Contoh <font> (metode lama — tidak direkomendasikan)

<font color="#FF0000">Teks merah</font>

Catatan: tag <font> sudah usang. Gunakan CSS modern.

Contoh Warna — Heks, Nama, RGB, HSL

#FF0000
red / rgb(255,0,0) / hsl(0,100%,50%) #00FF00
lime / rgb(0,255,0) #0000FF
blue / rgb(0,0,255) #FFD700
gold #333333
dark gray

Halo, ini Judul Berwarna

  Paragraf dengan background lembut.

Teks pakai rgb()

  Latar pakai rgba(0,0,0,0.05)

Teks pakai hsl()

Tip: Gunakan file CSS terpisah jika ingin mengelola banyak warna dan gaya dengan rapi.

Penjelasan Singkat tentang Pilihan

• Heksadesimal: paling populer, ringkas, mudah dibaca untuk developer.
• Nama warna: mudah diingat tetapi terbatas jumlahnya.
• RGB/RGBA: berguna ketika Anda bekerja dengan nilai numerik dan ingin alpha.
• HSL/HSLA: mudah untuk mengatur variasi kecerahan atau saturasi (bagus untuk tema dinamis).

https://gowmovie.blogspot.com/2025/10/kode-warna-html.html

klik untuk menyalin

👇

<table border="1" style="border-collapse: collapse; width: 100%; text-align: left; font-family: Arial, sans-serif;"> <thead> <tr style="background-color: #4CAF50; color: white; text-align: center;"> <th>Nama Warna</th> <th>Hex</th> <th>RGB</th> <th>Contoh Warna</th> </tr> </thead> <tbody> <tr> <td>Black</td> <td>#000000</td> <td>rgb(0, 0, 0)</td> <td style="background-color: #000000; color: white;">&nbsp;</td> </tr> <tr style="background-color: #f2f2f2;"> <td>White</td> <td>#FFFFFF</td> <td>rgb(255, 255, 255)</td> <td style="background-color: #FFFFFF;">&nbsp;</td> </tr> <tr> <td>Red</td> <td>#FF0000</td> <td>rgb(255, 0, 0)</td> <td style="background-color: #FF0000;">&nbsp;</td> </tr> <tr style="background-color: #f2f2f2;"> <td>Green</td> <td>#00FF00</td> <td>rgb(0, 255, 0)</td> <td style="background-color: #00FF00;">&nbsp;</td> </tr> <tr> <td>Blue</td> <td>#0000FF</td> <td>rgb(0, 0, 255)</td> <td style="background-color: #0000FF;">&nbsp;</td> </tr> <tr style="background-color: #f2f2f2;"> <td>Yellow</td> <td>#FFFF00</td> <td>rgb(255, 255, 0)</td> <td style="background-color: #FFFF00;">&nbsp;</td> </tr> <tr> <td>Cyan</td> <td>#00FFFF</td> <td>rgb(0, 255, 255)</td> <td style="background-color: #00FFFF;">&nbsp;</td> </tr> <tr style="background-color: #f2f2f2;"> <td>Magenta</td> <td>#FF00FF</td> <td>rgb(255, 0, 255)</td> <td style="background-color: #FF00FF;">&nbsp;</td> </tr> <tr> <td>Gray</td> <td>#808080</td> <td>rgb(128, 128, 128)</td> <td style="background-color: #808080;">&nbsp;</td> </tr> <tr style="background-color: #f2f2f2;"> <td>Light Gray</td> <td>#D3D3D3</td> <td>rgb(211, 211, 211)</td> <td style="background-color: #D3D3D3;">&nbsp;</td> </tr> <tr> <td>Dark Gray</td> <td>#A9A9A9</td> <td>rgb(169, 169, 169)</td> <td style="background-color: #A9A9A9;">&nbsp;</td> </tr> <tr style="background-color: #f2f2f2;"> <td>Orange</td> <td>#FFA500</td> <td>rgb(255, 165, 0)</td> <td style="background-color: #FFA500;">&nbsp;</td> </tr> <tr> <td>Brown</td> <td>#A52A2A</td> <td>rgb(165, 42, 42)</td> <td style="background-color: #A52A2A;">&nbsp;</td> </tr> <tr style="background-color: #f2f2f2;"> <td>Purple</td> <td>#800080</td> <td>rgb(128, 0, 128)</td> <td style="background-color: #800080;">&nbsp;</td> </tr> <tr> <td>Pink</td> <td>#FFC0CB</td> <td>rgb(255, 192, 203)</td> <td style="background-color: #FFC0CB;">&nbsp;</td> </tr> <tr style="background-color: #f2f2f2;"> <td>Gold</td> <td>#FFD700</td> <td>rgb(255, 215, 0)</td> <td style="background-color: #FFD700;">&nbsp;</td> </tr> <tr> <td>Silver</td> <td>#C0C0C0</td> <td>rgb(192, 192, 192)</td> <td style="background-color: #C0C0C0;">&nbsp;</td> </tr> <tr style="background-color: #f2f2f2;"> <td>Teal</td> <td>#008080</td> <td>rgb(0, 128, 128)</td> <td style="background-color: #008080;">&nbsp;</td> </tr> <tr> <td>Indigo</td> <td>#4B0082</td> <td>rgb(75, 0, 130)</td> <td style="background-color: #4B0082;">&nbsp;</td> </tr> </tbody> </table>

🕵️ Preview Code disini