Kalkulator Pembalik Warna

Warna terbalik adalah warna dengan R, G, dan B masing-masing dikurangkan dari 255

Saat sebuah warna dibalik, ketiga nilai merah, hijau, dan biru berpindah ke ujung yang berlawanan. Setiap nilai berkisar dari 0 sampai 255, jadi nilai terbaliknya adalah 255 dikurangi nilai asli. Warna contoh #3498DB adalah RGB(52, 152, 219); jika dibalik, hasilnya RGB(203, 103, 36), yaitu #CB6724. Efek negatif pada aplikasi penyunting foto dan filter: invert(1) pada CSS menghitungnya dengan cara yang sama.

Kalkulator di atas menampilkan warna terbalik dalam HEX, RGB, dan HSL begitu Anda memasukkan kode warna. Warna asli dan warna terbaliknya diletakkan berdampingan, lalu rasio kontras diukur jika keduanya dipakai sebagai warna teks satu sama lain. Perbedaan antara warna terbalik dan warna komplementer juga bisa dibandingkan bersama warna yang hanya dibalik kecerahannya. Jika Anda memasukkan beberapa warna sekaligus, warna asli muncul di baris atas strip film dan warna terbaliknya di baris bawah.

Cara memakai kalkulator

1. Pada kolom warna, masukkan kode HEX seperti #3498db, 3498db, atau #fff, atau tulisan CSS seperti rgb(52, 152, 219), hsl(204 70% 53%), dan tomato. Tiga angka (52 152 219) dibaca sebagai RGB. Ketuk contoh warna di sisi kanan kolom untuk memilih warna dengan pemilih warna.
2. Huruf besar pada hasil adalah warna terbalik. Huruf kecil di atas setiap digit adalah digit aslinya, sehingga Anda bisa langsung melihat bagaimana setiap digit heksadesimal berbalik. Tombol di sisi kanan baris HEX, RGB, dan HSL menyalin format yang Anda perlukan.
3. Sisi kiri tampilan cermin adalah warna asli dan sisi kanan adalah warna terbalik. Tulisan "Aa" di atas setiap contoh diwarnai dengan warna di seberangnya, sehingga Anda bisa melihat langsung seberapa jelas warna terbalik terbaca sebagai warna teks. Angka di tengah adalah rasio kontras kedua warna.
4. Seret batang pada cermin kanal atau ubah angkanya untuk mengganti warna asli. Lingkaran kosong adalah nilai asli dan lingkaran penuh adalah nilai terbalik; keduanya selalu berjarak sama dari garis tengah.
5. Jika Anda menempelkan beberapa warna yang dipisahkan koma, spasi, atau baris baru, hingga 12 warna masuk sekaligus ke strip film. Tombol "Salin semua HEX terbalik" menyalin daftar warna terbalik, satu per baris.

Cara menghitung: kurangkan dari 255, atau kurangkan setiap digit heksadesimal dari F

Kode HEX menuliskan nilai merah, hijau, dan biru dalam heksadesimal, dua digit untuk masing-masing. Karena itu pembalikan dihitung dalam tiga langkah: ubah setiap pasangan digit ke desimal, kurangkan dari 255, lalu tulis kembali sebagai dua digit heksadesimal.

Anda tidak harus mengubahnya ke desimal. Karena 255 adalah FF dalam heksadesimal, mengurangkan nilai dua digit dari FF sama saja dengan mengurangkan setiap digit dari F tanpa meminjam. Jika Anda hafal pasangan di bawah, Anda bisa menghitung di kepala bahwa kebalikan #3498DB adalah #CB6724.

Pasangan ini berlaku dua arah: 8 menjadi 7, dan C menjadi 3.

HEX 3, 4, dan 8 digit serta transparansi

Penulisan warna CSS menerima heksadesimal 3, 4, 6, dan 8 digit. #F0F yang 3 digit sama dengan #FF00FF yang setiap digitnya ditulis dua kali, jadi jika setiap digit dikurangkan dari F, hasil baliknya tetap 3 digit, yaitu #0F0 (= #00FF00). Digit terakhir pada HEX 4 dan 8 digit adalah transparansi (alfa). Pembalikan hanya mengubah warna dan membiarkan transparansi, jadi kebalikan #3498DB80 adalah #CB672480. Filter invert() pada CSS juga hanya mengubah merah, hijau, dan biru, dan tidak menyentuh alfa.

Warna terbalik dan rasio kontras dari warna yang sering dipakai

Rasio kontras adalah selisih kecerahan dua warna yang diukur dengan rumus WCAG, ketika warna asli dipakai sebagai latar dan warna terbalik sebagai teks (atau sebaliknya). Penilaiannya memakai standar AA 4,5:1 untuk teks isi, 3:1 untuk teks besar, dan AAA 7:1; nilai yang sedikit di bawah standar tidak dibulatkan ke atas.

