Paleta kolorów skanuje każdy element na stronie i wyodrębnia kompletny zestaw użytych kolorów — od tekstu i teł po ramki, cienie i akcenty. Kolory są wyświetlane jako wizualne próbki posortowane według częstotliwości (najczęściej używane jako pierwsze), każda pokazuje swoją wartość HEX i liczbę użyć. Kliknij dowolną próbkę, aby skopiować, lub eksportuj całą paletę jako listę kodów kolorów.
Każda dobrze zaprojektowana strona ma spójną paletę kolorów — zwykle 3-8 kolorów głównych plus kilka neutralnych. Paleta kolorów wyodrębnia tę paletę automatycznie, skanując obliczone wartości color, background-color, border-color i box-shadow każdego elementu. Rezultat to posortowana według częstotliwości kolekcja każdego koloru na stronie, dając kompletny obraz systemu kolorów witryny. Dominujące kolory (główny kolor marki, kolor tła, kolor tekstu) pojawiają się jako pierwsze z wysoką liczbą użyć. Kolory akcentu i jednorazowe wartości pojawiają się dalej. Jest to nieocenione w badaniach projektowych — odwiedź dowolną stronę i wyodrębnij jej dokładną paletę kolorów w sekundach. Jest to również przydatne do audytu własnej strony: czy są tam przypadkowe kolory, które nie należą do twojego systemu projektowego? Czy używasz 5 nieco różnych odcieni szarości, gdy specyfikacja projektu definiuje tylko 3? Paleta kolorów sprawia, że całe użycie kolorów jest widoczne i policzalne.
Skanuje każdy widoczny element na stronie i wyodrębnia kolory z obliczonych właściwości: color, background-color, border-color, box-shadow color, outline-color i text-decoration-color. Każdy kolor użyty na stronie jest przechwycony.
Kolory są posortowane według liczby użyć — najczęściej używany kolor pojawia się jako pierwszy. Dominujące kolory marki i tła wznoszą się na górę, podczas gdy jednorazowe kolory akcentu pojawiają się ostatnie. Natychmiast zobacz główne, drugorzędne i akcentowe kolory strony.
Każdy kolor jest renderowany jako duża wizualna próbka z kodem HEX i liczbą użyć wyświetloną poniżej. Próbki są wystarczająco duże, aby rozróżnić subtelne różnice odcieni (np. #333 vs #2a2a2a).
Kliknij dowolną próbkę koloru, aby natychmiast skopiować jej wartość HEX do schowka. Nie ma potrzeby otwierania panelu koloru lub drugiego okna dialogowego — jedno kliknięcie, skopiowane, gotowe.
Kliknij "Eksportuj wszystko", aby skopiować całą paletę jako sformatowaną listę kodów kolorów HEX. Wklej do narzędzia projektowego, pliku zmiennych CSS lub dokumentacji kolorów. Lista zachowuje kolejność sortowania według częstotliwości.
Kolory są znormalizowane (reprezentacje rgb i hex tego samego koloru są scalane) i zdeduplikowane. Paleta pokazuje tylko unikalne kolory, z połączonymi liczbami użyć dla duplikowanych reprezentacji.
Odwiedź strony z pięknymi schematami kolorów i wyodrębnij ich dokładną paletę. Użyj kolorów jako punktu wyjścia dla własnego projektu — lub po prostu udokumentuj, które kombinacje kolorów dobrze ze sobą współpracują.
Uruchom Paletę kolorów na własnej stronie, aby zweryfikować spójność kolorów marki. Czy są tam 4 nieco różne błękity, gdzie powinien być 1? Czy kolory nie-markowe wkradają się? Sortowanie według częstotliwości sprawia, że niespójności są oczywiste.
Eksportuj paletę i przekonwertuj ją na niestandardowe właściwości CSS (--color-primary, --color-secondary itp.). Posortowane według częstotliwości wyjście mówi ci, które kolory zasługują na role główne, drugorzędne i akcentu.
Wyodrębnij palety kolorów ze stron konkurencji, aby zrozumieć ich pozycjonowanie marki. Ciepłe kolory vs chłodne, wysoki kontrast vs stonowane — paleta ujawnia celowe wybory projektowe.
Zobacz wszystkie kolory tekstu obok kolorów tła. Czy jakieś kombinacje tekst-tło mają zbyt niski kontrast? Paleta daje ci pełny zestaw kolorów do sprawdzenia względem wymagań kontrastu WCAG.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Palety kolorów. Narzędzie skanuje każdy element na stronie i wyodrębnia wszystkie wartości kolorów.
Pojawia się siatka próbek kolorów, posortowana według częstotliwości użycia. Najczęściej używane kolory są na górze. Każda próbka pokazuje kod HEX i liczbę elementów używających tego koloru.
Kliknij dowolną próbkę, aby skopiować jej wartość HEX do schowka. Krótko pojawia się potwierdzenie.
Kliknij "Eksportuj wszystko", aby skopiować każdy kolor jako sformatowaną listę. Wklej do pliku zmiennych CSS, narzędzia projektowego lub dokumentacji.
Nawiguj do różnych stron na tej samej witrynie i wyodrębniaj palety, aby zweryfikować spójność kolorów w witrynie.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
