$ ./wybierz-kolory.sh

Kolory dla Twojej strony

Każda z wszystkich 11 616 kombinacji wychodzi wystarczająco kontrastowa i czytelna.

// jak to działa

Wybór schematu kolorów strony jest prosty, poradzi sobie z nim każdy:

  1. 01

    Motyw

    Najpierw zdecyduj, czy Twoja strona ma być jasna, czy ciemna.

  2. 02

    Cztery kolory

    Potem wybierasz cztery rodzaje kolorów według ich znaczenia: kolor tła, kolor nagłówków głównych, kolor nagłówków pobocznych i kolor tekstu.

  3. 03

    Podgląd

    Na bieżąco widzisz podgląd aktualnej kombinacji kolorów. Ewentualnie możesz wybierać z 18 gotowych.

  4. 04

    Zapytanie

    Gotowy wybór dodajesz potem do zapytania jednym kliknięciem.

// cztery kolory, cztery role

Co znaczy każdy z kolorów

Strona internetowa nie potrzebuje dziesięciu kolorów. Potrzebuje jednego, na którym stoi, jednego, który niesie markę, jednego o stopień cichszego i jednego na tekst. Każdy kolor ma na stronie swoją rolę — sam w sobie nic nie znaczy, ważne jest to, jak został użyty.

Kolor tła strony

Kolor, na którym stoi strona. Czysta biel to tylko jedna z możliwości — delikatne przejście w kremowy albo szary czyni stronę wyraźnie spokojniejszą i na dużej powierzchni mniej razi w oczy.

Kolor nagłówków głównych

Kolor, który jest akcentem strony. Poza nagłówkami niosą go też domyślne przyciski i odnośniki, więc jest zarazem głównym kolorem marki — i właśnie dlatego nie może go być na stronie za dużo. Bo kolor, który jest wszędzie, nie jest akcentem.

Kolor nagłówków pobocznych

Drugi kolor, o stopień cichszy. Wyróżnia mniej ważne nagłówki i podpisy, żeby strona miała więcej niż dwa poziomy, ale nie zrobiła się pstrokata. Jest też kolorem przycisków, które nie są domyślne. Spokojnie może być taki sam jak główny.

Kolor tekstu

Zwykły tekst jest zawsze prawie czarny — a na ciemnym tle prawie biały. Wybierasz wyłącznie jego temperaturę: chłodna pasuje do błękitu i morskiego, ciepła do terakoty i brązu. To różnica, której nikt nie zauważy, dopóki nie zobaczy ich obok siebie. Zawsze trzeba brać pod uwagę czytelność tekstu wobec koloru tła.

// ponad kolorami

Jasny albo ciemny — i wciąż jedna paleta

Ponad tymi czterema kolorami jest jeszcze jeden wybór: czy strona ma świecić, czy być ciemna. To jednak nie druga paleta i nie robi się tego dwa razy. Każdy odcień, który wybierzesz, ma postać jasną i ciemną, a o tym, która obowiązuje, decyduje motyw. Wybierasz „zieleń” raz i jest to właściwa zieleń na białej stronie i na prawie czarnej.

W narzędziu niżej przełącznik motywu nie zmienia więc kolorów, tylko to, którą ich postać właśnie oglądasz. Tło trzymamy osobno dla każdego motywu, żeby przełączenie nigdy nie skończyło się na kombinacji, której nikt nie wybrał.

// wybierz

Ułóż własny schemat kolorów

Podglądy zmieniają się od razu. Nie musisz tego rozumieć, wystarczy, że Ci się podoba. Motywem u góry przełączysz w każdej chwili, czy patrzysz na postać jasną, czy ciemną. Wybrany przez Ciebie schemat kolorów jest wyłącznie orientacyjny i można go w każdej chwili zmienić.

podgląd strony

Motyw Strona jasna albo ciemna
Kolor tła strony Wybór zależy od motywu
Kolor tła strony Wybór zależy od motywu
Kolor nagłówków głównych Nagłówki, domyślne przyciski i odnośniki
Kolor nagłówków pobocznych Mniejsze nagłówki, podpisy i drugie przyciski
Kolor tekstu Temperatura zwykłego tekstu

Twoja kombinacja

Motyw: JasnyCiemny · Kolor tła strony: BiałyKremowyPiaskowyChłodny szaryMiętowyPudrowy WęglowyPółnocnyLeśnyKawowy · Kolor nagłówków głównych: ModroszaryIndygoLeśna zieleńMorskiTerakotaPomarańczowyBordoBrązowyZłocistyBez koloruKamienny szary · Kolor nagłówków pobocznych: ModroszaryIndygoLeśna zieleńMorskiTerakotaPomarańczowyBordoBrązowyZłocistyBez koloruKamienny szary · Kolor tekstu: NeutralnaChłodnaCiepłaZielonkawa

Przycisk przeniesie Cię do formularza kontaktowego z wypełnionym wyborem — zostaje dopisać, kim jesteś i czego potrzebujesz. Nic nie wychodzi, zanim sam nie wyślesz formularza.

