Nama warna
Di HTML, warna dapat ditentukan dengan menggunakan nama warna:
Gray
SlateBlue
Violet
LightGray
Tomato
Orange
DodgerBlue
MediumSeaGreen
HTML mendukung 140 nama warna standar.
Warna Latar Belakang
Kita 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...</p>
Warna teks
Kita juga dapat mengatur warna dari 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
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Batas / Border Berwarna
Kita dapat mengatur warna dari sebuah border: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>
Nilai - nilai Warna
Dalam HTML, warna juga dapat ditentukan dengan menggunakan nilai RGB, nilai-nilai HEX, nilai-nilai HSL, nilai-nilai RGBA, dan nilai-nilai HSLA:Nilai dengan Warna yang Sama dengan "Tomato":
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
Warna "Tomato" dengan tingkat transparan 50%:
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>
Color Picker
Silahkan pilih warna pada color picker berikut untuk mendapatkan nilai - nilai warna tertentu:List Nama Warna lengkap dengan kode hex nya dapat dilihat disini.
Nilai RGB
Di HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus berikut:rgb(merah/red, hijau/green, biru/blue)
Setiap parameter(merah, hijau, dan biru) mendefinisikan intensitas warna dengan nilai antara 0 dan 255.
Misal, 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).
Eksperimen dengan mencampur nilai-nilai RGB di bawah ini:
MERAH
255
HIJAU
0
BIRU
0
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)
Nuansa abu-abu sering didefinisikan menggunakan nilai yang sama untuk ketiga nilai 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)
Nilai HEX
Di HTML, warna dapat ditentukan dengan menggunakan nilai heksadesimal dalam bentuk berikut:#rrggbb
Dimana rr (merah), gg (hijau) dan bb (biru) adalah nilai-nilai heksadesimal antara 00 dan ff (sama seperti desimal 0-255).
Misal, # ff0000 ditampilkan sebagai merah, karena merah diatur untuk nilai tertinggi (ff) dan yang lainnya diatur ke nilai terendah (00).
Contoh
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
Nuansa abu-abu sering didefinisikan menggunakan nilai yang sama untuk semua sumber cahaya 3:
Contoh
#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
#ffffff
Nilai HSL
Di HTML, warna dapat ditentukan dengan menggunakan hue, saturation, dan lightness (HSL) dengan format sbb:hsl(hue, saturation, lightness)
Hue adalah derajat pada roda warna dari 0 sampai 360. 0 adalah merah, 120 adalah hijau, dan 240 adalah biru.
Saturation adalah nilai persentase, 0% berarti warna abu-abu, dan 100% adalah warna penuh.
Lightness juga nilai persentase, 0% hitam, 50% berarti tidak terang atau gelap, 100% berarti putih
Contoh
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Saturation
Saturation dapat digambarkan sebagai intensitas warna.100% adalah warna murni, tidak ada warna abu-abu
50% berarti 50% abu-abu, tetapi kita masih bisa melihat warna.
0% berarti full abu-abu, kita tidak dapat lagi melihat warna.
Contoh
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Lightness
Pencahayaan dari warna dapat dideskripsikan sebagai seberapa banyak cahaya yang ingin kita berikan warna, di mana 0% berarti tidak ada cahaya (hitam/gelap), 50% berarti 50% cahaya (tidak gelap atau terang) 100% berarti pencahayaan penuh (putih).Contoh
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Nuansa abu-abu sering didefinisikan dengan mengatur hue dan saturation ke 0, dan menyesuaikan tingkat terang dari 0% sampai 100% untuk mendapatkan nuansa lebih gelap / terang:
Contoh
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
Nilai RGBA
Nilai warna RGBA merupakan kelanjutan dari nilai warna RGB dengan alpha channel - yang menentukan opasitas warna.Sebuah nilai warna RGBA dispesifikasi dengan format berikut:
rgba(merah, hijau, biru, alpha)
Parameter alpha adalah angka antara 0.0 (sepenuhnya transparan) dan 1.0 (tidak transparan sama sekali):
Contoh
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)
Nilai HSLA
Nilai warna HSLA merupakan perpanjangan dari nilai warna HSL dengan alpha channel - untuk menentukan opasitas warna.Sebuah nilai warna HSLA ditentukan dengan format berikut:
HSLA (hue, saturation, lightness, alpha)
Parameter alpha adalah angka antara 0.0 (sepenuhnya transparan) dan 1.0 (tidak transparan sama sekali):
Contoh
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
