HEX vs RGB vs HSL vs CMYK: Format Warna Mana yang Dipakai dan Kapan

Warna yang Sama, Empat Bahasa Berbeda

Pilih warna apa saja — misalnya coral yang hangat. Sekarang jelaskan warna itu dengan empat cara:

• HEX: #E8635A
• RGB: rgb(232, 99, 90)
• HSL: hsl(4, 75%, 63%)
• CMYK: 0, 57, 61, 9

Keempatnya menjelaskan warna yang persis sama. Semuanya bukan standar yang saling bersaing — semuanya adalah representasi warna yang berbeda, dioptimalkan untuk konteks yang berbeda. Kebingungan muncul karena kita tidak tahu konteks mana yang menuntut format mana.

Panduan ini menguraikan setiap format dengan bahasa sederhana: apa itu, cara kerjanya, kapan dipakai, dan kapan justru menjadi pilihan yang keliru. Jika Anda bekerja dengan warna dalam bentuk apa pun — desain, pengembangan, cetak, pemasaran — panduan ini akan menyelamatkan Anda dari salah memilih format untuk proyek Anda.

HEX: Standar Web

Apa itu

HEX (heksadesimal) adalah kode enam karakter yang diawali tanda pagar: #E8635A. Setiap pasang karakter mewakili kanal Merah, Hijau, dan Biru dalam notasi basis-16 (00 hingga FF).

Secara fungsional identik dengan RGB — hanya ditulis berbeda. #E8635A sama dengan rgb(232, 99, 90). HEX hanyalah cara yang lebih ringkas untuk menuliskan nilai RGB.

Kapan memakai HEX

• CSS dan pengembangan web — HEX adalah notasi warna bawaan di CSS. Semua peramban memahaminya. color: #E8635A; adalah cara paling umum menentukan warna di web.
• Alat desain — Figma, Sketch, Adobe XD, dan Canva semuanya memakai HEX sebagai input utama. Saat seorang desainer berkata "birunya #3B82F6," semua orang paham maksudnya.
• Pedoman merek — panduan merek digital hampir selalu mencantumkan nilai HEX karena pendek, tidak ambigu, dan mudah disalin-tempel.
• Komunikasi cepat — "pakai #333" lebih cepat daripada "pakai rgb(51, 51, 51)" dalam pesan Slack.

Kapan TIDAK memakai HEX

• Saat Anda butuh transparansi — HEX 6 digit standar tidak mendukung alfa/opasitas. Anda perlu HEX 8 digit (#E8635A80) yang kurang mudah dibaca, atau beralih ke RGBA.
• Saat Anda perlu menyesuaikan warna secara terprogram — "buat ini 20% lebih terang" nyaris mustahil dihitung dalam HEX di kepala. HSL jauh lebih baik untuk ini.
• Produksi cetak — mesin cetak tidak memakai HEX. Tidak pernah.

Contoh nyata

Anda sedang menulis CSS untuk sebuah halaman arahan. Desainer memberi Anda panduan gaya berisi warna merek. Anda menulis:

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

HEX sempurna di sini: ringkas, mudah dibaca, dan didukung secara universal.

RGB: Model Warna Layar

Apa itu

RGB adalah singkatan dari Red, Green, Blue — tiga warna cahaya yang dicampur layar untuk menghasilkan setiap warna yang Anda lihat. Setiap kanal berkisar dari 0 hingga 255. rgb(232, 99, 90) berarti 232 unit merah, 99 unit hijau, dan 90 unit biru.

RGB adalah fondasi semua warna digital. HEX hanyalah RGB dalam notasi berbeda. HSL adalah transformasi RGB yang ramah manusia. Semua yang tampil di layar Anda pada akhirnya menjadi nilai RGB yang dikirim ke piksel.

Kapan memakai RGB

• Saat Anda butuh transparansi — RGBA menambahkan kanal alfa: rgba(232, 99, 90, 0.5) untuk opasitas 50%. Ini lebih rapi daripada HEX 8 digit dan didukung luas di CSS, alat desain, dan pemrograman.
• Pemrograman dan pengembangan aplikasi — Swift, Kotlin, Flutter, React Native — kerangka kerja aplikasi umumnya bekerja dengan nilai RGB/RGBA secara internal.
• LED dan pencahayaan — lampu pintar (Philips Hue, strip LED) memakai nilai RGB. Jika Anda mendesain untuk instalasi cahaya fisik, RGB adalah format aslinya.
• Matematika warna — mencampur warna, menginterpolasi gradien, atau menghasilkan warna secara terprogram sangat mudah dalam RGB.

Kapan TIDAK memakai RGB

• Cetak — layar memancarkan cahaya (pencampuran aditif); kertas memantulkannya (pencampuran subtraktif). RGB tidak bisa merepresentasikan secara akurat hasil yang keluar dari mesin cetak.
• Menyesuaikan kecerahan atau saturasi — "kurangi saturasi warna ini 30%" tidak intuitif dalam RGB. Anda harus mengonversinya ke HSL dulu.

Contoh nyata

Anda sedang membangun aplikasi React Native dan butuh lapisan semi-transparan:

backgroundColor: 'rgba(0, 0, 0, 0.6)'

RGB dengan alfa adalah pilihan alami — langsung, mudah dibaca, dan asli bagi mesin perender.

HSL: Format Para Desainer

Apa itu

HSL adalah singkatan dari Hue, Saturation, Lightness (rona, saturasi, kecerahan):

• Hue (0°–360°) — warnanya sendiri, sebagai posisi pada roda warna. 0° adalah merah, 120° hijau, 240° biru.
• Saturation (0%–100%) — seberapa pekat warnanya. 0% adalah abu-abu, 100% adalah bentuk termurni dari rona itu.
• Lightness (0%–100%) — seberapa terang atau gelap. 0% hitam, 100% putih, 50% adalah warna "sebenarnya".

hsl(4, 75%, 63%) berarti: rona kemerahan (4°), sangat pekat (saturasi 75%), dan agak terang (63%).

Kapan memakai HSL

• Sistem desain dan tema — HSL adalah format terbaik untuk membuat skala warna yang konsisten. Ingin 10 gradasi dari warna utama Anda? Pertahankan ronanya, variasikan kecerahan dari 10% hingga 95%. Ingin versi yang lebih kalem? Turunkan saturasinya. Ini nyaris mustahil dilakukan secara intuitif dalam HEX atau RGB.
• Mode gelap / mode terang — berganti tema berarti menyesuaikan kecerahan dan saturasi, yang memetakan langsung ke parameter HSL. Tailwind CSS, Radix Colors, dan banyak sistem desain modern dibangun di atas HSL.
• Pembuatan warna terprogram — menghasilkan status hover, status nonaktif, latar belakang, dan garis tepi dari satu warna dasar sangat mudah dalam HSL: hsl(4, 75%, 73%) untuk varian lebih terang, hsl(4, 75%, 43%) untuk yang lebih gelap.
• Aksesibilitas — pemeriksaan rasio kontras menjadi lebih intuitif ketika Anda bisa melihat dan menyesuaikan kecerahan secara langsung.

Kapan TIDAK memakai HSL

• Komunikasi lintas tim — kebanyakan orang tidak berpikir dalam derajat dan persentase. Mengatakan "tombolnya hsl(4, 75%, 63%)" kurang jelas dibanding "tombolnya #E8635A" dalam serah terima desain.
• Cetak — sama seperti RGB, HSL adalah model warna layar.

Contoh nyata

Anda sedang membangun sistem desain di Tailwind CSS dan butuh skala warna yang konsisten:

--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);

