[Belajar HTML #12] Warna HTML - RGB - Hex - Warna Border, Teks, Background

Warna HTML

---

Warna HTML ditentukan menggunakan nama warna yang telah ditentukan, atau nilai RGB, HEX, HSL, RGBA, HSLA.

---

Nama Warna

Dalam HTML, warna dapat ditentukan dengan menggunakan nama warna:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Cobalah sendiri

HTML mendukung 140 nama warna standar.

---

Warna latar belakang

Anda dapat mengatur warna latar belakang untuk elemen HTML:

Hello World

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.

Contoh:

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

Cobalah sendiri

Warna teks

Anda dapat mengatur warna teks:

Hello World

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.

Contoh:

<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet....</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam....</p>

Cobalah sendiri

---

Warna Border / Perbatasan

Anda dapat mengatur warna batas:

Hello World

Hello World

Hello World

Contoh:

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

Cobalah sendiri

---

Nilai Warna

Dalam HTML, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA:

Sama seperti nama warna "Tomat":

rgb (255, 99, 71)

# ff6347

hsl (9, 100%, 64%)

Sama seperti nama warna "Tomat", tetapi 50% transparan:

rgba (255, 99, 71, 0.5)

hsla (9, 100%, 64%, 0,5)

Contoh:

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Cobalah sendiri

---

Nilai RGB

Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:

rgb ( merah, hijau , biru )

Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna antara 0 dan 255.

Misalnya, rgb (255, 0, 0) ditampilkan sebagai merah, karena merah diatur ke nilai tertinggi (255) dan yang lainnya diatur ke 0.

Untuk menampilkan hitam, atur semua parameter warna ke 0, seperti ini: rgb (0, 0, 0).

Untuk menampilkan putih, atur semua parameter warna ke 255, seperti ini: rgb (255, 255, 255).

Contoh:

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Cobalah sendiri

Nuansa abu-abu sering didefinisikan menggunakan nilai yang sama untuk semua 3 sumber cahaya:

Contoh:

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

Cobalah sendiri

---

Nilai HEX

Dalam HTML, warna dapat ditentukan menggunakan nilai heksadesimal dalam bentuk:

# rrggbb

Di mana rr (merah), gg (hijau) dan bb (biru) adalah nilai heksadesimal antara 00 dan ff (sama dengan desimal 0-255).

Kode Warna HTML

Share this post