Lompat ke konten utama
←

Dasar Desain Visual

Pelajaran 2 dari 16

Warna di layar dan di kertas

Menulis warna: HEX, rgb(), dan hsl()

Setelah pelajaran ini kamu bisa mengubah kode HEX ke nilai rgb() dan sebaliknya, serta membaca rona, saturasi, dan kecerahan pada hsl().

±14 menitDiperiksa 27 Sep 2026

Materi

CSS menulis warna layar sebagai kode HEX, misalnya #1E90FF. MDN menjelaskan bentuknya: tanda pagar, lalu dua digit heksadesimal untuk merah, dua untuk hijau, dan dua untuk biru. Heksadesimal memakai enam belas lambang, 0 sampai 9 lalu A sampai F, sehingga dua digit mencakup 00 sampai FF, sama dengan 0 sampai 255 desimal. Huruf besar dan kecil dianggap sama. Bentuk tiga digit juga sah: setiap digit digandakan, jadi #0AF berarti #00AAFF. Bentuk delapan digit menambahkan kanal alfa atau ketransparanan.

Mengubah dua digit HEX ke desimal: digit pertama dikali 16, lalu ditambah digit kedua. Arah sebaliknya: bagi angka desimal dengan 16; hasil bulatnya digit pertama dan sisanya digit kedua. Notasi rgb() menulis tiga angka desimal yang sama langsung.

#1E90FF
1E → 1 × 16 + 14 = 30
90 → 9 × 16 + 0  = 144
FF → 15 × 16 + 15 = 255
hasil: rgb(30 144 255)

Notasi hsl() menulis warna yang sama dengan cara lain. MDN dan CSS Color 4 menjelaskan: H adalah sudut rona pada lingkaran warna, dengan 0 derajat merah, 120 derajat hijau, dan 240 derajat biru; S adalah saturasi, 100 persen penuh dan 0 persen abu-abu; L adalah kecerahan, 100 persen putih, 0 persen hitam, dan 50 persen warna normalnya. Warna komplementer berada di seberang lingkaran, yaitu rona ditambah atau dikurangi 180 derajat. Ketiga notasi ini menunjuk warna di ruang warna sRGB, yang menurut MDN dibuat untuk web dan menjadi ruang warna rgb() dan hsl().

Latihan

0/3 lulus

Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Latihan 1 dari 3

Warna merek sebuah kedai tertulis #6B2FA0. Berapa nilai kanal hijau (G) dalam desimal?

Latihan 2 dari 3

Kode HEX enam digit mana yang sama dengan rgb(255 136 0)?

Pilih satu jawaban

Latihan 3 dari 3

Sebuah templat memakai hsl(120 100% 100%). Warna apa yang tampil?

Pilih satu jawaban

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke