Belajar HTML Part 11 - Menambahkan Warna (Color) di HTML

Dalam penggunaan warna pada HTML, telah ditetapkan beberapa ketentuan seperti penggunaan HTML warna dengan menuliskan nama warna yang telah ditetapkan, atau nilai-nilai RGB, HEX, HSL, RGBA, HSLA.

Nama warna

Dalam HTML, pewarnaan bisa juga ditulis dengan menggunakan nama 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>

Hasilnya:

HTML mendukung 140 standar nama warna.

Background-color
Anda dapat mengatur warna latar belakang untuk elemen HTML dengan menggunakan background-color:
Contoh

<!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>

Hasilnya:

Text Color (Warna teks)
Anda dapat mengatur warna teks dengan menambahkan style dalam kode HTML.

Contoh

<!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>

Hasilnya:

Border Color
Anda dapat mengatur warna border/garis dengan menggunakan border-color.
Contoh

<!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>

Hasilnya:

Value (Nilai) “Color”
Dalam HTML, warna juga dapat ditentukan dengan menggunakan nilai RGB, nilai-nilai HEX, nilai-nilai HSL, nilai-nilai RGBA, dan nilai-nilai HSLA.

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>

Hasilnya:

Berikut adalah penjelasan dari masing-masing "value color" tersebut:

1. Value RGB
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, kita bisa menentukan warna menggunakan nilai RGB</p>

</body>
</html>

Berikut adalah warna bernuansa abu-abu dengan beberapa jenis nuansa yang berbeda:
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 warna merah, hijau, dan biru, kita akan mendapatkan berbagai warna abu-abu</p>

</body>
</html>

2. Value HEX
Dalam HTML, warna dapat ditentukan dengan menggunakan nilai heksadesimal dalam bentuk:
#rrggbb
Dimana rr (red), gg (green) dan bb (blue) 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, kita bisa menentukan warna dengan menggunakan value HEX</p>

</body>
</html>

Berikut adalah warna bernuansa abu-abu dengan beberapa jenis nuansa yang berbeda:
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 warna merah, hijau, dan biru, kita akan mendapatkan berbagai warna abu-abu</p>

</body>
</html>

3. Value HSL
Dalam HTML, warna bisa juga ditentukan dengan menggunakan hue, saturation, dan lightness (HSL):
HSL ( hue , saturation , lightness )
Hue adalah derajat 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 warna penuh.

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, kita bisa menentukan warna dengan menggunakan value HSL</p>

</body>
</html>

4. Satiration
Saturation dapat menggambarkan sebagai intensitas warna.
100% adalah warna murni, tidak ada warna abu-abu
50% adalah 50% abu-abu, tetapi kita masih bisa melihat warna lain.
0% benar-benar abu-abu, kita tidak dapat lagi melihat warna lain.
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, saturation berkurang berarti warna berkurang. 0% benar-benar abu-abu.</p>

</body>
</html>

5. Lightness
Warna dari Lightness dapat digambarkan sebagai seberapa banyak kita ingin memberikan cahaya/lightness pada warna, di mana 0% berarti tidak ada cahaya (hitam), 50% berarti 50% cahaya (tidak gelap dan tidak terlalu terang) 100% berarti memiliki 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% lightness berarti hitam, dan 100% lightness berarti putih</p>

</body>
</html>

Untuk mendapatkan warna bernuansa abu-abu dengan cara menetapkan warna dan saturasi ke 0, dan menyesuaikan tingkat terangnya dari 0% sampai 100% untuk mendapatkan nuansa agak gelap / nuansa terang:

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 pengaturan saturation sampai 0%, dan lightnes menyesuaikan sesuai dengan seberapa gelap / terang warna yang abu-abu</p>

</body>
</html>

6. Value RGBA
Nilai warna RGBA merupakan perpanjangan dari nilai warna RGB ditambah dengan Alpha channel yang menentukan opacity 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>Kita isa membuat warna transparan dengan menggunakan value RGBA</p>

</body>
</html>

7. Value HSLA
Nilai warna HSLA merupakan perpanjangan dari nilai warna HSL ditambah dengan Alpha channel yang menentukan opacity warna.

Sebuah nilai warna HSLA ditentukan dengan:
HSLA ( hue, saturation , ringan, 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>Kita bisa menggunakan warna transparan dengan mengugunakan value HSLA</p>

</body>
</html>

Demikian pembahasan tentang warna atau color pada HTML.

Semoga bemanfaat!

Sumber: https://www.w3schools.com