SIAP – Sistem Informasi Anak Pintar

Pengenalan HTML 13
Mengenal Warna dalam HTML & CSS

oleh: Suryo Adhy Chandra, ST

Warna adalah salah satu elemen terpenting dalam desain sebuah halaman web. Dengan warna yang tepat, tampilan website bisa terlihat lebih menarik, mudah dibaca, dan nyaman dilihat.

Dalam HTML dan CSS, ada beberapa cara untuk menuliskan warna. Kita akan mempelajarinya satu per satu!

1. Warna Dasar (Nama Warna)

Cara paling sederhana adalah menulis nama warnanya langsung dalam bahasa Inggris. CSS sudah mengenal ratusan nama warna bawaan.

/* Contoh penggunaan pada warna teks dan background */ color: red; background-color: blue; border: 2px solid green;

Berikut warna-warna dasar yang paling sering digunakan:

red

green

blue

yellow

orange

purple

pink

cyan

white

black

gray

brown

Kelebihan: mudah ditulis dan mudah dibaca.
Kekurangan: pilihan terbatas dan tidak bisa mengatur tingkat kecerahan atau transparansi secara presisi.

2. Warna dengan rgb()

rgb() menggunakan 3 angka untuk membuat warna. Setiap angka mewakili intensitas cahaya warna Red (Merah), Green (Hijau), dan Blue (Biru). Nilai masing-masing antara 0 sampai 255.

background-color: rgb(255, 0, 0); /* merah murni */ background-color: rgb(0, 255, 0); /* hijau murni */ background-color: rgb(0, 0, 255); /* biru murni */ background-color: rgb(0, 0, 0); /* hitam */ background-color: rgb(255, 255, 255);/* putih */ background-color: rgb(128, 128, 128);/* abu-abu */

Logikanya seperti ini — kita mencampur tiga lampu berwarna:

rgb(255, 0, 0)
Merah = penuh, Hijau = 0, Biru = 0

rgb(255, 165, 0)
Merah + sedikit Hijau = Oranye

rgb(75, 0, 130)
Merah redup + Biru = Ungu

rgb(0, 128, 128)
Hijau + Biru = Teal

rgb(255, 255, 0)
Merah + Hijau = Kuning

rgb(200, 200, 200)
R=G=B → abu-abu terang

Tips: Kalau ketiga nilai sama (misal rgb(100,100,100)), hasilnya selalu warna abu-abu.
Semakin besar angkanya, semakin terang abu-abunya. rgb(0,0,0) = hitam, rgb(255,255,255) = putih.

3. Warna dengan rgba() — ditambah Transparansi

rgba() sama persis seperti rgb(), tapi ada satu nilai tambahan di akhir yaitu Alpha (a). Alpha mengatur tingkat transparansi / kejernihan warna tersebut.

/* rgba(merah, hijau, biru, alpha) */ /* alpha: 0 = tidak terlihat, 1 = terlihat penuh */ background-color: rgba(255, 0, 0, 1); /* merah, tidak transparan */ background-color: rgba(255, 0, 0, 0.5); /* merah, setengah transparan */ background-color: rgba(255, 0, 0, 0.1); /* merah, hampir tidak terlihat */ background-color: rgba(0, 0, 0, 0.3); /* hitam transparan (bayangan) */

Perhatikan perbedaan nilai alpha pada warna yang sama (biru):

alpha = 1
(penuh)

alpha = 0.8

alpha = 0.6

alpha = 0.4

alpha = 0.2

alpha = 0
(transparan)

rgba sering dipakai untuk:

Membuat bayangan (box-shadow) yang tidak terlalu pekat
Membuat overlay semi-transparan di atas gambar
Efek background yang lembut / soft

Ingat: Huruf a pada rgba = Alpha, bukan warna baru. Alpha hanya mengontrol seberapa "tembus pandang" warnanya. Nilai 0 = transparan total, nilai 1 = penuh (tidak transparan sama sekali).

4. Warna dengan Tanda Pagar # (Hexadecimal)

Cara penulisan warna paling umum di dunia web adalah menggunakan kode heksadesimal yang diawali tanda #. Formatnya adalah #RRGGBB — dua karakter untuk merah, dua untuk hijau, dua untuk biru.

/* Format: #RRGGBB (masing-masing 2 karakter, nilai 00 sampai ff) */ background-color: #ff0000; /* merah murni */ background-color: #00ff00; /* hijau murni */ background-color: #0000ff; /* biru murni */ background-color: #000000; /* hitam */ background-color: #ffffff; /* putih */ background-color: #3b82f6; /* biru bootstrap */ background-color: #f59e0b; /* kuning amber */

Kode hex menggunakan angka 0–9 dan huruf a–f (total 16 simbol, makanya disebut heksadesimal). Nilai 00 artinya 0 dan ff artinya 255 — sama dengan rgb.

Kode Hex	Setara rgb()	Warna
`#ff0000`	`rgb(255, 0, 0)`
`#00ff00`	`rgb(0, 255, 0)`
`#0000ff`	`rgb(0, 0, 255)`
`#3b82f6`	`rgb(59, 130, 246)`
`#f59e0b`	`rgb(245, 158, 11)`
`#6d28d9`	`rgb(109, 40, 217)`

Untuk mendapatkan kode hex warna yang kita inginkan, kita bisa menggunakan color picker di browser (klik kanan → Inspect → klik kotak warna) atau website seperti coolors.co atau colorhunt.co.

Shorthand: Jika setiap pasang karakter sama, bisa dipersingkat menjadi 3 karakter.
Contoh: #ff0000 → #f00, #ffffff → #fff, #000000 → #000

5. Tone Warna dalam Styling HTML

Tone warna adalah variasi kecerahan dari satu warna dasar — dari yang paling terang hingga paling gelap. Dalam dunia desain web, satu warna biasanya punya banyak tingkatan (disebut shade).

Framework populer seperti Tailwind CSS dan Bootstrap menggunakan sistem penomoran tone, biasanya dari 50 (paling terang) hingga 900 (paling gelap).

Contoh tone warna Biru:

#eff6ff
50

#dbeafe
100

#bfdbfe
200

#93c5fd
300

#60a5fa
400

#3b82f6
500

#2563eb
600

#1d4ed8
700

#1e40af
800

#1e3a8a
900

Contoh tone warna Hijau:

#f0fdf4
50

#dcfce7
100

#bbf7d0
200

#86efac
300

#4ade80
400

#22c55e
500

#16a34a
600

#15803d
700

#166534
800

#14532d
900

Contoh tone warna Merah:

#fef2f2
50

#fee2e2
100

#fecaca
200

#fca5a5
300

#f87171
400

#ef4444
500

#dc2626
600

#b91c1c
700

#991b1b
800

#7f1d1d
900

Kapan pakai tone yang mana?

Tone	Kegunaan Umum
50 – 100	Background halaman, area yang perlu warna sangat lembut
200 – 300	Border, garis pemisah, badge ringan
400 – 500	Warna utama tombol, link, highlight
600 – 700	Hover effect, warna saat tombol ditekan
800 – 900	Teks di atas background terang, heading penting

Ringkasan cara penulisan warna dalam CSS:

red, blue, green → nama warna langsung, praktis tapi terbatas
rgb(255, 0, 0) → campuran angka merah-hijau-biru (0–255)
rgba(255, 0, 0, 0.5) → seperti rgb + alpha (transparansi 0–1)
#ff0000 → kode heksadesimal, paling umum dipakai di dunia web
Tone 50–900 → sistem variasi kecerahan yang dipakai framework modern

← Kembali Ke Daftar Pelajaran HTML