Tester schematów kolorów strony
Przetestuj jak twoja paleta kolorów wygląda na makiecie strony: nagłówek, karty, przyciski, tekst. Wczytaj URL lub wklej palettę HEX. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
/* Optional: add extra CSS for the preview sandbox */
/* Example: .badge { border-radius: 999px; } */| Label | Fg | Bg | Ratio | Aa | Aaa | Aa Threshold | Aaa Threshold | Type |
|---|---|---|---|---|---|---|---|---|
| Text on Background | #0f172a | #f8fafc | 17,062934 | Tak | Tak | 4,5 | 7 | text |
| Muted Text on Background | #475569 | #f8fafc | 7,242511 | Tak | Tak | 4,5 | 7 | text |
| Text on Surface | #0f172a | #ffffff | 17,852535 | Tak | Tak | 4,5 | 7 | text |
| Muted Text on Surface | #475569 | #ffffff | 7,577664 | Tak | Tak | 4,5 | 7 | text |
| Primary on Background (links) | #2563eb | #f8fafc | 4,939955 | Tak | Nie | 4,5 | 7 | text |
| Secondary on Surface | #0ea5e9 | #ffffff | 2,771412 | Nie | Nie | 4,5 | 7 | text |
| Button Text on Primary | #ffffff | #2563eb | 5,168556 | Tak | Nie | 4,5 | 7 | text |
| Button Text on Secondary | #111827 | #0ea5e9 | 6,400967 | Tak | Nie | 4,5 | 7 | text |
| Border on Background | #e2e8f0 | #f8fafc | 1,178257 | Nie | Nie | 3 | 4,5 | ui |
| Border on Surface | #e2e8f0 | #ffffff | 1,232781 | Nie | Nie | 3 | 4,5 | ui |
:root {
--acme-bg: #f8fafc;
--acme-surface: #ffffff;
--acme-text: #0f172a;
--acme-muted: #475569;
--acme-border: #e2e8f0;
--acme-primary: #2563eb;
--acme-secondary: #0ea5e9;
--acme-accent: #f97316;
--acme-on-primary: #ffffff;
--acme-on-secondary: #111827;
}
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćTester schematów kolorów UI – aplikuj paletę na makietę strony
Wybranie pięknej palety kolorów to jedno – zobaczenie jak wygląda na rzeczywistej stronie to drugie. Narzędzie nakłada twoją paletę (primary, secondary, background, text, accent) na responsywną makietę strony z nagłówkiem, kartami, formularzem i stopką.
Elementy makiety do testowania
Nawigacja: logo + menu + CTA button (primary color). Hero section: tło (primary/gradient) + nagłówek (text on background). Karty produktów/usług: card background + title + description + badge. Formularz: input border + focus ring + label + submit button. Footer: ciemne tło + linki + ikony społecznościowe.
Kolory w systemie projektowania
Primary: główny kolor marki (CTA, linki, akcenty). Secondary: uzupełniający (tagi, badges, highlights). Background: tło strony (white, near-white, dark mode). Surface: tło kart/elementów interfejsu. Text: główny tekst (heading, body). Muted: mniej ważny tekst (timestamp, caption). Error/Success/Warning: kolory stanów.
Kontrast i dostępność WCAG
WCAG 2.1 AA: tekst normalny ≥ 4.5:1, tekst duży ≥ 3:1, UI komponenty ≥ 3:1. WCAG AAA: tekst normalny ≥ 7:1. Narzędzie automatycznie sprawdza kontrast każdej pary kolor/tło i ostrzega o naruszeniach. Czerwony = fail AA. Żółty = pass AA, fail AAA. Zielony = pass AAA.
Dark mode testowanie
Toggle dark/light mode: narzędzie pokazuje obie wersje makiety. Dark mode: background odwrócone, surface ciemniejsze, text jaśniejszy. Palety CSS variables: --color-background: white; @media (prefers-color-scheme: dark) { --color-background: #1a1a1a; }. OKLCH ułatwia generowanie dark mode wariantów.
Najczęstsze pytania
Jak wybrać dobry primary color dla marki?
Analiza branży: niebieski (tech, finanse, zaufanie), zielony (ekologia, zdrowie), czerwony (energia, pilność, gastronomia), fioletowy (luksus, kreatywność). Badanie: Elliot (2010) pokazało wpływ kolorów na zachowanie. Ale: rozpoznawalność marki ważniejsza niż "właściwy" kolor branżowy.
Ile kolorów powinna mieć paleta strony?
Zasada 60-30-10: 60% dominant (tło), 30% secondary (elementy), 10% accent (CTA). Minimalna paleta: primary, secondary/accent, background, text. Pełny design system: primary (5 odcieni), neutral (9 odcieni), semantic (error, success, warning, info). Zbyt wiele kolorów = chaotyczne UI.
Jak testować palety dla trybu ciemnego?
Nie odwracaj kolorów 1:1. Background: bardzo ciemny (nie czysto czarny #000 – lepszy #121212 lub #1E1E1E). Surface: nieco jaśniejszy niż bg. Text: nie czysto biały (lepszy #E5E5E5). Primary: często potrzebny jaśniejszy wariant. Saturation: lekko zmniejszona w dark mode.
Jak wyeksportować paletę do Figma/Tailwind?
Figma: skopiuj HEX do Color Styles lub Variables. Tailwind: w tailwind.config.js extend.colors: { brand: "#FF5733" }. CSS variables: :root { --color-primary: #FF5733; }. Style Dictionary (Amazon): JSON → tokens dla wielu platform jednocześnie (CSS, iOS, Android).
Jakie narzędzia do budowania palet są najlepsze?
Coolors.co: generator losowych palet. Paletton: koła harmonii. Realtime Colors: testowanie na żywo na makiecie. Adobe Color: koła barw + trend palets. Dopple: palety z fotografii. Huemint: AI palety dla brandingu. To narzędzie: testowanie finalnej palety na makiecie HTML.
Powiązane narzędzia: sprawdzanie kontrastu kolorów, generator triadycznych schematów i blender kolorów HEX.