Jak zmienić logo na białe do ciemnych teł

Logo w trybie ciemnym to wersja logo przygotowana tak, by pozostała wyraźna na czarnym lub ciemnoszarym tle: zwykle całkowicie biała albo w kolorach marki z ciemnymi elementami zmienionymi na jasne. Aby ją zrobić, zmień w edytorze wektorowym kolor ciemnych elementów logo na biały albo upuść logo w darmowym narzędziu Białe logo; potem zapisz je jako SVG lub przezroczysty PNG i używaj wszędzie tam, gdzie tło jest ciemne.

Potrzebujesz najpierw logo firmy? Darmowy Logo Finder znajdzie je na podstawie adresu strony i pobierze w wersji białej, czarnej lub w dowolnym kolorze, gotowe na ciemne tło. Źródła sprawdzono 4 listopada 2026.

Czym jest logo w trybie ciemnym?

Logo w trybie ciemnym to jasna wersja logo na ciemne tło, używana zawsze wtedy, gdy tło jest ciemne: na stronie lub w aplikacji w trybie ciemnym, na czarnej koszulce, matowej czarnej karcie czy ciemnym slajdzie. Projektanci nazywają je też logo w kontrze. Zachowuje kształty logo i zamienia elementy, które zniknęłyby na czerni, takie jak czarny lub granatowy tekst, na białe albo w jasnym odcieniu.

Ciemny motyw wybiera się w ustawieniach systemu operacyjnego lub przeglądarki, a strony odczytują ten wybór przez cechę mediów prefers-color-scheme, która służy do tego, by „wykryć, czy użytkownik zażądał jasnego lub ciemnego motywu kolorystycznego” (MDN). Logo przygotowane tylko na białe tło wygląda na takich stronach jak zepsute, dlatego marka potrzebuje obu wersji.

Kiedy potrzebujesz logo w trybie ciemnym?

Logo w trybie ciemnym potrzebujesz wszędzie tam, gdzie Twoje logo jest na ciemnym tle: na stronie lub w aplikacji z ciemnym motywem, w e-mailu otwartym w trybie ciemnym, na ciemnym slajdzie, w wideo lub na banerze w mediach społecznościowych oraz na ciemnych produktach, takich jak czarne koszulki, matowe czarne karty, złocenie na głębokim kolorze czy biała farba na ciemnej torbie. Tabela dopasowuje do każdego tła wersję, która jest na nim najbardziej czytelna.

Aby zobaczyć białe lub złocone logo na matowej czarnej karcie, zanim powstanie, upuść je w darmowym generatorze mockupów karty kredytowej 3D albo kliknij Wypróbuj na karcie 3D w narzędziu Logo Finder: jedno kliknięcie zamienia logo w złocenie lub lakier wybiórczy UV na karcie w naturalnej wielkości, w świetle studyjnym. Konta Proofscene przechowują jedno logo na ciemne tła i jedno na jasne, a przyciski Zapisz jako moje logo w narzędziu Logo Finder umieszczają każde z nich prosto w ustawieniach logo Twojej firmy.

Jak zrobić białą wersję logo?

Najszybszy sposób na białą wersję logo to zmiana koloru każdego jego kształtu na biały: w kreatorze białego logo zajmuje to jedno kliknięcie, a w edytorze wektorowym mniej więcej minutę. Wybierz metodę pasującą do pliku, który masz: narzędzie na jedno kliknięcie dla dowolnego pliku, program graficzny dla wektorowego oryginału albo jedną linię CSS dla logo, które już jest na stronie.

1. Jednym kliknięciem, za darmo

Upuść logo w narzędziu Białe logo i wybierz „Białe”, „Czarne” lub „Dowolny kolor”: całe logo przyjmie ten jeden kolor na przezroczystym tle. Narzędzie przyjmuje pliki PNG, JPG, WebP, GIF, AVIF, SVG, PDF, AI i PSD, działa w Twojej przeglądarce, więc plik nie opuszcza Twojego urządzenia, i pobiera wynik jako SVG, PDF, EPS lub przezroczysty PNG o rozmiarze do 4096 px.

2. W Illustratorze, Figmie lub Inkscape

Otwórz plik wektorowy, zaznacz wszystkie kształty i ustaw kolor wypełnienia na biały (#FFFFFF), a jeśli logo ma obrysy, także kolor obrysu. Aby zachować jasny akcent w kolorze, zaznacz tylko ciemne kształty. Sprawdź wynik na czarnym obszarze roboczym, a potem zapisz SVG na ekrany oraz PDF lub EPS do druku. Poradnik Formaty plików logo bez tajemnic wyjaśnia, który plik gdzie wysłać.

3. W CSS, na stronie internetowej

Na stronie internetowej jedna linia zmienia dowolny obraz logo na biały. brightness(0) sprawia, że obraz staje się „całkowicie czarny” (MDN), a invert(1) „stosuje pełne odwrócenie” (MDN), które zamienia tę czerń w biel. Ponieważ na biało zmienia się każdy kolor, ten sposób najlepiej sprawdza się w logo jednokolorowych.

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

W przypadku logo osadzonego bezpośrednio jako SVG ustaw dla jego kształtów fill="currentColor". Słowo kluczowe currentColor „reprezentuje wartość właściwości color elementu” (MDN), więc logo przyjmuje kolor tekstu otaczającej je strony: jasny tekst w trybie ciemnym oznacza też jasne logo.

Jak zmienić logo na białe w Canva, Photoshopie lub PowerPoincie?

Każda z tych aplikacji zmieni logo na białe w niecałą minutę: Canva zmienia kolor logo, jeśli może edytować jego kolory, Photoshop zmienia warstwę logo na białą za pomocą nakładki, a PowerPoint robi to jasnością obrazu. Jeśli aplikacja nie potrafi zmienić koloru logo, przygotuj białą wersję raz w darmowym narzędziu Białe logo i wstaw ten plik.

W Canva

Zaznacz logo w projekcie. Jeśli jego kolory widać jako kafelki kolorów na pasku narzędzi, kliknij każdy kafelek i wybierz biel w panelu kolorów, który się otworzy (Centrum pomocy Canva). Canva wyjaśnia, że gdy kafelki kolorów się nie pojawiają, kolorów elementu nie da się zmienić, tak jak w przypadku logo przesłanego jako obraz PNG lub JPG. Wtedy wstaw biały PNG lub SVG: otwórz kartę „Przesłane”, wybierz „Prześlij pliki” i wskaż plik (Centrum pomocy Canva).

W Photoshopie

Umieść logo na osobnej warstwie z przezroczystym tłem, a potem zmień każdy jego piksel na biały: w jednym kroku zrobi to styl warstwy z białą nakładką koloru (Color Overlay), a ten sam efekt da korekta Barwa/nasycenie (Hue/Saturation) z jasnością ustawioną na maksimum. Sprawdź wynik na ciemnej warstwie pod spodem, a potem wyeksportuj PNG z przezroczystością, nigdy JPG, aby białe logo zachowało przezroczyste tło.

W PowerPoincie

Zaznacz logo, otwórz kartę „Formatowanie obrazu”, wybierz „Korekty”, a potem „Opcje korekty obrazu” i przesuń suwak „Jasność” na maksimum (Pomoc techniczna firmy Microsoft). Logo na przezroczystym PNG zmieni się na białe, a jego tło pozostanie przezroczyste, gotowe na ciemny slajd. Ten sam przycisk „Korekty” znajdziesz na karcie „Formatowanie obrazu” w Wordzie.

Jeśli chcesz ruchu, darmowe narzędzie Obracające się logo GIF zamieni białą wersję w obracające się logo na ciemnym tle, jako zapętlony GIF lub MP4.

Czy logo w trybie ciemnym powinno być czysto białe?

Logo w trybie ciemnym nie musi być czysto białe: całkowita biel to najbezpieczniejszy wybór na zdjęciach, wideo i tłach pełnych detali, a wersja dwukolorowa, która zachowuje jasny kolor marki, na czystej czerni często lepiej oddaje markę. Liczy się to, by każdy element pozostał widoczny: czarne, granatowe i ciemnobrązowe elementy muszą stać się jasne, a jasny akcent, na przykład żółty lub jasnoniebieski, może zostać bez zmian.

Standard dostępności zostawia wybór Tobie: WCAG mówi, że „tekst będący częścią logo lub nazwy marki nie podlega wymaganiom dotyczącym kontrastu” (W3C). Współczynnik 3:1, który ten sam standard wyznacza dla dużego tekstu, to nadal rozsądne minimum dla logo, które ludzie muszą odczytać na pierwszy rzut oka. Warto sprawdzić trzy rzeczy:

• Cienkie linie i drobny tekst, na przykład hasło pod znakiem, wymagają najmocniejszego kontrastu; dla nich bezpiecznym wyborem jest biel.
• Ciemnoszare tła, częste w ciemnych motywach, są bliżej kolorów o średniej jasności niż czerń, więc sprawdzaj logo na prawdziwym tle, a nie tylko na czystej czerni.
• Kolory marki, które niosą tożsamość, jak czerwony znak, często mogą zostać; sprawdź każdy z nich na ciemnym tle przy najmniejszym rozmiarze logo.

Logo Finder pozwala przełączać podgląd dowolnego logo między czernią, szarością, bielą, szachownicą i kolorem marki, więc każdą wersję ocenisz na tle, na którym się znajdzie.

Jak pokazać logo w trybie ciemnym na stronie internetowej?

Aby pokazać logo w trybie ciemnym na stronie internetowej, daj przeglądarce oba pliki w elemencie <picture> i pozwól, by wyboru dokonała cecha mediów prefers-color-scheme: odwiedzający w trybie ciemnym dostają białą wersję, wszyscy pozostali oryginał. GitHub obsługuje ten sam wzorzec dla jasnych i ciemnych obrazów w plikach README (GitHub changelog). Kod HTML:

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

Do innych konfiguracji pasują dwa inne sposoby. Strona z własnym przełącznikiem jasnego i ciemnego motywu może podmieniać logo tą samą klasą CSS, która przełącza motyw. A SVG wstawione znacznikiem <img> może zawierać własne style @media (prefers-color-scheme: dark), które podążają za schematem kolorów strony, w której jest osadzone, jak wyjaśnia 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>

Jak logo w trybie ciemnym działa w e-mailach?

Programy pocztowe obsługują tryb ciemny na trzy różne sposoby, więc logo w trybie ciemnym w e-mailu musi przetrwać wszystkie trzy: jedne zostawiają kolory bez zmian, inne odwracają tylko jasne tła, a jeszcze inne odwracają wszystko. Poradnik Litmus o trybie ciemnym dla e-mail marketerów, z zestawieniem programów z lutego 2025 roku, grupuje programy tak:

Litmus proponuje trzy rozwiązania: używać przezroczystych PNG, dodać „poświatę lub jednolity biały obrys wokół ikony lub logo”, aby ciemne logo było czytelne na każdym tle, oraz podmieniać je na białą wersję za pomocą @media (prefers-color-scheme: dark), co według zestawienia działa w Apple Mail na macOS oraz na iPhonie i iPadzie (Litmus). Rozmiary logo w podpisie e-mail znajdziesz w poradniku Rozmiary logo do internetu, mediów społecznościowych, e-maili i druku.

Czy favicon potrzebuje wersji na tryb ciemny?

Favicon potrzebuje wersji na tryb ciemny, gdy jest ciemny na przezroczystym tle, bo karty przeglądarki w ciemnym motywie też są ciemne. Favicon SVG może zawierać własne style @media (prefers-color-scheme: dark) i zmieniać kolory razem z motywem, co według poradnika web.dev o adaptacyjnych faviconach działa w przeglądarkach opartych na Chromium i w Firefoksie; obok zostaw plik favicon.ico dla wszystkich innych przeglądarek (web.dev).

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

Najprostszy favicon jest czytelny w obu motywach bez żadnego przełączania: znak na kwadracie w jednolitym kolorze marki. Pakiet faviconów w narzędziu Logo Finder tworzy z dowolnego logo plik ICO, ikony PNG od 16 do 512 px i plik site.webmanifest, narzędzie Pobierz favicon pokazuje, jak robią to inne strony, a poradnik Rozmiary logo podaje każdy rozmiar faviconu i miejsce, w którym jest używany. Aby najpierw samodzielnie znaleźć logo firmy, zobacz poradnik Jak znaleźć logo firmy.