🎨
← Kembali ke Panduan

HEX vs RGB vs HSL: Format Warna Mana yang Harus Anda Gunakan?

· Tag: hex-vs-rgb-vs-hsl, color-formats, css, web-development, color-converter

HEX vs RGB vs HSL: Format Warna Mana yang Harus Anda Gunakan?

CSS menawarkan berbagai cara untuk mendefinisikan warna, tetapi tiga format paling umum adalah HEX, RGB, dan HSL. Setiap format memiliki kekuatan yang berbeda, dan mengetahui kapan harus menggunakan masing-masing dapat secara dramatis meningkatkan keterawatan stylesheet Anda dan kemampuan Anda untuk membuat sistem warna yang dinamis. Panduan ini menguraikan setiap format sehingga Anda dapat memilih yang tepat untuk situasi apa pun.

Format Warna HEX: Standar Industri

Warna HEX (heksadesimal) adalah format yang paling banyak digunakan dalam desain web. Warna hex ditulis sebagai # diikuti oleh enam digit heksadesimal yang mewakili nilai merah, hijau, dan biru secara berurutan.

#FF5733
  • #FF — Merah (255 dalam desimal)
  • #57 — Hijau (87 dalam desimal)
  • #33 — Biru (51 dalam desimal)

Variasi HEX

HEX mendukung beberapa notasi untuk kebutuhan yang berbeda:

/* Hex enam digit standar */
color: #FF5733;

/* Singkatan — pasangan identik diringkas menjadi tiga digit */
color: #F53; /* Berkembang menjadi #FF5533 */

/* Hex delapan digit dengan saluran alpha */
color: #FF573380; /* Opasitas 50% */

HEX singkatan bekerja ketika setiap pasangan menggunakan karakter yang cocok: #AABBCC menjadi #ABC. Ini murni konvensi penghemat ruang yang didukung oleh semua browser.

