Bagaimana Komputer Mencipta Warna: RGB, HEX, dan Nombor Binari
#FF0000. #00FF00. #0000FF. Notasi ini pasti pernah anda temui dalam reka bentuk atau kod. Nampak seperti sandi, atau mungkin kod permainan. Sebenarnya, ini adalah nama warna.
Dari atas ke bawah: merah, hijau, biru. Itulah nama yang digunakan komputer untuk merujuk warna. Mari kita urai dari mana notasi ini berasal.
RGB — Tiga Huruf Pembentuk Warna
Red, Green, Blue. Tiga warna primer cahaya. Semua warna yang kita lihat terhasil daripada campuran ketiga-tiganya dalam nisbah tertentu.
Kita Melihat RGB Setiap Hari
Di mana sahaja terdapat skrin, hampir pasti terdapat RGB.
- Monitor / TV — Setiap piksel terdiri daripada tiga titik: merah, hijau, dan biru
- Skrin telefon pintar — Struktur yang sama, piksel yang lebih kecil
- LED papan kekunci gaming — Tiga LED R·G·B pada setiap kekunci
- Lampu kes PC — Jalur RGB ialah isyarat RGB itu sendiri
Jika anda membesarkan skrin dengan cukup, anda akan melihatnya. Merah, hijau, biru. Itulah sahaja yang ada. Berjuta-juta titik RGB kecil bergabung membentuk satu imej yang kita lihat.
Warna Dihasilkan dengan Mencampur
Setiap saluran RGB mempunyai kekuatan dari 0 hingga 255.
RGB(255, 0, 0)— Merah sahaja pada maksimum → merah tulenRGB(0, 255, 0)— Hijau sahaja pada maksimum → hijau tulenRGB(255, 255, 0)— Merah + hijau → kuningRGB(0, 0, 0)— Semua dimatikan → hitamRGB(255, 255, 255)— Semua pada maksimum → putih
Mungkin terasa pelik bahawa merah dicampur hijau menghasilkan kuning, namun ini adalah sintesis cahaya. Ini berbeza daripada mencampur cat semasa pelajaran seni (merah + hijau = perang). Cahaya semakin terang apabila ditambah, dan apabila semua digabungkan, hasilnya putih.
Cuba gerakkan ketiga-tiga peluncur ini sendiri.
Nombor 8 digit di sebelah kanan ialah representasi binari saluran tersebut. Apabila anda menggerakkan peluncur, nombor itu turut berubah. Bagaimana 0 dan 1 menghasilkan 256 nilai — itulah topik seterusnya.
Mengapa 0 hingga 255?
Komputer hanya mengendalikan 0 dan 1. Satu digit yang menyimpan 0 atau 1 dipanggil bit. Semakin banyak bit, semakin dua kali ganda nilai yang boleh direpresentasikan.
8 bit = 1 bait (byte). Satu warna mempunyai tiga saluran RGB, jadi jumlahnya 3 bait = 24 bit. 24 bit boleh mewakili kira-kira 16.7 juta warna. Ini lebih dari cukup untuk mata manusia membezakannya, maka 1 bait menjadi standard untuk setiap saluran.
Membaca Nombor Binari Sendiri
Setiap digit mempunyai nilai yang ditetapkan. Dari kiri ke kanan: 128, 64, 32, 16, 8, 4, 2, 1 — kuasa dua.
Tambahkan semua nilai pada digit yang bernilai 1, dan anda akan mendapat nombor perpuluhan.
Itulah sebabnya nilai maksimum 8-bit ialah 255. Inilah sebab tepat julat representasi satu saluran RGB adalah 0 hingga 255.
HEX — Nombor yang Sama, Lebih Pendek
RGB(255, 255, 255). Itu 16 aksara. Terlalu panjang untuk ditulis berulang kali dalam satu baris CSS atau medan alat reka bentuk. Maka muncullah cara yang lebih ringkas untuk menulis nombor yang sama.
Apa Itu Heksadesimal
Heksadesimal ialah sistem nombor yang menggunakan satu aksara untuk mewakili nilai 0 hingga 15. Namun, digit biasa yang kita gunakan hanya ada 10 (0–9). Enam lagi dipinjam daripada abjad.
Terdapat tiga peraturan mudah:
- 0–9 kekal seperti biasa
- Mulai 10, gunakan A
- F ialah nilai maksimum satu aksara (= 15)
Mengapa Heksadesimal?
4 digit binari (0000 ~ 1111) mewakili tepat 16 nilai.
4 digit binari = 1 aksara heksadesimal. Empat digit menjadi satu. Oleh kerana setiap saluran RGB adalah 8-bit, ia jatuh tepat sebagai dua aksara heksadesimal.
Cara Menukar RGB kepada HEX
Mari kita tukar RGB(255, 87, 51).
Notasi yang tadinya 14 aksara kini menjadi 7 aksara.
Menebak Warna dari HEX
Sebaliknya, melihat HEX pun boleh memberi gambaran warnanya.
#FF5733— R maksimum (FF), G separuh (57), B rendah (33) → oren kemerahan#3576E0— R rendah (35), G sederhana (76), B kuat (E0) → biru keungguan#29A85A— R rendah (29), G kuat (A8), B rendah (5A) → hijau segar
Hanya dengan melihat tiga bahagian, anda boleh membezakan “adakah ini oren atau biru” — membolehkan pereka dan pembangun berkomunikasi menggunakan bahasa yang sama.
Ringkasan Satu Baris
- RGB — Tiga saluran: merah, hijau, biru; masing-masing 0–255
- Binari 8-bit — Mengapa satu saluran mewakili 256 nilai
- HEX — Notasi yang menulis nombor yang sama dalam dua aksara yang lebih pendek
Apabila ketiga-tiga konsep ini disambungkan, kod warna bukan lagi bahasa asing. Tiga nombor RGB adalah tepat enam aksara HEX.
Langkah seterusnya ialah menukar nombor-nombor ini kepada bahasa pereka bentuk. Permintaan seperti “sedikit lebih cerah,” “kurang tepu,” atau “sama pada kertas” sukar dikendalikan dengan RGB dan HEX sahaja. Bagaimana HSL, CMYK, dan OKLCH menyelesaikannya diteruskan di RGB sahaja tidak mencukupi: notasi warna HSL, CMYK, dan OKLCH.