edubun
Bahasa Indonesia
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
Beranda›Warna dan desain›Teori warna

RGB dan kode hex

Dengan 256 tingkat untuk masing-masing merah, hijau, dan biru, layar dapat menampilkan 256 × 256 × 256 = 16 777 216 warna. Setiap warna merupakan sebuah titik di dalam kubus.

Memuat model 3D

Seret untuk memutar. Gulir atau rapatkan dan renggangkan dua jari untuk mengatur zoom.

Seret untuk memutar bangun ruang. Klik kubus kecil pada tampilan RGB, atau cakram berwarna maupun irisan tegak pada tampilan HSL, untuk memilih warna tersebut. Pada panel di bawah model, kamu bisa membaca kode hex, nilai HSL, warna harmoni, dan rasio kontras terhadap latar yang kamu pilih.

Tiga angka, tiga sumbu

Dalam ruang warna sRGB yang digunakan web, warna ditulis sebagai tiga nilai kanal: merah, hijau, dan biru. Dalam kode sehari-hari, setiap kanal berupa bilangan bulat dari 0 sampai 255, yaitu rentang yang muat dalam delapan bit. Nilai kanal 0 berarti cahaya itu mati. Nilai 255 berarti menyala penuh. Jadi, rgb(255 0 0) adalah merah terkuat yang dapat ditampilkan layar, rgb(0 0 0) adalah hitam, dan rgb(255 255 255) adalah putih.

Tiga angka yang masing-masing memiliki rentang membentuk sebuah kotak. Tempatkan merah pada satu rusuk, hijau pada rusuk lainnya, dan biru pada rusuk ketiga. Setiap warna pun memiliki tempat di dalam kubus. Pada model di atas, kamu bisa melihat kubus yang tersusun dari 512 balok kecil, dengan delapan tingkat pada setiap rusuk. Hitam berada di satu sudut. Putih berada di sudut yang berlawanan. Tiga sudut di sebelah hitam adalah merah murni, hijau murni, dan biru murni. Tiga sudut di sebelah putih adalah sian, magenta, dan kuning, masing-masing terbentuk dari dua kanal penuh. Aktifkan label dan ikuti rusuk dari hitam ke putih: setiap jalur melewati satu warna primer dan satu warna sekunder.

Garis putus-putus dari hitam ke putih adalah sumbu abu-abu. Pada setiap titik di sumbu ini, nilai merah, hijau, dan biru sama, misalnya rgb(128 128 128). Warna yang jauh dari garis itu tampak pekat. Warna yang dekat dengannya tampak keabu-abuan. Inilah petunjuk awal gagasan di balik model HSL pada unit berikutnya: jarak dari sumbu abu-abu mengukur seberapa kuat warna suatu titik.

Membaca kode hex

CSS juga memungkinkan tiga angka yang sama ditulis dalam heksadesimal setelah tanda #. Sistem heksadesimal berbasis enam belas, menggunakan digit 0 sampai 9 dan huruf a sampai f, dengan a bernilai 10 dan f bernilai 15. Dua digit hex mencakup 16 × 16 = 256 nilai, tepat untuk satu kanal. Jadi, kode enam digit terdiri atas tiga pasangan: merah, hijau, biru. CSS Color 4 menjelaskan bahwa huruf besar atau kecil tidak berpengaruh, sehingga #00ff00 dan #00FF00 adalah warna yang sama.

Kode #2273c3 diuraikan menjadi tiga kanalnya. Digit pertama setiap pasangan menyatakan kelipatan enam belas, sedangkan digit kedua menyatakan satuan.

Untuk membaca satu pasangan, kalikan digit pertama dengan 16, lalu tambahkan digit kedua. Untuk c3, hasilnya 12 × 16 + 3 = 195. Untuk ff, hasilnya 15 × 16 + 15 = 255, yaitu nilai maksimum. Untuk 80, hasilnya 8 × 16 = 128, hampir tepat di tengah. Kode tiga digit seperti #f80 adalah bentuk singkat: setiap digit ditulis dua kali berturut-turut, jadi #f80 berarti #ff8800. Ketik kode dalam kotak Hex di bawah model, lalu penanda berpindah ke titik tersebut dalam kubus.

Latar belakangGagasan membentuk warna apa pun dari tiga gambar berfilter diperagakan kepada publik pada 1861. Dalam kuliah di Royal Institution, London, James Clerk Maxwell menampilkan foto pita tartan. Fotografer Thomas Sutton telah memotretnya tiga kali, melalui filter merah, hijau, dan biru. Setiap gambar kemudian diproyeksikan melalui filter yang sama dengan yang dipakai saat memotretnya, lalu ketiga proyeksi ditumpuk pada layar. Pelat fotonya jauh dari sempurna, tetapi metode tiga kanal berfilter itu masih digunakan oleh semua kamera digital dan layar.
Warnargb()Hex
Hitamrgb(0 0 0)#000000
Putihrgb(255 255 255)#ffffff
Merahrgb(255 0 0)#ff0000
Kuningrgb(255 255 0)#ffff00
Sianrgb(0 255 255)#00ffff
Abu-abu sedangrgb(128 128 128)#808080
#ff0000Merah, rgb(255 0 0)
#00ffffSian, rgb(0 255 255)
#ff00ffMagenta, rgb(255 0 255)
#ffff00Kuning, rgb(255 255 0)
#808080Abu-abu sedang, rgb(128 128 128)
#000Hitam, singkatan dari #000000
Poin penting
  • Warna sRGB terdiri atas tiga kanal, masing-masing bernilai 0 sampai 255.
  • Kubus RGB memiliki hitam dan putih di sudut berlawanan, dengan sumbu abu-abu di antaranya.
  • Kode hex terdiri atas tiga pasangan digit berbasis 16: merah, hijau, biru.
  • 256³ = 16 777 216 warna.
  1. Berapa banyak nilai yang dapat dimiliki satu kanal 8-bit?
  2. Berapa banyak warna yang dapat dinyatakan oleh RGB 8-bit?
  3. Berapa nilai desimal pasangan hex c3?
  4. Berapa nilai desimal kanal merah pada #a8581b?
  5. Tulis putih sebagai kode hex enam digit.
  6. Warna apa yang dinyatakan #00ffff?
    • Sian
    • Kuning
    • Magenta
    • Biru
  7. Apa arti kode singkat #f80?
    • #ff8800
    • #f80000
    • #0f0800
    • #f8f8f8
  8. Dalam kubus RGB, sudut mana yang berlawanan dengan hitam?
    • Putih
    • Merah
    • Biru
    • Abu-abu
  9. Manakah yang terletak pada sumbu abu-abu kubus?
    • rgb(90 90 90)
    • rgb(90 0 90)
    • rgb(255 90 90)
    • rgb(0 0 90)
  10. Apakah #00ff00 dan #00FF00 merupakan warna yang sama dalam CSS?
    • Ya
    • Tidak
    • Hanya di beberapa peramban
    • Hanya pada hasil cetak
  11. Pada tahun berapa Maxwell menampilkan foto berwarna dengan tiga filter?
Sumber kursus ini (14)
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
  • contrast ratio (L1 + 0.05) / (L2 + 0.05)
  • range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
  • 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
  • W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
  • OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
  • OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
  • Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
  • The Newton Project (University of Oxford)
  • Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
  • History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
  • LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
  • RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
  • University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).

Diperiksa: 2026-10-17