HEX delapan digit (#RRGGBBAA) menambahkan transparansi alpha. Nilai alpha berkisar dari 00 (sepenuhnya transparan) hingga FF (sepenuhnya buram). Dukungan browser untuk hex 8-digit sangat baik di semua browser modern.

Singkatan empat digit (#RGBA) juga ada: #F538 berkembang menjadi #FF553388.

Kapan Menggunakan HEX

  • Menyalin dari alat desain — Figma, Sketch, dan Adobe XD semuanya menghasilkan hex secara default
  • Warna merek yang dikodekan keras — Hex tidak ambigu dan ringkas untuk nilai yang tidak pernah berubah
  • Dokumentasi dan mockup — Hex adalah format yang paling dikenal di kalangan desainer dan pengembang
  • Properti kustom CSS — Menyimpan token merek dalam hex adalah praktik umum

Kapan Menghindari HEX

  • Manipulasi warna terprogram — Menyesuaikan saluran individual memerlukan parsing string
  • Membuat sistem warna — Menghasilkan varian yang lebih terang atau lebih gelap melibatkan matematika yang tidak trivial
  • Mengomunikasikan maksud warna — Hex tidak memberikan informasi semantik tentang warna

Format Warna RGB: Kontrol Saluran

RGB adalah singkatan dari Red, Green, Blue. Dalam CSS, ditulis sebagai fungsi dengan nilai dari 0 hingga 255 atau persentase (0% hingga 100%).

/* Sintaks lama dengan pemisah koma */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* Sintaks modern dengan pemisah spasi */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* Nilai persentase */
color: rgb(100% 34% 20%);

Peningkatan Sintaks RGB Modern

Spesifikasi CSS Color Level 4 memodernisasi fungsi rgb() dalam dua cara penting:

  1. Nilai dengan pemisah spasi — Koma tidak lagi diperlukan, membuat sintaks lebih bersih
  2. Alpha dengan pemisah garis miring — Alias rgba() tidak lagi diperlukan; rgb() sekarang menerima saluran alpha opsional

Baik sintaks lama maupun modern didukung sepenuhnya, tetapi sintaks modern direkomendasikan untuk kode baru.

Kapan Menggunakan RGB

  • Canvas dan WebGL — API data gambar mengembalikan nilai piksel dalam RGB
  • Penyesuaian warna numerik — Ketika Anda memiliki nilai merah, hijau, dan biru yang disimpan sebagai variabel terpisah
  • Menerjemahkan dari spesifikasi desain — Beberapa sistem desain menentukan warna sebagai triplet RGB
  • Bekerja dengan color picker — Banyak UI color picker menggunakan slider 0-255

Kapan Menghindari RGB

  • Membuat palet warna yang kohesif — Mengutak-atik ketiga saluran secara independen membuat penyesuaian yang konsisten menjadi sulit
  • Keterbacaan manusia — rgb(123, 45, 67) tidak memberikan gambaran langsung tentang warna apa yang diwakilinya

Format Warna HSL: Warna yang Ramah Manusia

HSL adalah singkatan dari Hue, Saturation, dan Lightness. Format ini lebih intuitif bagi manusia karena memisahkan warna itu sendiri (hue) dari intensitasnya (saturation) dan kecerahannya (lightness).

/* Sintaks lama */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* Sintaks modern */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

Memahami Saluran HSL

Hue (0-360) — Sudut warna pada roda warna. Ini adalah komponen "warna apa ini":

| Nilai Hue | Warna | |-----------|---------| | 0 atau 360| Merah | | 30 | Oranye | | 60 | Kuning | | 120 | Hijau | | 180 | Cyan | | 240 | Biru | | 300 | Magenta |

Saturation (0-100%) — Seberapa intens atau cerah warnanya. 0% menghasilkan nuansa abu-abu; 100% adalah versi paling murni dari hue.

Lightness (0-100%) — Seberapa terang atau gelap warnanya. 0% selalu hitam, 50% adalah versi "normal" dari hue, dan 100% selalu putih.

Mengapa HSL Lebih Unggul untuk Sistem Warna

HSL membuat tugas-tugas yang sulit di HEX atau RGB menjadi sangat sederhana:

/* Warna merek utama */
--brand: hsl(220, 80%, 50%);

/* Status hover — sedikit lebih terang */
--brand-hover: hsl(220, 80%, 60%);

/* Status aktif — sedikit lebih gelap */
--brand-active: hsl(220, 80%, 40%);

/* Status nonaktif — desaturasi */
--brand-disabled: hsl(220, 30%, 70%);

/* Warna latar — sangat terang */
--brand-bg: hsl(220, 40%, 95%);

Dengan HSL, setiap varian adalah perubahan satu variabel. Ini tidak mungkin dilakukan dengan HEX dan rumit dengan RGB.

Kapan Menggunakan HSL

  • Membuat palet warna — HSL adalah standar de facto untuk pembuatan design token
  • Tema dan mode gelap — Tukar nilai lightness untuk membuat varian mode gelap
  • Status hover dan fokus — Sesuaikan lightness dengan persentase tetap
  • Penyesuaian aksesibilitas — Tingkatkan kontras lightness tanpa mengubah warna
  • Color picker interaktif — Slider HSL lebih intuitif daripada slider RGB

Tabel Perbandingan Cepat

| Fitur | HEX | RGB | HSL | |---------|-----|-----|-----| | Keterbacaan tingkat piksel | Buruk | Sedang | Baik | | Semantik saluran | Buram | Numerik | Perseptual | | Penyesuaian terprogram | Sulit | Sedang | Mudah | | Transparansi alpha | Hex 8-digit | rgb(R G B / A) | hsl(H S% L% / A) | | Dukungan browser | Sangat baik | Sangat baik | Sangat baik | | Sintaks modern | Tidak | Ya | Ya | | Default alat desain | Ya | Umum | Jarang | | Kesesuaian sistem warna | Buruk | Cukup | Sangat baik |

Dukungan Browser: Ketiganya Aman

HEX, RGB, dan HSL menikmati dukungan browser yang identik. Ketiganya bekerja di setiap browser yang dirilis sejak Internet Explorer 9. Sintaks modern dengan pemisah spasi (rgb(255 0 0 / 0.5)) didukung di semua browser yang dirilis sejak 2020. Tidak ada alasan kompatibilitas untuk memilih salah satu dari yang lain.

Kerangka Keputusan Praktis

Pilih format Anda berdasarkan apa yang Anda lakukan:

  1. Menyalin dari mockup desain? Gunakan HEX — itulah yang dihasilkan oleh alat desain.
  2. Membangun sistem design token? Gunakan HSL — ini membuat pembuatan palet menjadi sepele.
  3. Bekerja dengan canvas atau data gambar? Gunakan RGB — API piksel menggunakan RGB secara native.
  4. Menulis aturan gaya satu kali? Gunakan HEX — ini yang paling ringkas.
  5. Membuat transisi warna dinamis? Gunakan HSL — menginterpolasi hue menciptakan efek pelangi; menginterpolasi RGB menciptakan hasil antara yang keruh.

Konversi Antara Format Apa Pun

Gunakan konverter warna online gratis kami untuk langsung mengonversi antara HEX, RGB, HSL, dan format warna CSS lainnya. Tidak perlu lagi matematika manual atau menjelajahi DevTools browser.