Warna HTML - Purwana Tekno, Software Engineer
    Media Belajar membuat Software Aplikasi, Website, Game, & Multimedia untuk Pemula...

Post Top Ad

Minggu, 01 Januari 2017

Warna HTML

Warna HTML dispesifikasikan menggunakan nama warna yang ditetapkan, atau nilai-nilai RGB, HEX, HSL, RGBA, HSLA.

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)

Post Top Ad