Generatory palet pomagające projektantowi stron internetowych. Generatory palet pomagające projektantom stron internetowych Selektor kolorów koła kolorów

Kolor to jeden z najważniejszych elementów w pracy projektanta. Ale jako koncepcja jest dość trudna do opanowania: wiele kombinacji palet często utrudnia podjęcie decyzji, jak najlepiej stylizować interfejs stron internetowych i aplikacji. Wcześniej publikowaliśmy recenzje narzędzi z wyboru i. A dzisiaj chcemy rozwinąć ten temat, publikując na blogu tłumaczenie artykułu Essential Color Tools for UX Designers autorstwa Nicka Babicha.

Ten post zawiera listę najlepszych usług dopasowywania kolorów dla stron internetowych i projektowania UX, które pozwolą Ci zaoszczędzić dużo czasu. Dzięki tym projektom dowiesz się:

• skąd czerpać inspirację;
• jak stworzyć własną paletę;
• jak sprawić, by projektowanie było dostępne dla osób z zaburzeniami widzenia kolorów.

1. Szukasz inspiracji

Kolory natury

Czerp z otaczającego Cię świata. Wszystko, czego potrzebujesz, to po prostu rozejrzeć się. Modne ubrania, okładki książek, wystrój wnętrz... wokół ciebie jest tyle niesamowitych rzeczy. Ale najlepsze zestawienia kolorystyczne to kolory natury. Uchwyć piękny moment i spróbuj stworzyć własny wybór na podstawie konkretnego zdjęcia.

Najlepsze kombinacje kolorów można znaleźć w naturze. Możesz uzyskać schemat kolorów z dowolnego zdjęcia

Behance

W popularnym serwisie znajdziesz ciekawe prace zawarte w najlepszych internetowych portfoliach prawdziwych profesjonalistów w swojej dziedzinie. Ta strona jest również doskonałym źródłem inspiracji. Aby zobaczyć nowe, godne przykłady projektów, po prostu wybierz żądany kolor.

Kolory dryblingu

Dribbble to jeden z najlepszych, który przyda się podczas tworzenia interfejsu użytkownika. Jeśli chcesz wizualnie zrozumieć, w jaki sposób inni używali określonego koloru, przejdź do strony dribbble.com/colors i wprowadź żądaną wartość.

Wybierając kolor dla witryny, tutaj możesz ustawić jego minimalny procent - poeksperymentuj, na przykład spróbuj ustawić 30% niebieskiego.

Spróbuj ustawić minimalny procent określonego koloru w Dribbble

inspiracja projektowa

Designspiration to przydatne narzędzie przede wszystkim dla tych, którzy mają już pomysły na kombinacje kolorów i chcą zobaczyć przykłady takich kombinacji. Wybierz od 1 do 5 opcji, a znajdziesz zdjęcia pasujące do podanych parametrów.

W Designspiration znajdziesz różne przykłady zestawień kolorystycznych

Tineye wielokolorowy

Dzięki usłudze dopasowywania kolorów Tineye Multicolr możesz określić żądaną gamę obrazu, a nawet ustawić procent każdego z nich (stosunek). Witryna jest zintegrowana z bazą danych 20 milionów zdjęć Creative Commons z Flickr. To zdecydowanie jeden z najszybszych sposobów na znalezienie idealnej palety.

Kolorzilla

ColorZilla to rozszerzenie do instalacji w przeglądarkach Chrome i Mozilla Firefox. Zawiera narzędzia takie jak zakraplacz, przeglądanie palet, tworzenie i inne.

Rozszerzenie ColorZilla dostępne w przeglądarkach Chrome i Firefox

Widmo Shutterstocka

Jednym z najlepszych sposobów, aby zorientować się, jak będzie wyglądać schemat kolorów, jest spojrzenie na odpowiednie obrazy. Większość rozwiązań, które oferują wybór kolorów projektu strony internetowej, zawiera tę funkcję, ale Shutterstock Spectrum ma niezwykle przyjazny dla użytkownika interfejs i podgląd, który może się naprawdę przydać.

Co więcej, nie potrzebujesz abonamentu, ponieważ wstępna ocena obrazu wystarczy (nawet pomimo tego, że ma „znak wodny”).

W3Szkoły

Niedawno blog recenzował wybór z W3Schools. Informacji na ten temat jest bardzo dużo, począwszy od ich nazw/kodów odcieni, teorii zestawień palet, a skończywszy na opisie różnych formatów: HEX, RGB, CMYK, HWB itp. Znajdziesz tu także proste generatory, konwertery i podobne „mini-usługi”. W sumie ciekawe do zobaczenia.

2. Utwórz paletę kolorów

Narzędzie kolorów do projektowania materiałów

Usługa wyboru kolorów w witrynie Material Design Color Tool umożliwia tworzenie, udostępnianie i wyświetlanie podglądu schematów kolorów dla wybranych elementów. Jedną z jego przydatnych funkcji jest pomiar poziomu dostępności dowolnej kombinacji kolorów.

chłodnice

Coolors to strona do tworzenia wielokolorowej palety. Po prostu napraw określony kolor i naciśnij spację. Narzędzie jest również dobre, ponieważ otrzymasz więcej niż jeden wynik, ale możesz wygenerować kilka opcji, zmieniając tylko początkowe dane.

Kolorystyka w Coolors na podstawie zdjęcia

Adobe Color CC

Usługa dopasowywania kolorów Adobe Color CC (dawniej Kuler) jest obecnie dość popularna. Jest swobodnie dostępny w Internecie, ale jest też wersja opisowa. Dzięki tej aplikacji internetowej stworzysz swoją paletę za pomocą koła kolorów:

Lub możesz uzyskać określony wynik z gotowego obrazu:

Dobór koloru dla witryny zgodnie ze zdjęciem

Istnieją setki gotowych kombinacji, szukaj ich w sekcji „Obserwuj”:

Jeśli używasz wersji komputerowej, możesz jednym kliknięciem wyeksportować utworzony system kolorów do programów InDesign, Photoshop i Illustrator.

paleta

Często porównuje się go do poprzedniego Adobe Color CC, ponieważ te projekty są bardzo podobne. Jedyna różnica polega na tym, że w Paletton nie jesteś ograniczony do pięciu opcji, ale możesz eksperymentować z dodatkowymi dźwiękami interfejsu.

Dodatkowo możesz spojrzeć na . Wraz z innymi aplikacja pozwala pracować w dowolnym miejscu, po prostu za pomocą smartfona. Oprócz bezpośredniego tworzenia / eksportowania palet kolorów, tutaj możesz wybrać określone kolory ze zdjęć lub skorzystać z podstawowych opcji.

3. Udostępnienie palety

Obecnie zaburzenia postrzegania kolorów są znacznie częstsze niż nam się wydaje. Około 285 milionów ludzi na świecie ma problemy ze wzrokiem. Zawsze powinieneś sprawdzić, czy ten, który wybierzesz, jest dostępny dla takich użytkowników.

Narzędzie do sprawdzania kontrastu kolorów WebAIM

Jedne tony idealnie ze sobą współgrają, inne wręcz przeciwnie. Ogromna liczba projektów nie przechodzi testu A/A i to jest fakt. Bardzo ważne jest, aby sprawdzić wygląd interfejsu i kontrast tonalny, zwłaszcza jeśli na stronie jest dużo tekstu. Do tych celów użyj przy wyborze kolorów witryny.

WebAIM Color Contrast Checker to narzędzie internetowe, które sprawdza kody kolorów w wartościach szesnastkowych.

chłodnice

Wspomnieliśmy już o tej usłudze powyżej. Między innymi Coolors pomoże Ci również sprawdzić wymyśloną paletę pod kątem ślepoty barw.

Rodzaj ślepoty barw w schemacie

Zamiast trybu „Normalny” wybierz typ problemu ze wzrokiem, który chcesz symulować. Dzięki temu dokładnie zrozumiesz, jak osoba, która nie potrafi rozróżnić określonych kolorów, zobaczy Twój projekt.

Tak osoba z protanomalią widzi paletę

NoCoffee Vision Simulator dla Chrome

Za pomocą strony internetowej NoCoffee Vision Simulator możesz zobaczyć, jak osoby z daltonizmem lub niedowidzącymi będą postrzegać określone strony internetowe. Na przykład, określając opcję „Achromatopsja” w sekcji „Niedobór kolorów”, zobaczysz stronę internetową w kolorze szarym.

