Cara membuat logo putih untuk background gelap

Logo untuk mode gelap (logo dark mode) adalah versi logo Anda yang dibuat agar tetap jelas di atas hitam atau abu-abu gelap: biasanya putih seluruhnya, atau dalam warna merek Anda dengan bagian gelapnya diubah menjadi terang. Untuk membuatnya, ganti warna bagian gelap logo menjadi putih di editor vektor, atau seret logo ke alat gratis Pembuat logo putih; lalu simpan sebagai SVG atau PNG transparan dan gunakan di mana pun background-nya gelap.

Butuh logo sebuah perusahaan lebih dulu? Logo Finder gratis menemukannya dari alamat situs web dan mengunduhnya dalam versi putih, hitam, atau warna apa pun, siap untuk background gelap. Sumber diperiksa pada 4 November 2026.

Apa itu logo untuk mode gelap?

Logo untuk mode gelap adalah versi terang di atas gelap dari sebuah logo, yang dipakai setiap kali background-nya gelap: situs web atau aplikasi dalam mode gelap, kaos hitam, kartu hitam doff, atau slide gelap. Desainer juga menyebutnya logo reverse. Versi ini mempertahankan bentuk logo dan mengganti bagian yang akan tenggelam di atas hitam, seperti teks hitam atau biru navy, dengan putih atau warna terang.

Orang memilih tema gelap di pengaturan sistem operasi atau browser mereka, dan situs web membaca pilihan itu melalui media feature prefers-color-scheme, yang dipakai “untuk mendeteksi apakah pengguna meminta tema warna terang atau gelap” (MDN). Logo yang dibuat hanya untuk background putih akan terlihat rusak di halaman tersebut, itulah sebabnya sebuah merek membutuhkan kedua versi.

Kapan Anda membutuhkan logo untuk mode gelap?

Anda membutuhkan logo untuk mode gelap di mana pun logo Anda berada di atas background gelap: situs web atau aplikasi dengan tema gelap, email yang dibuka dalam mode gelap, slide, video, atau banner media sosial yang gelap, serta produk gelap seperti kaos hitam, kartu hitam doff, hot print di atas warna pekat, atau tinta putih di tas gelap. Tabel ini mencocokkan setiap background dengan versi yang paling mudah terbaca.

Untuk melihat logo putih atau hot print di kartu hitam doff sebelum dibuat, seret logo ke generator mockup kartu kredit 3D gratis, atau tekan Coba di kartu 3D di Logo Finder: sekali klik mengubah logo menjadi hot print emas atau spot UV di kartu berukuran asli di bawah cahaya studio. Akun Proofscene menyimpan satu logo untuk background gelap dan satu untuk background terang, dan tombol Simpan sebagai logo saya di Logo Finder langsung memasukkan salah satunya ke pengaturan logo perusahaan Anda.

Bagaimana cara membuat versi putih sebuah logo?

Cara tercepat membuat versi putih sebuah logo adalah mengganti warna setiap bentuk di dalamnya menjadi putih, yang cukup sekali klik di pembuat logo putih atau sekitar satu menit di editor vektor. Pilih metode yang sesuai dengan file yang Anda miliki: alat sekali klik untuk file apa pun, program desain untuk master vektor, atau satu baris CSS untuk logo yang sudah ada di halaman web.

1. Sekali klik, gratis

Seret logo Anda ke Pembuat logo putih lalu pilih “Putih”, “Hitam”, atau “Warna apa pun”: seluruh logo berubah menjadi satu warna itu di atas background transparan. Alat ini menerima file PNG, JPG, WebP, GIF, AVIF, SVG, PDF, AI, dan PSD, bekerja di dalam browser Anda sehingga file tidak pernah keluar dari perangkat Anda, dan menyediakan hasilnya untuk diunduh sebagai SVG, PDF, EPS, atau PNG transparan hingga 4096 px.

2. Di Illustrator, Figma, atau Inkscape

