Pengubah Warna

HEX dan RGB adalah dua format warna paling umum di web. Kode HEX (#RRGGBB) bersifat ringkas dan banyak digunakan dalam CSS, sementara nilai RGB (0-255 per saluran) digunakan dalam JavaScript dan alat desain.

Konverter hex ke rgb kami menerjemahkan antara format-format ini secara instan, sehingga memudahkan Anda bekerja di berbagai alat dan basis kode.

HSL (Hue, Saturation, Lightness / Rona, Saturasi, Kecerahan) adalah model warna yang paling intuitif bagi desainer. Sesuaikan:

• Rona untuk mengubah warna
• Saturasi untuk tingkat kepekatan
• Kecerahan untuk tingkat terang

Konverter warna HSL kami memudahkan Anda membuat variasi warna, membangun palet, dan menerjemahkan nilai HSL ke HEX atau RGB untuk diterapkan.

Mengonversi dari warna layar (RGB) ke warna cetak (CMYK) memerlukan konversi yang cermat karena kedua model warna tersebut bekerja secara berbeda. RGB bersifat aditif (berbasis cahaya), sedangkan CMYK bersifat subtraktif (berbasis tinta).

Konverter RGB ke CMYK kami menyediakan perkiraan nilai cetak, meskipun hasil akhirnya bergantung pada printer dan kertas Anda.

Untuk mengonversi warna HEX ke RGB, pisahkan kode enam digit (#RRGGBB) menjadi tiga pasangan dua karakter dan konversikan masing-masing dari basis-16 (heksadesimal) ke basis-10 (desimal): R = 16 × d1 + d2, begitu pula seterusnya untuk hijau dan biru.

Sebagai contoh, #FF5733 menghasilkan FF = 255, 57 = 87, 33 = 51, atau rgb(255, 87, 51). Kedua notasi tersebut menjelaskan ruang warna sRGB yang sama yang ditentukan oleh IEC 61966-2-1 dan dirujuk dalam spesifikasi W3C CSS Color.

Setiap saluran mencakup rentang 0–255 (8 bit), yang menghasilkan 256³ = 16.777.216 kemungkinan warna. HEX singkatan (#F53) cukup menggandakan setiap digit menjadi sepasang.

RGB dikonversi ke HSL dan HSV menggunakan langkah pertama yang sama: normalisasikan setiap saluran ke 0–1 (bagi dengan 255), lalu temukan nilai maksimum dan minimum. Hue (Rona) bernilai sama pada kedua model, diturunkan dari saluran mana yang terbesar.

Untuk HSL, Lightness (Kecerahan) = (maks + min) / 2; untuk HSV, Value (Nilai) = maks. Saturation (Saturasi) dihitung secara berbeda: HSL membagi kroma dengan 1 − |2L − 1|, sementara HSV membagi kroma dengan nilai maks.

HSL dan HSV adalah pemetaan ulang silindris dari kubus RGB, yang distandarisasi dalam Modul Warna CSS W3C. Para desainer menyukainya karena Hue, Saturation, and Lightness sesuai dengan cara manusia mendeskripsikan warna.

Sebuah kode warna HEX adalah bentuk singkat heksadesimal untuk nilai saluran RGB, yang diawali dengan tanda #.

• Bentuk umum enam digit (#RRGGBB) mengenkode merah, hijau, dan biru masing-masing sebagai dua digit heksadesimal.
• Bentuk singkat tiga digit (#RGB) memperluas setiap digit menjadi sepasang, sehingga #F53 sama dengan #FF5533.
• Bentuk delapan digit (#RRGGBBAA) dan bentuk singkat empat digit menambahkan saluran alfa (opasitas), seperti yang ditentukan dalam Modul Warna CSS W3C Level 4.

Heksadesimal adalah basis-16, menggunakan digit 0–9 dan huruf A–F, di mana A = 10 dan F = 15. Notasi yang ringkas inilah yang membuat HEX mendominasi pemilih warna CSS dan alat desain.

Sebagian besar nilai HEX dan RGB yang Anda gunakan di web adalah sRGB, ruang warna standar yang ditentukan oleh IEC 61966-2-1 dan diasumsikan oleh CSS kecuali ruang warna lain dideklarasikan. sRGB mencakup sebagian kecil warna yang dapat dilihat oleh mata manusia, sehingga ruang gamut yang lebih luas seperti Display P3 dan Rec. 2020 ada untuk layar modern.

Modul Warna CSS Level 4 dari W3C menambahkan fungsi seperti color() dan oklch() untuk mencapai gamut ini. Konverter ini beroperasi dalam sRGB, yang tetap menjadi ruang yang paling aman dan paling kompatibel untuk pekerjaan web dan UI sehari-hari di berbagai peramban dan perangkat.

Konverter warna menerjemahkan satu warna antarformat agar dapat berfungsi di mana pun dibutuhkan.

• Pengembang web mengonversi HEX ke RGB atau RGBA untuk menambahkan opasitas dalam CSS.
• Desainer UI menggunakan HSL untuk menghasilkan nuansa warna merek yang lebih terang dan lebih gelap hanya dengan menyesuaikan Kecerahan (Lightness).
• Tim percetakan mengonversi RGB ke CMYK sebelum mengirim karya seni ke mesin cetak, karena tinta bersifat subtraktif.
• Visualisasi data dan alat aksesibilitas menggunakan nilai-nilai ini untuk memeriksa rasio kontras terhadap pedoman WCAG dari W3C.

Sebuah konverter menghilangkan perhitungan manual basis-16 dan menjaga konsistensi warna di seluruh kode, berkas desain, dan cetakan.

CSS mendefinisikan 148 warna bernama, seperti tomato (#FF6347), dodgerblue (#1E90FF), dan rebeccapurple (#663399), yang masing-masing merupakan alias persis untuk nilai HEX sRGB tertentu. Nama-nama ini distandarisasi dalam Modul Warna CSS W3C dan didukung oleh setiap peramban modern.

Nama-nama ini praktis untuk pembuatan prototipe tetapi hanya mewakili sebagian kecil dari 16,7 juta warna yang dapat dicapai melalui HEX dan RGB.

Karena warna bernama sama dengan kode HEX tetap, konverter dapat menampilkan warna bernama terdekat untuk input apa pun. Warna kata kunci bersifat tidak peka huruf besar-kecil (case-insensitive) di CSS, sehingga 'DodgerBlue' dan 'dodgerblue' dirender secara identik.

Hindari kesalahan konversi warna yang sering terjadi ini:

• Kesalahan yang paling sering terjadi adalah menghilangkan awalan # atau salah memisahkan pasangan HEX, yang merusak hasil RGB.
• Kesalahan lainnya adalah menganggap HSL dan HSV identik: komponen ketiga mereka (Kecerahan vs. Nilai) berbeda, sehingga Kecerahan 50% bukanlah Nilai 50%.
• Mengharapkan konversi RGB ke CMYK menjadi tepat akan menimbulkan kejutan saat mencetak, karena keluaran CMYK bergantung pada printer, tinta, dan kertas, dan perhitungannya hanyalah perkiraan menurut standar profil sRGB dan cetak.
• Pembulatan yang terlalu dini saat mengonversi melalui HSL dan kembali lagi juga dapat menyebabkan pergeseran warna.
• Terakhir, melupakan saluran alfa akan menghilangkan transparansi saat beralih antara RGB dan RGBA atau #RRGGBBAA.

Setiap format warna cocok untuk tugas yang berbeda.

• HEX (#RRGGBB) adalah yang paling ringkas dan menjadi bawaan untuk penyerahan CSS dan desain.
• RGB (0–255 per saluran) paling mudah dibaca dan dimanipulasi dalam JavaScript serta mencerminkan bagaimana layar memancarkan cahaya secara aditif.
• HSL (Hue, Saturation, Lightness) adalah yang terbaik untuk membuat palet dan menyesuaikan nuansa secara intuitif.
• CMYK (Cyan, Magenta, Yellow, Key) dicadangkan untuk cetak, di mana warna adalah tinta subtraktif pada kertas.

Semua format layar berbagi ruang sRGB yang ditentukan oleh IEC 61966-2-1 dan Modul Warna CSS W3C, sehingga HEX, RGB, dan HSL sepenuhnya dapat saling menggantikan; hanya CMYK yang memerlukan konversi perkiraan yang bergantung pada perangkat.