Tidak ada warna yang kebalikannya sama dengan dirinya sendiri, seperti #7F7F7F yang merupakan kebalikan abu-abu #808080. Sebabnya, 255 adalah bilangan ganjil sehingga tidak ada bilangan bulat yang memenuhi x = 255 − x. Pasangan terdekatnya adalah #808080 dan #7F7F7F, yang ketiga nilainya hanya berbeda 1.

Warna terbalik adalah "komplementer + kecerahan dibalik"

Warna terbalik dan warna komplementer sering dianggap sama, padahal berbeda. Perbedaannya jelas jika dilihat dalam HSL (rona, saturasi, kecerahan). Saat RGB dibalik, nilai terbesar dan nilai terkecil bertukar tempat, sehingga pada roda warna warnanya berpindah tepat 180° ke seberang, kecerahan L menjadi 100% − L, dan saturasi tidak berubah. Warna komplementer hanya memutar rona 180° dan membiarkan kecerahannya.

Kotak "Bandingkan dengan warna komplementer" pada kalkulator menampilkan keempat warna ini dalam susunan 2×2. Warna yang berseberangan secara diagonal saling berkebalikan: kebalikan warna asli adalah warna terbalik, dan kebalikan warna komplementer adalah "hanya kecerahan dibalik". Warna dengan kecerahan tepat 50% (warna murni seperti #FF0000 dan #0000FF, atau #CC3333) tetap 50% setelah kecerahannya dibalik, sehingga warna terbalik dan komplementernya sama. Sebaliknya, abu-abu tidak punya rona, jadi komplementernya adalah dirinya sendiri dan pembalikan hanya mengubah kecerahan.

Warna terbalik tidak selalu terbaca jelas

Orang mudah mengira bahwa warna yang berlawanan pasti kontrasnya besar, tetapi rasio kontras ditentukan oleh selisih kecerahan, bukan rona. Warna dengan kecerahan sedang tetap memiliki kecerahan yang mirip setelah dibalik. Warna contoh #3498DB dan kebalikannya #CB6724 berseberangan secara rona (biru dan oranye), tetapi rasio kontrasnya hanya 1,20:1, sehingga tulisan satu di atas yang lain nyaris tidak terbaca.

Contoh abu-abu menunjukkan batasnya. Abu-abu yang sama atau lebih gelap dari #484848, atau sama atau lebih terang dari #B7B7B7, berbeda 4,5:1 atau lebih dari kebalikannya sehingga bisa dipakai untuk teks isi. Abu-abu antara #585858 dan #A7A7A7 bahkan tidak mencapai 3:1. Warna berwarna mengikuti pola yang sama: hanya warna yang sangat terang atau sangat gelap yang cocok dipasangkan dengan kebalikannya sebagai teks dan latar. Jika Anda perlu menyesuaikan kontras latar dan teks secara terpisah, periksa dengan pemeriksa aksesibilitas warna yang dipakai bersama alat ini.

Pembalikan apa adanya tidak cocok untuk mode gelap

Jika layar terang diubah menjadi gelap dengan membalik warna apa adanya, kecerahan dan rona sama-sama terbalik. Tombol biru menjadi oranye dan tanda sukses hijau menjadi magenta, sehingga arti aslinya kabur. Karena itu fitur pembalikan di ponsel pun dibagi dua. Dokumen Dukungan Apple menjelaskan bahwa Pembalikan Klasik membalikkan semua warna pada layar, sedangkan Pembalikan Cerdas membalikkan warna pada layar kecuali untuk gambar, media, dan beberapa app yang menggunakan gaya warna gelap.

Dalam desain, warna yang ronanya dipertahankan dan hanya kecerahannya yang dibalik adalah titik awal yang lebih baik. Kotak "Hanya kecerahan dibalik" pada kalkulator menampilkan warna itu. Di CSS, filter: invert(1) hue-rotate(180deg) memberi efek yang mirip, tetapi hanya perkiraan. hue-rotate() bukan perhitungan yang memutar sudut rona HSL, melainkan matriks yang kurang lebih menjaga kecerahan, sehingga hasilnya sangat bergantung pada warna aslinya.

Warna murni dengan kecerahan 50% tidak berubah ketika kecerahannya dibalik, tetapi kombinasi CSS mengubah merah menjadi merah muda pucat dan biru menjadi ungu yang sangat muda. Foto dan logo juga ikut terbalik, jadi sebaiknya filter hanya dipakai pada elemen satu warna seperti ikon, sedangkan warna lainnya ditentukan sendiri.

Membalik warna dengan CSS, Excel, dan kode

• CSS: filter: invert(1) (atau 100%) membalik semua warna elemen dengan cara yang sama seperti kalkulator ini. Spesifikasi W3C menetapkan bahwa fungsi filter dihitung di ruang warna sRGB, dan nilai bawaannya 1 jika dihilangkan. Nilai antara 0 dan 1 mencampur warna asli dengan warna terbalik; pada 0,5 semua kanal menjadi nilai tengah sehingga warna apa pun berubah menjadi abu-abu (#808080).
• JavaScript: untuk string HEX 6 digit h (tanpa #), balikkan dengan '#' + (0xFFFFFF ^ parseInt(h, 16)).toString(16).padStart(6, '0'). XOR dengan FFFFFF memberi hasil yang sama dengan mengurangkan setiap digit dari F.
• Python: '#%06x' % (0xFFFFFF ^ int(h, 16)) menghasilkan nilai yang sama.
• Excel: jika sel A1 berisi #3498DB, =DEC2HEX(16777215-HEX2DEC(SUBSTITUTE(A1,"#","")),6) mengembalikan CB6724. Pada Excel berbahasa Indonesia, nama fungsinya tetap DEC2HEX. Jika pengaturan wilayah Anda memakai koma sebagai pemisah desimal, pemisah argumen biasanya titik koma (;), jadi ganti koma di antara argumen dengan titik koma. 16777215 adalah FFFFFF yang ditulis dalam desimal, dan argumen terakhir 6 menambahkan angka 0 di depan agar hasilnya enam digit.

Kesalahan yang sering terjadi

• Memakai warna terbalik sebagai warna komplementer: pembalikan juga membalik kecerahan. Jika Anda memerlukan warna berlawanan dengan kecerahan yang sama, pakai warna komplementer. Keduanya sama hanya ketika kecerahannya 50%.
• Mengira warna terbalik pasti cukup kontras: warna dengan kecerahan sedang punya rasio kontras mendekati 1:1 terhadap kebalikannya. Periksa rasio kontras sebelum memakainya sebagai teks dan latar.
• Membalik seluruh HEX 8 digit: 80 pada akhir #3498DB80 adalah transparansi. Jika kedelapan digit dikurangkan dari F, hasilnya #CB67247F dan transparansinya ikut berubah. Balikkan hanya enam digit pertama.
• Mengurangkan nilai RGB dari 256: rentang nilainya 0 sampai 255, jadi acuannya 255. Jika dikurangkan dari 256, nilai 0 menjadi 256 dan keluar dari rentang.
• Menganggap CSS invert(1) hue-rotate(180deg) sebagai "hanya kecerahan dibalik" yang tepat: itu perkiraan; misalnya merah #FF0000 menjadi #FF9292.
• Mencampuradukkan pembalikan foto dengan pembalikan kode warna: kalkulator ini membalik kode warna. Untuk membuat seluruh foto menjadi negatif, pakai fitur balik pada penyunting gambar atau filter CSS. Prinsip perhitungannya sama.

Batasan dan catatan

• Pembalikan didasarkan pada sRGB 8 bit (0 sampai 255). Warna yang melampaui sRGB, seperti display-p3 atau oklch, dibalik setelah peramban mengubahnya ke sRGB.
• Nilai HSL, warna komplementer, dan "hanya kecerahan dibalik" dibulatkan setelah dihitung dengan desimal, sehingga mengubah nilai HSL kembali ke RGB bisa menghasilkan selisih sekitar 1.
• Rasio kontras dihitung dari dua warna buram tanpa transparansi. Warna semitransparan tampil berbeda bergantung pada latar yang sebenarnya ada di belakangnya.
• Nama warna CSS yang dikenali hanya 148 nama standar. Nama yang dipisahkan spasi seperti "dark blue" atau nama khusus pada alat desain perlu dimasukkan dalam HEX.

Acuan: perhitungan pembalikan sama dengan definisi invert() pada W3C Filter Effects Module Level 1, dan rasio kontras mengikuti definisi luminans relatif dan rasio kontras pada WCAG 2.2. Nilai filter CSS pada tabel diperiksa di peramban berbasis Chromium pada 20 Oktober 2026.

Sumber

• 01W3C — Filter Effects Module Level 1invert() memakai tableValues amount dan 1 − amount pada setiap kanal, alfa tidak diubah, fungsi filter dihitung di sRGB, nilai bawaan 1, hue-rotate() adalah matriks feColorMatrix
• 02W3C — Web Content Accessibility Guidelines (WCAG) 2.2Rasio kontras (L1 + 0,05) / (L2 + 0,05) dan rumus luminans relatif
• 03W3C — Understanding SC 1.4.3 Contrast (Minimum)Teks isi 4,5:1, teks besar 3:1, nilai hitungan tidak dibulatkan (4,499:1 bukan 4,5:1)
• 04W3C — CSS Color Module Level 4Notasi heksadesimal 3, 4, 6, dan 8 digit, dua digit terakhir adalah alfa, rumus konversi RGB dan HSL
• 05MDN — invert() (bahasa Inggris)100% membalik sepenuhnya, 0% tidak mengubah, nilai bawaan 1
• 06Dukungan Apple — Menggunakan preferensi layar dan ukuran teks di iPhone, iPad, dan iPod touchPerbedaan Pembalikan Klasik dan Pembalikan Cerdas
• 07Dukungan Microsoft — Fungsi DEC2HEXSintaks DEC2HEX(number, places); argumen kedua places menambahkan angka 0 di depan

Pertanyaan yang sering diajukan

Alat yang dipakai bersama