// gotowe kombinacje

Albo daj sobie doradzić

Ewentualnie proponujemy niżej 18 sprawdzonych kombinacji, które ze sobą współgrają.

Grafit

Uniwersalny firmowy błękit na chłodnej szarości. Pasuje usługom, rzemiosłu i B2B — nikogo nie urazi i nigdzie nie popycha.

Jasny · Chłodny szary · Modroszary · Kamienny szary · Chłodna

Wybierz schemat

Indygo

Głębsze i nowocześniejsze niż grafit. Technologie, oprogramowanie, doradztwo, agencje.

Jasny · Biały · Indygo · Kamienny szary · Chłodna

Wybierz schemat

Papier

Zupełnie bez koloru. Czerń, biel i jedna szarość — wszystko niesie tekst. Prawnicy, doradztwo, redakcje, architekci.

Jasny · Biały · Bez koloru · Kamienny szary · Neutralna

Wybierz schemat

Stal

Szarość ze wsparciem błękitu. Budowa maszyn, technika, przemysł, transport.

Jasny · Chłodny szary · Bez koloru · Modroszary · Chłodna

Wybierz schemat

Las

Zieleń bez ekologicznego frazesu. Ogrody, budownictwo, produkcja, zdrowie.

Jasny · Miętowy · Leśna zieleń · Brązowy · Zielonkawa

Wybierz schemat

Mięta

Świeża i czysta. Dentyści, apteki, sprzątanie, ekodrogeria.

Jasny · Miętowy · Morski · Leśna zieleń · Chłodna

Wybierz schemat

Ocean

Morska, spokojna, cicha. Ochrona zdrowia, terapia, wellness, poradnie.

Jasny · Chłodny szary · Morski · Kamienny szary · Chłodna

Wybierz schemat

Terakota

Ciepły wypalony pomarańcz na kremowym tle. Gastronomia, kawiarnie, ceramika, rzemiosło.

Jasny · Kremowy · Terakota · Brązowy · Ciepła

Wybierz schemat

Mandarynka

Pomarańcz na bieli, tekst czarny. Sport, kursy, dostawy, sklepy internetowe — wszędzie tam, gdzie strona ma zachęcać do działania.

Jasny · Biały · Pomarańczowy · Bez koloru · Neutralna

Wybierz schemat

Zachód

Pomarańcz w pudrowym. Kawiarnie, piekarnie, kwiaciarnie, wellness.

Jasny · Pudrowy · Pomarańczowy · Bordo · Ciepła

Wybierz schemat

Winnica

Bordo, stonowana elegancja. Beauty, moda, winiarnie, salony.

Jasny · Pudrowy · Bordo · Kamienny szary · Ciepła

Wybierz schemat

Liliowy

Pudrowy z indygo. Moda, design, kosmetyki — delikatnie, ale nie słodko.

Jasny · Pudrowy · Indygo · Bordo · Chłodna

Wybierz schemat

Piasek

Beż z brązem. Architektura, wnętrza, meble, stolarka na zamówienie.

Jasny · Piaskowy · Brązowy · Bez koloru · Ciepła

Wybierz schemat

Węgiel

Ciemna ze złotawym akcentem. Usługi premium, fotografia, portfolio.

Ciemny · Węglowy · Złocisty · Kamienny szary · Ciepła

Wybierz schemat

Północ

Ciemny granat. Oprogramowanie, produkty i narzędzia, przy których ciemna strona jest oczekiwana.

Ciemny · Północny · Modroszary · Kamienny szary · Chłodna

Wybierz schemat

Mech

Ciemna zieleń. Ogrodnictwo, drewno, outdoor, rzemiosło robione na dworze.

Ciemny · Leśny · Leśna zieleń · Brązowy · Zielonkawa

Wybierz schemat

Kawa

Ciemny brąz ze złotem. Palarnie, piekarnie, pracownie skórzane, bary.

Ciemny · Kawowy · Brązowy · Złocisty · Ciepła

Wybierz schemat

Bursztyn

Ciemny brąz z jaskrawym pomarańczem. Bary, kluby, studia tatuażu, gastronomia czynna wieczorem.

Ciemny · Kawowy · Pomarańczowy · Kamienny szary · Ciepła

Wybierz schemat

// masz własny kolor?

A co z logo?

Jeśli masz w logo kolor podstawowy, który ludzie już znają choćby z wizytówek albo z witryny, warto zacząć od niego i ustawić go jako główny. Dotyczy to też pozostałych kolorów — wygląd strony i logo są wtedy w podobnej gamie. Nie zawsze jednak się da, na przykład z powodu słabej czytelności. Wtedy trzeba zdefiniować nowy schemat kolorów.

Wybrane? Wyślij nam to

Przycisk przy wyborze wyżej otwiera zapytanie z wypełnioną kombinacją. Resztę dopracujemy na adresie testowym.

Napisz do nas

Przeszukuje treść stron, nie menu. Zamkniesz klawiszem Esc.