Rona sama, saturasi sama, kecerahan berbeda. Skala sempurna dalam 30 detik. Coba lakukan itu dalam HEX.

CMYK: Format Cetak

Apa itu

CMYK adalah singkatan dari Cyan, Magenta, Yellow, Key (hitam). Format ini menjelaskan warna sebagai campuran tinta yang diterapkan pada kertas putih. Setiap nilai berkisar dari 0% hingga 100%: 0, 57, 61, 9 berarti 0% cyan, 57% magenta, 61% kuning, dan 9% hitam.

Berbeda dari RGB (yang menambahkan cahaya untuk membuat warna), CMYK mengurangi dari kertas putih. Makin banyak tinta = warna makin gelap. Karena itulah ia disebut model warna subtraktif.

Kapan memakai CMYK

• Desain cetak — kartu nama, brosur, kemasan, poster, majalah. Setiap berkas yang dikirim ke percetakan komersial harus berada dalam mode warna CMYK.
• Menyiapkan berkas untuk cetak di InDesign, Illustrator — alat-alat ini memungkinkan Anda bekerja dalam mode CMYK untuk melihat pratinjau bagaimana warna akan tampak di atas kertas (yang selalu kurang cerah dibanding di layar).
• Pemeriksaan warna — memastikan warna desain Anda dapat direproduksi dalam CMYK. Beberapa warna RGB yang mencolok (terutama hijau neon dan biru elektrik) secara fisik mustahil dicetak dalam CMYK — warna-warna itu jatuh "di luar gamut".

Kapan TIDAK memakai CMYK

• Apa pun yang tampil di layar — situs web, aplikasi, media sosial, presentasi, surel. Layar memakai RGB. Menentukan CMYK untuk sebuah situs web itu seperti memberi petunjuk arah berkendara dalam mil laut — secara teknis memang satuan jarak, tetapi tidak berguna untuk perjalanannya.
• Penyuntingan fotografi — sunting dalam RGB, konversikan ke CMYK hanya pada tahap ekspor akhir untuk cetak.

Contoh nyata

Anda mendesain sebuah poster di Illustrator. Sebelum mengirimnya ke percetakan, Anda mengonversi dokumen ke mode warna CMYK (File → Document Color Mode → CMYK Color), memeriksa peringatan di luar gamut, dan menyesuaikan biru elektrik yang bergeser menjadi teal keruh. PDF akhir disimpan sebagai CMYK dengan profil ICC percetakan.

