Bagaimana Komputer Membuat Warna: RGB, HEX, dan Bilangan Biner

#FF0000. #00FF00. #0000FF. Notasi yang mungkin pernah Anda temui dalam mockup desain atau kode. Terlihat seperti sandi rahasia atau kode game. Sebenarnya, itu adalah nama sebuah warna.

#FF0000

#00FF00

#0000FF

Dari atas ke bawah: merah, hijau, biru. Itulah nama-nama yang digunakan komputer untuk menyebut warna. Mari kita telusuri dari mana notasi ini berasal.

RGB — Tiga Huruf Pembentuk Warna

Red, Green, Blue. Tiga warna primer cahaya. Semua warna yang kita lihat terbentuk dari perpaduan ketiganya dalam proporsi tertentu.

Kita Melihat RGB Setiap Hari

Hampir di mana pun ada layar, di sana ada RGB.

Monitor / TV — setiap piksel terdiri dari tiga titik: merah, hijau, dan biru
Layar smartphone — struktur yang sama, dengan piksel yang lebih kecil
LED keyboard gaming — setiap tombol memiliki tiga LED: R, G, dan B
Lampu casing PC — strip RGB mengirimkan sinyal RGB itu sendiri

Jika layar diperbesar cukup dekat, hal itu terlihat jelas. Merah, hijau, biru. Hanya itu. Jutaan titik RGB kecil berkumpul membentuk satu frame yang kita lihat.

Warna Dibuat dengan Mencampur

Setiap kanal RGB memiliki intensitas dari 0 hingga 255.

RGB(255, 0, 0) — hanya merah maksimal → merah murni
RGB(0, 255, 0) — hanya hijau maksimal → hijau murni
RGB(255, 255, 0) — merah + hijau → kuning
RGB(0, 0, 0) — semua padam → hitam
RGB(255, 255, 255) — semua maksimal → putih

Merah dan hijau menghasilkan kuning mungkin terasa tidak intuitif, namun ini adalah percampuran cahaya. Aturannya berbeda dari mencampur cat di pelajaran seni (merah + hijau = cokelat). Cahaya semakin terang saat ditambahkan, dan jika semua digabung hasilnya putih.

Geser ketiga slider di bawah untuk membuktikannya sendiri.

#FF5733

RGB · 255 · 87 · 51

R 255 11111111

G 87 01010111

B 51 00110011

Angka 8 digit di ujung kanan adalah representasi biner kanal tersebut. Geser slider dan angka itu ikut berubah. Bagaimana 0 dan 1 bisa menghasilkan 256 nilai — itulah topik berikutnya.

Mengapa Tepat 0 hingga 255?

Komputer hanya mengenal 0 dan 1. Satu digit yang menampung 0 atau 1 disebut bit. Semakin banyak bit, semakin banyak nilai yang bisa direpresentasikan — bertambah dua kali lipat setiap kali jumlah bit bertambah satu.

0/1

1 bit

= 2 nilai

0/10/1

2 bit

= 4 nilai

0/10/10/10/1

4 bit

= 16 nilai

0/10/10/10/1 0/10/10/10/1

8 bit

= 256 nilai ← satu kanal RGB

8 bit = 1 byte. Satu warna memiliki tiga kanal RGB, sehingga totalnya 3 byte = 24 bit. 24 bit dapat merepresentasikan sekitar 16,7 juta warna — cukup bagi mata manusia untuk membedakannya, sehingga 1 byte menjadi standar untuk satu kanal.

Membaca Bilangan Biner Sendiri

Setiap posisi memiliki nilai tetap. Dari kiri ke kanan: 128, 64, 32, 16, 8, 4, 2, 1 — pangkat dari 2.

1282⁷

642⁶

322⁵

162⁴

82³

42²

22¹

12⁰

Jumlahkan semua nilai dari posisi yang bernilai 1, dan hasilnya adalah angka desimal.

Contoh 1

0128

064

032

016

8 + 2 = 10

Contoh 2

1128

164

132

116

128 + 64 + 32 + 16 = 240

Contoh 3 — semua 8 digit bernilai 1

1128

164

132

116

128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 = 255

Itulah mengapa nilai maksimum 8 bit adalah 255 — sekaligus alasan tepat mengapa rentang satu kanal RGB adalah 0–255.

HEX — Angka yang Sama, Ditulis Lebih Pendek

RGB(255, 255, 255). Terdiri dari 16 karakter. Terlalu panjang untuk ditulis berulang kali di setiap baris CSS atau kolom di design tool. Itulah mengapa muncul cara penulisan yang lebih singkat untuk angka yang sama.

Apa Itu Heksadesimal?

Heksadesimal adalah sistem bilangan yang merepresentasikan 0 hingga 15 dalam satu karakter. Namun angka yang biasa kita gunakan hanya ada 10 (0–9). Enam yang tersisa dipinjam dari alfabet.

0→0

1→1

2→2

3→3

4→4

5→5

6→6

7→7

8→8

9→9

10→A

11→B

12→C

13→D

14→E

15→F

Aturannya ada tiga:

0–9 tetap seperti biasa
Mulai dari 10 diwakili oleh A
F adalah nilai maksimum satu karakter (= 15)

Mengapa Tepat Heksadesimal?

4 digit biner (0000 ~ 1111) merepresentasikan tepat 16 nilai.

0000→0

0001→1

0010→2

0011→3

0100→4

0101→5

0110→6

0111→7

1000→8

1001→9

1010→A

1011→B

1100→C

1101→D

1110→E

1111→F

4 digit biner = 1 karakter heksadesimal. Empat karakter dipadatkan menjadi satu. Karena satu kanal RGB terdiri dari 8 bit, nilainya tepat muat dalam dua karakter heksadesimal.

Cara Mengubah RGB ke HEX

Mari kita konversi RGB(255, 87, 51).

Konversi nilai R ke heksadesimal

255→FF

Konversi nilai G ke heksadesimal

87→57

Konversi nilai B ke heksadesimal

51→33

Tambahkan # di depan, lalu susun urutan R·G·B

#FF5733

Notasi yang awalnya 14 karakter menjadi 7 karakter.

Menebak Warna dari HEX

Sebaliknya, dengan membaca HEX kita bisa memperkirakan warnanya.

#FF5733 — R maksimum (FF), G setengah (57), B rendah (33) → oranye kemerahan kuat
#3576E0 — R rendah (35), G sedang (76), B kuat (E0) → biru dengan sedikit ungu
#29A85A — R rendah (29), G kuat (A8), B rendah (5A) → hijau segar

Cukup dengan melihat tiga pasang karakter, kita bisa membedakan “apakah ini bernuansa oranye atau biru” — sehingga desainer dan developer dapat berkomunikasi dalam bahasa yang sama.

Ringkasan Satu Baris

RGB — tiga kanal: merah, hijau, biru; masing-masing 0–255
Biner 8-bit — asal-usul 256 nilai yang direpresentasikan satu kanal
HEX — cara menulis angka yang sama dalam dua karakter yang lebih singkat

Ketika ketiga konsep ini terhubung dalam satu baris, kode warna tidak lagi terasa seperti bahasa asing. Tiga angka RGB persis sama dengan enam karakter HEX.

Langkah selanjutnya adalah mengubah angka-angka ini menjadi bahasa desainer. Permintaan seperti “sedikit lebih terang,” “kurang saturasi,” atau “sama di kertas” sulit ditangani dengan RGB dan HEX saja. Bagaimana HSL, CMYK, dan OKLCH menyelesaikan ini dilanjutkan di RGB saja tidak cukup: notasi warna HSL, CMYK, dan OKLCH.