Buka file vektor, pilih semua bentuk, lalu atur warna isiannya (fill) menjadi putih (#FFFFFF), begitu juga garis tepinya (stroke) jika logo memilikinya. Untuk mempertahankan aksen cerah tetap berwarna, pilih bentuk yang gelap saja. Lihat hasilnya di artboard hitam, lalu simpan SVG untuk layar dan PDF atau EPS untuk cetak. Penjelasan format file logo membahas file mana untuk kebutuhan apa.

3. Dengan CSS, di situs web

Di halaman web, satu baris kode mengubah gambar logo apa pun menjadi putih. brightness(0) membuat gambar “sepenuhnya hitam” (MDN) dan invert(1) “menerapkan inversi penuh” (MDN), yang mengubah hitam itu menjadi putih. Karena cara ini mengubah setiap warna menjadi putih, cara ini paling cocok untuk logo satu warna.

.logo-on-dark {
  filter: brightness(0) invert(1);
}

Untuk logo yang dipasang inline sebagai SVG, atur bentuknya ke fill="currentColor". Kata kunci currentColor “mewakili nilai properti color sebuah elemen” (MDN), sehingga logo mengikuti warna teks halaman di sekitarnya: teks terang dalam mode gelap otomatis membawa logo terang.

Bagaimana cara membuat logo putih di Canva, Photoshop, atau PowerPoint?

Masing-masing aplikasi ini bisa membuat logo putih dalam waktu kurang dari satu menit: Canva mengganti warna logo yang warnanya bisa diedit, Photoshop mengubah layer logo menjadi putih dengan overlay, dan PowerPoint melakukannya lewat kecerahan gambar. Untuk logo yang warnanya tidak bisa diganti oleh aplikasi, buat versi putihnya sekali di alat gratis Pembuat logo putih, lalu sisipkan file itu sebagai gantinya.

Di Canva

Pilih logo di desain Anda. Jika warnanya muncul sebagai kotak warna di toolbar, klik setiap kotak dan pilih putih di panel “Warna” yang terbuka (Canva Help Center). Canva mencatat bahwa jika tidak ada kotak warna yang muncul, warna elemen itu tidak bisa diubah, seperti pada logo yang diunggah sebagai gambar PNG atau JPG. Untuk logo seperti itu, masukkan PNG atau SVG putihnya: buka tab “Unggahan”, pilih “Unggah file”, lalu pilih filenya (Canva Help Center).

Di Photoshop

Letakkan logo di layer tersendiri dengan background transparan, lalu ubah setiap pikselnya menjadi putih: layer style “Color Overlay” berwarna putih melakukannya dalam satu langkah, dan adjustment “Hue/Saturation” dengan “Lightness” di nilai tertinggi memberi hasil yang sama. Periksa di atas layer gelap di bawahnya, lalu ekspor PNG dengan transparansi, jangan pernah JPG, agar logo putih tetap memiliki background bening.

Di PowerPoint

Pilih logo, buka tab “Picture Format”, pilih “Corrections”, lalu “Picture Corrections Options”, dan geser slider “Brightness” ke nilai tertinggi (Microsoft Support). Logo pada PNG transparan berubah menjadi putih sementara background-nya tetap bening, siap untuk slide gelap. Tombol “Corrections” yang sama juga ada di tab “Picture Format” di Word.

Untuk logo bergerak, alat gratis GIF logo berputar mengubah versi putih menjadi logo berputar di atas background gelap, sebagai GIF berulang atau MP4.

Apakah logo untuk mode gelap harus putih bersih?

Logo untuk mode gelap tidak harus putih bersih: putih seluruhnya adalah pilihan paling aman di foto, video, dan background yang ramai, sedangkan versi dua warna yang mempertahankan warna merek yang cerah sering kali lebih mencerminkan merek di atas hitam polos. Yang penting, setiap bagian tetap terlihat: bagian hitam, biru navy, dan cokelat tua harus diubah menjadi terang, sedangkan aksen cerah seperti kuning atau biru muda bisa tetap seperti aslinya.

Standar aksesibilitas menyerahkan pilihan ini kepada Anda: WCAG menyatakan bahwa “teks yang merupakan bagian dari logo atau nama merek tidak memiliki persyaratan kontras” (W3C). Rasio 3:1 yang ditetapkan standar yang sama untuk teks besar tetap menjadi batas bawah yang masuk akal untuk logo yang harus terbaca sekilas. Tiga pemeriksaan ini membantu:

• Garis tipis dan teks kecil, seperti tagline di bawah simbol logo, membutuhkan kontras paling kuat; putih adalah pilihan aman untuk keduanya.
• Background abu-abu gelap, yang umum di tema gelap, memiliki tingkat kecerahan yang lebih dekat dengan warna midtone dibandingkan hitam, jadi periksa logo di background yang sebenarnya, bukan hanya di hitam pekat.
• Warna merek yang membawa identitas, seperti simbol berwarna merah, sering kali bisa dipertahankan; uji masing-masing di atas background gelap pada ukuran logo terkecil.

Logo Finder memungkinkan Anda mengganti background pratinjau logo apa pun menjadi hitam, abu-abu, putih, pola kotak-kotak, atau warna merek, sehingga setiap versi bisa dinilai pada background yang akan digunakan.

Bagaimana cara menampilkan logo untuk mode gelap di situs web?

Untuk menampilkan logo untuk mode gelap di situs web, berikan kedua file kepada browser dalam elemen <picture> dan biarkan media feature prefers-color-scheme yang memilih: pengunjung dalam mode gelap mendapatkan versi putih, sedangkan pengunjung lain mendapatkan versi asli. GitHub mendukung pola yang sama untuk gambar terang dan gelap di file README (GitHub changelog). Kodenya:

<picture>
  <source srcset="/logo-white.svg" media="(prefers-color-scheme: dark)">
  <img src="/logo.svg" alt="Company name" width="200" height="50">
</picture>

Dua cara lain cocok untuk setup yang berbeda. Situs dengan tombol tema terang dan gelapnya sendiri bisa menukar logo dengan class CSS yang sama yang mengganti tema. Dan SVG yang dipasang dengan tag <img> bisa membawa style @media (prefers-color-scheme: dark) sendiri, yang mengikuti skema warna halaman tempat SVG itu disematkan, seperti yang dijelaskan MDN:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
  <style>
    .mark { fill: #0e1b2c; }
    @media (prefers-color-scheme: dark) { .mark { fill: #ffffff; } }
  </style>
  <path class="mark" d="M10 10h40v30H10z"/>
</svg>

Bagaimana logo untuk mode gelap bekerja di email?

Program email menangani mode gelap dengan tiga cara berbeda, jadi logo untuk mode gelap di email harus tetap terlihat di ketiganya: sebagian membiarkan warna apa adanya, sebagian hanya membalik background terang, dan sebagian membalik semuanya. Panduan mode gelap dari Litmus untuk pemasar email, dengan tabel program email bertanggal Februari 2025, mengelompokkan program-program tersebut seperti ini:

Litmus menyarankan tiga solusi: gunakan PNG transparan, tambahkan “glow atau stroke putih solid di sekitar ikon atau logo” agar logo gelap terbaca di background apa pun, dan tukar ke versi putih dengan @media (prefers-color-scheme: dark), yang menurut tabelnya didukung di Apple Mail di macOS serta di iPhone dan iPad (Litmus). Ukuran logo untuk tanda tangan email ada di ukuran logo untuk web, media sosial, email, dan cetak.

Apakah favicon membutuhkan versi mode gelap?

Favicon membutuhkan versi mode gelap jika favicon itu gelap di atas background transparan, karena tab browser dalam tema gelap juga gelap. Favicon SVG bisa membawa style @media (prefers-color-scheme: dark) sendiri dan berganti warna mengikuti tema, yang menurut panduan web.dev tentang favicon adaptif berfungsi di browser berbasis Chromium dan Firefox; sediakan favicon.ico di sampingnya untuk browser lainnya (web.dev).

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Favicon paling sederhana terbaca di kedua tema tanpa perlu beralih: simbol logo di atas kotak persegi berwarna merek solid. Paket favicon dari Logo Finder membuat ICO, ikon PNG 16 sampai 512 px, dan site.webmanifest dari logo apa pun, alat Unduh favicon menunjukkan cara situs lain membuat favicon mereka, dan ukuran logo mencantumkan setiap ukuran favicon dan tempat pemakaiannya. Untuk mencari logo perusahaan secara manual terlebih dahulu, lihat cara mencari logo perusahaan.