Model Warna HEX: Penjelasan Notasi #RRGGBB
Notasi warna HEX adalah singkatan heksadesimal untuk nilai RGB. Formatnya adalah #RRGGBB dengan:
- RR = saluran merah (00 hingga FF = 0 hingga 255)
- GG = saluran hijau (00 hingga FF = 0 hingga 255)
- BB = saluran biru (00 hingga FF = 0 hingga 255)
| Warna | HEX | Arti |
|---|---|---|
| Murni merah | #FF0000 | R=255 G=0 B=0 |
| Murni hijau | #00FF00 | R=0 G=255 B=0 |
| Murni biru | #0000FF | R=0 G=0 B=255 |
| Putih | #FFFFFF | R=255 G=255 B=255 |
| Hitam | #000000 | R=0 G=0 B=0 |
| AlatDolfen biru | #3B82F6 | R=59 G=130 B=246 |
Singkatan HEX: Jika kedua digit identik untuk setiap saluran, singkatan 3 karakter akan berfungsi: #F00 = #FF0000.
Model Warna RGB: Saluran Merah, Hijau, Biru
rgb(merah, hijau, biru) — setiap saluran berkisar dari 0 hingga 255.
RGB adalah model warna aditif — menambahkan saluran secara bersamaan akan mengarah ke warna putih. Beginilah cara kerja cahaya (layar TV, monitor).
Dalam CSS:
color: rgb(59, 130, 246); /* Blue */
color: rgba(59, 130, 246, 0.5); /* Blue at 50% opacity */Model Warna HSL: Rona Warna, Saturasi, Ringan
HSL memisahkan warna menjadi tiga dimensi yang bermakna secara persepsi:
- Warna (0–360°): Warnanya sendiri — merah pada 0°, hijau pada 120°, biru pada 240°
- Saturasi (0–100%): Intensitas warna — 0% abu-abu, 100% murni warna cerah
- Kecerahan (0–100%): Kecerahan — 0% hitam, 100% putih, 50% paling murni warna
Dalam CSS:
color: hsl(217, 91%, 60%); /* Blue */
color: hsla(217, 91%, 60%, 0.5); /* Blue at 50% opacity */Keunggulan alur kerja desainer: Untuk membuat palet 5 warna dari satu warna:
- 90% kecerahan → warna sangat terang
- 75% kecerahan → warna terang
- 50% kecerahan → warna dasar
- 35% kecerahan → gelap bayangan
- 20% terang → bayangan sangat gelap
Cukup sesuaikan nilai L sambil menjaga H dan S tetap konstan.
Kapan Menggunakan HEX, RGB, atau HSL di CSS
Gunakan HEX: Untuk referensi satu warna yang memerlukan nilai dari sistem desain atau panduan merek. HEX adalah format paling umum dalam spesifikasi desain.
Gunakan RGB: Saat Anda perlu memanipulasi saluran warna secara dinamis di JavaScript: rgb(${r}, ${g}, ${b}).
Gunakan HSL: Saat membangun sistem tema, membuat palet secara dinamis, atau bekerja dengan properti khusus CSS untuk peralihan mode terang/gelap yang dapat diakses.
Mengonversi Warna di ToolDolfen
Gunakan Pemilih & Konverter Warna (Color Picker) untuk:
- Pilih warna apa pun secara visual pada roda warna dan spektrum
- Masukkan nilai HEX, RGB, atau HSL apa pun dan langsung melihat ketiga format yang setara
- Salin format apa pun ke papan klip dengan satu klik
- Gunakan pipet untuk mengambil sampel warna dari layar Anda (khusus Chrome dan Edge)
Panduan Pendamping yang Direkomendasikan
Jelajahi tutorial dan utilitas pelengkap dari cluster topik ini untuk menyempurnakan alur kerja digital Anda: