Zanim napiszesz pierwszą linijkę CSS
Czym jest Design Mixer i po co go używać?
Kolory i fonty to dwie decyzje, które najmocniej wyznaczają charakter strony — a zwykle podejmuje się je osobno i „na oko". Design Mixer zestawia je w jednym miejscu: widzisz, jak wybrana paleta zachowuje się z wybraną parą fontów, zanim cokolwiek zakodujesz. Bez tego projekt po kilku tygodniach wygląda jak zlepek pięciu różnych stron.
Wybierasz dwa fonty z Google Fonts oraz kolor primary i accent, a narzędzie buduje pełne skale odcieni (50–700), neutralną skalę szarości i mapowanie na tryb jasny i ciemny. Kontrast każdej kluczowej pary kolorów jest od razu sprawdzany według WCAG 2.1 (progi AA i AAA), a podgląd komponentów pokazuje efekt w praktyce.
Gotowy miks zabierasz w formacie, którego używasz na co dzień: zmienne CSS gotowe do wklejenia, konfiguracja Tailwind, tokeny JSON (format W3C Design Tokens) albo prompt dla AI — np. dla Claude — który zbuduje interfejs w Twoich barwach i fontach. Wszystko liczy się w przeglądarce; żadne dane nie są nigdzie wysyłane.
Najczęstsze pytania
Jak dobrać paletę kolorów do strony internetowej?
Wybierz jedną z gotowych palet albo wskaż własny kolor primary i accent. Design Mixer zbuduje z nich pełne skale odcieni 50–700 oraz neutralną skalę szarości, dopasowane do trybu jasnego i ciemnego. Każdą kluczową parę kolorów narzędzie sprawdza pod kątem kontrastu WCAG.
Jak dobrać parę fontów do strony?
Wybierz osobno font nagłówków i font treści z 45 fontów Google (nowoczesne bezszeryfowe, klasyczne, szeryfowe, monospace i kreatywne) i od razu zobacz je w skali typograficznej oraz na komponentach. Sprawdza się kontrast charakterów — np. szeryfowy nagłówek z bezszeryfową treścią — albo jeden font w dwóch wagach.
Czy miks kolorów jest dostępny (WCAG)?
Narzędzie liczy współczynnik kontrastu dla tekstu na kolorze primary i accent oraz dla tekstu na jasnym i ciemnym tle, i oznacza wyniki znaczkami AA (4.5:1), AA Large (3:1) i AAA (7:1). Jeśli któraś para nie przechodzi, wystarczy przesunąć kolor bazowy — wynik przelicza się na żywo.
W jakich formatach mogę pobrać gotowy miks?
Do wyboru jest pięć formatów: zmienne CSS (custom properties z obsługą trybu jasnego i ciemnego), konfiguracja Tailwind CSS, tokeny JSON w formacie W3C Design Tokens, wytyczne dostępności policzone dla Twojej palety oraz prompt dla AI, który opisuje cały miks i prosi o wygenerowanie komponentów.
Czy narzędzie jest darmowe i co się dzieje z moimi danymi?
Tak, narzędzie jest w pełni darmowe i nie wymaga rejestracji. Cała logika działa w przeglądarce — konfiguracja jest zapisywana wyłącznie lokalnie (localStorage), a link do udostępniania koduje ustawienia w adresie URL. Nic nie jest wysyłane na żaden serwer.