Tak wygląda projekt CNN dla osoby z deuteranopią

Wniosek

Wszystkie wymienione w artykule usługi dopasowywania kolorów stron internetowych i projektowania UX z pewnością pomogą Ci w poszukiwaniach ciekawej i skutecznej oferty. Pamiętaj jednak, że najlepszym sposobem, aby nauczyć się tworzyć niesamowite palety, jest dużo ćwiczyć i eksperymentować.

Mały, stylowy i schludny próbnik kolorów do projektowania stron HTML i innych zadań wymagających dopasowania kolorów.

Zobaczmy, co potrafi ten program.

Ustawienie punktu koloru

Ponieważ program nie wymaga instalacji, wystarczy zapisać archiwum na dysku twardym, rozpakować je w dogodnym miejscu, otworzyć folder i uruchomić plik z rozszerzeniem .exe. Domyślnie program uruchamia się jako mały przycisk:

Praca z programem

Klikamy tę ikonę, a okno programu otwiera się przed nami:

Ekran

W tej zakładce program pozwala „wziąć” dowolny kolor bezpośrednio z ekranu. Oznacza to, że z dowolnej części ekranu, która była widoczna w momencie uruchomienia programu. Cały ekran jest wyświetlany w zmniejszonym rozmiarze w oknie „Wybierz obszar”.

Jeśli klikniesz na dowolną część w tym oknie, pojawi się ona w następnym, mniejszym oknie „Wybierz kolor”. Tutaj możesz już dokładniej celować i pobierać kolor z określonego punktu.

Również w prawej części tego okna znajdują się pomocnicze przyciski kopiowania do schowka, a poniżej przyciski „Odśwież” (aktualizuje zawartość ekranu) i „Zastosuj” (zapisuje wybrany kolor i przełącza okno do zakładki „Wybór” ).

Wybór

Oto główne narzędzia do łatwego dopasowywania kolorów: „Tile”, „Circle”, „Web” i „Win”, które są przełączane za pomocą dodatkowych zakładek.

Praca z tymi narzędziami nie jest trudna. Po prostu kliknij kolor, który Ci się podoba, dostosuj go za pomocą suwaków RGB (lub HSV - jeśli ten format jest Ci bliższy) i sprawdź, czy pasuje, czy nie.

Jeśli podoba Ci się wybrany kolor, możesz skopiować jego kod z wiersza „Reprezentacja tekstu”. Co więcej, kod można również wybrać w dowolnym ze standardowych formatów, klikając małą strzałkę, aby rozwinąć listę.

Zwróć też uwagę na okienko trzeciego koloru w prawym górnym rogu. Oprócz wybranego koloru (pionowy pasek) pokazuje jeszcze trzy kolory, które dobrze komponują się z wybranym.

Dzięki temu program od razu podpowiada kilka pasujących kolorów, które można zastosować do innych elementów projektowanego projektu.

Program posiada wiele różnych przycisków pomocniczych. Aby poznać ich przeznaczenie, po prostu najedź na nie myszką i przeczytaj wskazówki, które pojawiają się na samym dole okna programu.

Ustawienia

Tutaj możesz dostosować niektóre parametry, takie jak typ i rozmiar czcionki oraz niektóre właściwości kosmetyczne programu. Praca z programem będzie wygodniejsza, jeśli odznaczysz pola „Otwórz w zakładce „Ekran”” i „Uruchom w trybie mini-okna”.

O programie

W tej ostatniej zakładce możesz znaleźć kontakty programisty i sprawdzić, czy została wydana nowa wersja programu, wchodząc na jego stronę internetową.

Zalety i wady programu

• istnieje wiele różnych narzędzi do wyboru koloru (koło, kafelki itp.);
• pozwala wygodnie porównywać kolory, przesuwając okno programu blisko innych elementów ekranu;
• istnieją wskazówki dotyczące wszystkich przycisków.

• nieco skomplikowany interfejs;
• uruchamianie zminimalizowane i na karcie „Ekran” nie jest zbyt wygodne (chociaż można to wyłączyć w ustawieniach);
• nie każdemu przypadnie do gustu kolor okna programu.

