HTML Color atau Warna pada HTML

HTML Color atau Warna pada HTML

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>
Kamu bisa mencobanya klik disini, Hasil :
Memberi Warna HTML dengan Nama Warna
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>
Hasil :
HTML Color atau Warna pada 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>
Hasil :
Warna teks pada 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>
Hasil :
Warna Border pada 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%)
Sama seperti nama warna "Tomato", tetapi 50% transparan:
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>
Hasil :
Nilai Warna pada 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>
Hasil :
Nilai RGB pada 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>
Hasil :
Nilai RGB pada HTML
klik gambar untuk memperbesar

Nilai HEX pada HTML

Dalam HTML, warna juga dapat ditentukan dengan menggunakan nilai heksadesimal dalam bentuk:
#rrggbb
Mana 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>
Hasil :
Nilai HEX pada 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>
Hasil :
Nilai HEX pada 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>
Hasil :
HTML Color atau Warna pada 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>
Hasil :
Nilai HSL pada 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>
Hasil :
lightness 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>
Hasil :
Nilai HSL pada 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>
Hasil :
Nilai RGBA pada 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>
Hasil :
Nilai HSLA pada HTML
klik gambar untuk memperbesar

Disqus Comments