Tabel Rujukan Cepat

Contekan: Format Mana untuk Pekerjaan Mana

Bisakah Dikonversi Antarformat?

Bisa — dengan catatan.

• HEX ↔ RGB — tanpa kehilangan data, keduanya data yang sama dalam notasi berbeda.
• RGB ↔ HSL — tanpa kehilangan data, ini transformasi matematis.
• RGB → CMYK — ada kehilangan. Sebagian warna RGB (biru pekat, neon, hijau terang) tidak dapat direproduksi dalam CMYK. Konversi akan menggesernya ke padanan tercetak terdekat, yang sering terlihat lebih kusam.
• CMYK → RGB — secara teknis mungkin, tetapi hasilnya bergantung pada profil ICC yang dipakai. Dua pengonversi bisa memberi nilai RGB yang sedikit berbeda untuk masukan CMYK yang sama.

Untuk konversi cepat saat bepergian, pemilih warna di ponsel yang menampilkan keempat format sekaligus adalah alur kerja tercepat. Color Picker Camera: HEX RGB melakukan persis itu — arahkan kamera Anda ke warna apa pun dan lihat HEX, RGB, HSL, dan CMYK berdampingan. Satu ketukan menyalin nilai mana pun. Tersedia di iPhone dan Android.

Kesalahan Umum

1. Mendesain untuk cetak dalam RGB

Ini kesalahan klasik pemula. Anda mendesain poster yang cerah di Photoshop dalam mode RGB, mengirimkannya ke percetakan, dan hasilnya tampak pudar — terutama hijau dan biru. Selalu konversikan ke CMYK sebelum mengekspor untuk cetak, dan periksa peringatan gamut.

2. Memakai HEX saat Anda butuh transparansi

Jika desain Anda menuntut lapisan semi-transparan, bayangan, atau efek glassmorphism, beralihlah ke RGBA atau HSLA. HEX 6 digit standar tidak membawa informasi opasitas, dan HEX 8 digit jarang dipakai karena sulit dibaca.

3. Membangun sistem desain dalam HEX

"#3B82F6 tetapi 20% lebih terang" memerlukan konversi, perhitungan, lalu konversi balik. Dalam HSL: naikkan kecerahannya 20%. Token desain, generator tema, dan properti kustom CSS modern bekerja jauh lebih baik dalam HSL.

4. Mengonversi CMYK ke HEX untuk web dan berharap warnanya sama

Merek yang didefinisikan dalam CMYK untuk cetak akan tampak berbeda saat dikonversi mentah-mentah ke HEX untuk web. Pendekatan yang benar: cocokkan warna di layar secara visual dengan versi cetaknya, lalu tetapkan nilai HEX terpisah untuk penggunaan digital. Pedoman merek sebaiknya mencantumkan keduanya.

Tanya Jawab

Apa beda HEX dan RGB?

Tidak ada beda pada warnanya — hanya pada notasinya. HEX menuliskan nilai Merah/Hijau/Biru yang sama dalam basis-16. #FF0000 identik dengan rgb(255, 0, 0). HEX lebih pendek diketik; RGB lebih mudah dimodifikasi secara terprogram dan mendukung kanal alfa (RGBA).

Kapan saya harus memakai CMYK alih-alih RGB?

Kapan pun hasil akhir Anda dicetak pada bahan fisik — kertas, karton, kain, plastik. Jika tetap di layar, pakai RGB (atau HEX/HSL). Jika dicetak, beralihlah ke CMYK pada tahap ekspor.

Apakah HSL lebih baik daripada HEX?

Untuk sistem desain, penataan tema, dan manipulasi warna — ya. Untuk komunikasi cepat dan salin-tempel ke berbagai alat — HEX lebih praktis. Keduanya menjelaskan warna yang sama; HSL hanya menata informasinya dengan cara yang sesuai dengan cara manusia memikirkan warna (rona → kepekatan → kecerahan).

Bisakah ponsel saya menampilkan keempat format sekaligus?

Bisa. Color Picker Camera: HEX RGB menangkap warna dari kamera atau foto Anda dan menampilkan HEX, RGB, HSL, dan CMYK secara bersamaan. Ketuk nilai mana pun untuk menyalinnya. Aplikasi ini berfungsi sebagai kalkulator format warna dunia nyata — satu tangkapan, empat format.

Intinya

HEX untuk web dan komunikasi cepat. RGB untuk pengembangan aplikasi dan transparansi. HSL untuk sistem desain dan manipulasi warna. CMYK untuk cetak.

Anda tidak perlu memilih satu — Anda perlu memakai yang tepat untuk setiap konteks. Dan ketika Anda perlu mengonversi antarformat atau menangkap warna dunia nyata dalam keempat format sekaligus, pemilih warna di ponsel adalah alat tercepat yang tersedia.

Unduh Color Picker Camera untuk iPhone | Unduh untuk Android

Unduh PDF

Format lain: Markdown · Text · JSON · EPUB · JATS XML · BibTeX · RIS · CSL-JSON

Lisensi: CC BY 4.0