wnioski

Program jest dość potężny jak na darmowy, zapewnia prawie wszystko, czego potrzebujesz, aby wygodnie dobrać kolory podczas tworzenia projektu strony internetowej. Jest kilka drobnych mankamentów jak kolor okna programu (liliowy - nie dla każdego), ale nie przeszkadzają one w pracy z nim.

PS Dozwolone jest dowolne kopiowanie i cytowanie tego artykułu pod warunkiem wskazania otwartego aktywnego linku do źródła i zachowania autorstwa Rusłana Bogdanowa.

PPS Jeśli program wydawał Ci się skomplikowany, istnieją prostsze opcje:

Kolor ma szerokie zastosowanie w projektowaniu – pozwala „ożywić” treść – stworzyć semantyczne połączenie między elementami, wypełnić pracę emocjami i nastrojem. Początkujący projektanci wybierają losowe kolory, ale istnieją sposoby na bardziej znaczące wykorzystanie kolorów. Rozważ 4 takie metody, zorganizowane zgodnie z zasadą od prostych do złożonych.

1. Użyj znanej gamy

Na stronie brandcolors.net zebrano ponad 500 kombinacji kolorystycznych znanych marek. Yandex, Google, Burger King używają tej samej palety we wszystkich swoich produktach. Te marki i ich kolory są znane i kochane przez wielu. Wpisz nazwę w pasku wyszukiwania lub przewiń stronę, kliknij żądaną markę i kolor: jej kod zostanie skopiowany do schowka.

2. Wybierz gotową profesjonalną paletę

Najłatwiej jest wziąć gotową kombinację kolorów. Nie trzeba za każdym razem wymyślać koła na nowo, ponieważ harmonijne zestawienia znane są od dawna. Wejdź na colordrop.io i wybierz. Na stronie znajdują się setki profesjonalnych 4-kolorowych palet. Po wybraniu tego, który chcesz, kliknij i skopiuj kody kolorów z panelu, który otworzy się po prawej stronie.

Dodatkowo serwis zawiera gotowy wybór 24 kolorów flat design. Kliknij po lewej stronie pod nazwą „Flat Colors” i weź kod odcienia, który Ci się podoba.

3. Określ paletę kolorów zdjęcia lub obrazu, który Ci się podoba

Ta metoda jest nieco trudniejsza. Ale też skuteczniej.

• Na stronie coolors.co w górnym panelu po lewej stronie znajdź ikonę aparatu, kliknij na nią. Otworzy się okno przesyłania obrazu.
• Możesz wybrać zdjęcie lub obrazek w wybranej kolorystyce ze swojego komputera lub skopiować link do pustej kolumny.
• Serwis ustali kombinację kolorów (poniżej, pod przesłanym zdjęciem).
• Możesz zmieniać poszczególne kolory tej palety zaznaczając je i wybierając punkt na zdjęciu, z którego chcesz pobrać kolor.
• Przycisk „Kolaż” zapisuje wynikową paletę z kodami kolorów na komputerze.
• Przycisk „Auto” generuje nowe kombinacje na podstawie tego samego zdjęcia.
• Kliknij „OK” i przejdź do strony głównej witryny w celu dalszej pracy z paletą.

Strona główna serwisu jest nie mniej funkcjonalna. Tutaj możesz wybrać odcienie poszczególnych kolorów lub złożyć nową paletę, zastępując poszczególne kolory.

4. Stwórz swój własny schemat kolorów online

Przesyłając zdjęcie do tej samej witryny coolors.co, możesz nie tylko określić kod koloru, ale także stworzyć własne kombinacje. Aby to zrobić, naciśnij spację - usługa automatycznie tworzy kombinację 5 kolorów.

Na każdym kolorze 4 ikony przycisków:

• Odcienie alternatywne - Odcienie koloru (ciemniejszy i jaśniejszy),
• Przeciągnij (Przesuń kolor w prawo lub w lewo na palecie),
• Dostosuj (dostosuj odcień, nasycenie, jasność itp.),
• Zablokuj (napraw kolor).

Wybór schematu kolorów dla strony internetowej jest jednym z najważniejszych kroków w procesie projektowania. Wybór kombinacji kolorów jest dość złożonym i kreatywnym procesem. Na szczęście istnieje wiele usług, które mogą stanowić znaczące wsparcie w dokonaniu właściwego wyboru.

Niektóre zasoby wymienione w tym omówieniu umożliwiają wybór spośród dużej liczby gotowych schematów kolorów, podczas gdy inne umożliwiają interaktywne tworzenie własnych schematów.

Kuler

Adobe Kuler zawiera dużą bibliotekę gotowych schematów kolorów. Diagram można wyświetlić w trybie online i pobrać do użycia w produktach pakietu Adobe Creative Suite.

Color Lovers ma obecnie prawie 2 miliony schematów kolorów stworzonych przez użytkowników. Możesz je przeglądać posortowane według daty, oceny, liczby wyświetleń.

ColoRotate ma bibliotekę gotowych schematów kolorów. Możesz także stworzyć swój własny schemat za pomocą unikalnego narzędzia 3D. Schemat kolorów może być używany bezpośrednio w Photoshopie i Fireworks za pomocą wtyczki ColoRotate.

Projektant schematów kolorów pozwala wybrać typ schematu kolorów (mono, komplementarny, triad, tetrad, analog). Wtedy będzie można dopasować kolorystykę i zobaczyć efekt schematu na przykładzie.

ColorSchemer ma dużą bibliotekę schematów kolorów tworzonych przez użytkowników. Możesz je sortować według daty opublikowania, oceny lub liczby pobrań.

Pictaculous to proste narzędzie do generowania schematów kolorów online. Możesz przesłać obraz, a usługa wygeneruje diagram do użycia z obrazem.

Kolorowa Iglica

Color Spire to bardzo łatwa w użyciu usługa. Ty wybierasz kolor bazowy, a on sugeruje schemat kolorystyczny. Możesz również zobaczyć wygląd schematu na prostym szablonie.

Każdy projektant stron internetowych rozumie, jak ważne jest . Za pomocą koloru umieszcza się akcenty - podkreśla się ważne szczegóły, a pomocnicze ukrywa. Kolor tworzy nastrój. Kolor jest pierwszą rzeczą, którą widzi odwiedzający witrynę, zanim jeszcze przeczyta choćby jedną literę lub zorientuje się, co jest przedstawione na konkretnym zdjęciu. Paleta kolorów Twoja witryna może opóźnić odwiedzającego lub może go odstraszyć.

Wybór odpowiedniej palety kolorów- pierwszy krok do zbudowania idealnej i nienagannej strony internetowej. Kolor każdego elementu strony powinien harmonizować nie tylko z elementami powiązanymi wizualnie, ale także z ogólną kolorystyką strony i witryny jako całości.

Aby nie popełnić błędu na początku podróży, przygotowaliśmy małą przegląd generatorów schematów kolorów, pozwalającą dobrać odpowiednią ilość i kombinację kolorów podstawowych, których użyjesz podczas tworzenia strony. Niektóre z nich są dość proste i mają standardową funkcjonalność, podczas gdy inne mają wiele unikalnych funkcji. Ale wszystkie z pewnością zapewnią nieocenioną pomoc w opracowaniu unikalnego projektu strony internetowej.

Adobe Color CC

Adobe Color CC- swego rodzaju standard dla takich aplikacji, który pozwala tworzyć różne schematy kolorów za pomocą do tego koło kolorów. Aby pomóc projektantowi, będzie bezpośredni dostęp do społeczności Adobe Cooler, gdzie możesz wybrać tysiące różnych kolorów.

paleta

Jeden z najstarszych (działający od 2002 roku) w naszej recenzji narzędzia do tworzenia kombinacji kolorów i schematów kolorów.

stylizuj mnie

Eksploruje witrynę określoną w pasku wyszukiwania i zawiera raport na temat zastosowanych w nim zestawień kolorystycznych, czcionek, rozmiarów obrazów itp. Umożliwi to projektantowi zbudowanie własnych rozwiązań w oparciu o stronę internetową, którą lubi.

chłodnice

Pozwala wygenerować podstawową kombinację kolorów, a następnie dopasuj powstałą paletę do własnych upodobań i zapisz ją w różnych formatach - SVG, PDF lub SCSS.