Internetowe Palety Kolorów

Co to są internetowe palety kolorów?

Kolory są bardzo ważne dla projektantów stron internetowych i grafików. Projektanci opisują kolory, które opisujemy jako niebieski, czerwony i zielony w codziennym życiu, za pomocą kodów takich jak #fff002, #426215. Bez względu na rodzaj projektu kodowania, który podejmujesz, prawdopodobnie w pewnym momencie zaczniesz pracować z kolorami. Będzie to szczególnie przydatne, jeśli nauczysz się kodować za pomocą HTML, jak wiele osób robi przy projektowaniu stron internetowych.

Co oznacza kod szesnastkowy w kolorach?

Kod szesnastkowy to sposób na przedstawienie koloru w formacie RGB przez połączenie trzech wartości. Te kody kolorów są integralną częścią HTML do projektowania stron internetowych i pozostają ważnym sposobem cyfrowego przedstawiania formatów kolorów.

Kody kolorów szesnastkowych zaczynają się od znaku krzyżyka lub hashtagu (#), po którym następuje sześć liter lub cyfr. Pierwsze dwie litery/cyfry odpowiadają kolorowi czerwonemu, kolejne dwie zielonemu, a ostatnie dwóm niebieskiemu. Wartości kolorów określane są w wartościach od 00 do FF.

Liczby są używane, gdy wartość wynosi 1-9. Litery są używane, gdy wartość jest większa niż 9. Np:

• A = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15

Kody kolorów szesnastkowych i odpowiedniki RGB

Zapamiętywanie niektórych z najpopularniejszych kodów kolorów szesnastkowych może pomóc w lepszym przewidywaniu innych kolorów, gdy zobaczysz kod koloru szesnastkowego, a nie tylko wtedy, gdy chcesz użyć tych kolorów.

• Czerwony = #FF0000 = RGB (255, 0, 0)
• Zielony = #008000 = RGB (1, 128, 0)v
• Niebieski = #0000FF = RGB (0, 0, 255)
• Biały = #FFFFFF = RGB (255,255,255)
• Kość słoniowa = #FFFFF0 = RGB (255, 255, 240)
• Czarny = #000000 = RGB (0, 0, 0)
• Szary = #808080 = RGB (128, 128, 128)
• Srebro = #C0C0C0 = RGB (192, 192, 192)
• Żółty = #FFFF00 = RGB (255, 255, 0)
• Fioletowy = #800080 = RGB (128, 0, 128)
• Pomarańczowy = #FFA500 = RGB (255, 165, 0)
• Burgund = #800000 = RGB (128, 0, 0)
• Fuksja = #FF00FF = RGB (255, 0, 255)
• Limonka = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Turkusowy = #008080 = RGB (0, 128, 128)
• Oliwkowy = #808000 = RGB (128, 128, 0)
• Granatowy = #000080 = RGB (0, 0, 128)

Dlaczego kolory na stronie są ważne?

Możesz pomyśleć, że kolory nie mają na ciebie wpływu, ale według badań 85% osób twierdzi, że kolor ma duży wpływ na kupowany przez nich produkt. Mówi również, że gdy niektóre firmy zmieniają kolor przycisków, zauważają gwałtowny wzrost lub spadek konwersji.

Na przykład Beamax, firma produkująca ekrany projekcyjne, odnotowała ogromny 53,1% wzrost liczby kliknięć w czerwone linki w porównaniu z niebieskimi.

Kolory mają ogromny wpływ nie tylko na kliknięcia, ale także na rozpoznawalność marki. Badanie wpływu kolorów na umysły wykazało, że kolory zwiększają rozpoznawalność marki średnio o 80%. Na przykład, kiedy pomyślisz o Coca-Coli, prawdopodobnie wyobrazisz sobie żywe czerwone puszki.

Jak wybrać kolorystykę stron internetowych?

Aby zdecydować, jakie kolory wybrać w swojej witrynie lub aplikacji internetowej, musisz najpierw dobrze zrozumieć, co sprzedajesz. Na przykład, jeśli chcesz uzyskać obraz o wyższej jakości, wysokiej jakości, powinieneś wybrać kolor fioletowy. Jeśli jednak chcesz dotrzeć do szerszej publiczności, niebieski; Jest to uspokajający i delikatny kolor, który dobrze nadaje się do bardziej wrażliwych tematów, takich jak zdrowie lub finanse.

Powyższe przykłady zostały potwierdzone w wielu badaniach. Ale kolor, który wybierzesz dla swojej witryny, zależy od złożoności projektu i rodzajów kombinacji kolorów. Na przykład, jeśli używasz monochromatycznej palety do projektowania stron internetowych, możesz potrzebować siedmiu lub więcej odcieni tego koloru, aby uzyskać wystarczającą różnorodność na ekranie. Musisz ustawić kolory dla niektórych części witryny, takich jak tekst, tła, linki, kolory najechania kursorem, przyciski wezwania do działania i nagłówki.

Teraz „Jak wybrać schemat kolorów dla stron internetowych i aplikacji internetowych?” Przyjrzyjmy się temu krok po kroku:

1. Wybierz swoje podstawowe kolory.

Najlepszym sposobem na wybór koloru podstawowego jest zbadanie kolorów, które pasują do nastroju Twojego produktu lub usługi.

Poniżej wymieniliśmy kilka przykładów dla Ciebie:

• Czerwony: oznacza podekscytowanie lub szczęście.
• Pomarańczowy: Oznacza przyjazny, zabawny czas.
• Żółty oznacza optymizm i szczęście.
• Zielony: oznacza świeżość i naturę.
• Niebieski: oznacza niezawodność i pewność.
• Fioletowy: reprezentuje znakomitą markę z historią jakości.
• Brązowy: Oznacza niezawodny produkt, z którego może korzystać każdy.
• Czarny oznacza luksus lub elegancję.
• Biały: odnosi się do stylowych, przyjaznych dla użytkownika produktów.

2. Wybierz swoje dodatkowe kolory.

Wybierz jeden lub dwa dodatkowe kolory, które uzupełniają Twój główny kolor. Idealnie powinny to być kolory, które sprawiają, że główny kolor jest „oszałamiający”.

3. Wybierz kolor tła.

Wybierz kolor tła, który będzie mniej „agresywny” niż kolor podstawowy.

4. Wybierz kolor czcionki.

Wybierz kolor tekstu na swojej stronie. Pamiętaj, że solidna czarna czcionka jest rzadka i nie jest zalecana.

Najlepsze internetowe palety kolorów dla projektantów

Jeśli nie możesz znaleźć koloru, którego szukasz w kolekcji internetowych palet kolorów Softmedal, możesz zapoznać się z alternatywnymi witrynami kolorów poniżej:

Wybór koloru to długi proces i często wymaga wielu dopracowań, aby znaleźć odpowiednie kolory. W tym momencie możesz zaoszczędzić czas, korzystając w 100% z bezpłatnych aplikacji internetowych, które tworzą od podstaw odpowiednie schematy kolorów.

1. Paleta

Paletton to aplikacja internetowa, którą powinni znać wszyscy projektanci stron internetowych. Wystarczy wpisać kolor nasion, a aplikacja zrobi resztę za Ciebie. Paletton to niezawodny wybór i świetna aplikacja internetowa dla tych, którzy nic nie wiedzą o projektowaniu oraz dla początkujących.

2. Bezpieczny kolor

Jeśli WCAG stanowi jakikolwiek problem w procesie projektowania, Color Safe jest najlepszym narzędziem do wykorzystania. Dzięki tej aplikacji internetowej możesz tworzyć schematy kolorów, które idealnie komponują się i oferują bogaty kontrast zgodnie z wytycznymi WCAG.

Korzystając z aplikacji internetowej Color Safe, zapewniasz, że Twoja witryna jest zgodna z wytycznymi WCAG i jest w pełni dostępna dla wszystkich.

3. Adobe Color CC

Jest to jedno z darmowych narzędzi Adobe stworzonych do użytku publicznego. Jest to rozbudowana aplikacja internetowa, w której każdy może tworzyć schematy kolorów od podstaw. Pozwala wybierać spośród wielu różnych modeli kolorystycznych, które najlepiej odpowiadają Twoim potrzebom. Interfejs może początkowo wydawać się nieco zagmatwany, ale kiedy się do niego przyzwyczaisz, nie powinieneś mieć problemu z wyborem pięknych opcji kolorystycznych.

4. Atmosfera

Ambiance, bezpłatna aplikacja internetowa, oferuje gotowe internetowe palety kolorów z innych witryn z kolorami w Internecie. Działa jak tradycyjna aplikacja internetowa, w której możesz zapisywać kolory w swoim profilu i tworzyć od podstaw własne schematy. Wszystkie te internetowe palety kolorów pochodzą od Colorlovers. Interfejs Ambiance ułatwia przeglądanie i kładzie większy nacisk na grę kolorów podczas projektowania interfejsu użytkownika.

5. 0do255

0to255 nie jest dokładnie generatorem schematów kolorów, ale może pomóc w dostrojeniu istniejących schematów kolorów. Aplikacja internetowa pokazuje wszystkie odcienie, dzięki czemu możesz natychmiast mieszać i dopasowywać kolory.

Jeśli masz trudności z utworzeniem użytecznego schematu kolorów, możesz przejrzeć niektóre z powyższych aplikacji.

Najlepsze internetowe palety kolorów

Poniższe witryny z powodzeniem wykorzystują różne internetowe palety kolorów. Są starannie dobierane pod kątem emocji, które wywołują i emocji, które przekazują.

1. Odopod

Odopod został zaprojektowany z monotonną paletą kolorów, ale miał na celu uniknięcie nudnego wyglądu z gradientem na stronie głównej. Duża typografia zapewnia doskonały kontrast. Jest jasne, gdzie odwiedzający chcą, aby kliknęli.

2. Oko Tori

Tori's Eye to świetny przykład monochromatycznego schematu kolorów. Tutaj widoczne są efekty prostej, ale potężnej palety kolorów skupionej wokół odcieni zieleni. Ten schemat kolorów jest zwykle łatwy do wykonania, ponieważ jeden odcień jednego koloru prawie zawsze będzie działał z innym odcieniem tego samego koloru.

3. Zestaw do przetrwania sera

Czerwony to niezwykle popularny kolor w palecie kolorów na stronie internetowej. Może przekazywać bogatą mieszankę emocji, dzięki czemu jest wszechstronny. Jak widać na stronie Cheese Survival Kit, jest szczególnie silny, gdy jest używany w małych dawkach. Czerwony jest łagodzony przez bardziej neutralne kolory, a niebieski pomaga w CTA i innych obszarach, w których firma chce przyciągnąć uwagę odwiedzających.

4. Ahrefs

Ahrefs to przykład serwisu, który swobodnie korzysta z palety kolorów. Dominującym kolorem jest ciemnoniebieski, ale w całej witrynie występują różne odmiany. To samo dotyczy kolorów pomarańczowego, różowego i turkusowego.

Najczęściej zadawane pytania dotyczące kolorów

1. Jaki jest najlepszy kolor dla strony internetowej?

Zdecydowanie najbezpieczniejszym wyborem jest niebieski, ponieważ jest to najpopularniejszy kolor z 35%. Jeśli jednak wszyscy twoi konkurenci używają koloru niebieskiego, sensowne może być „zróżnicowanie” swojej oferty i marki. Ale musisz się upewnić, że nie przytłoczysz odwiedzających.

2. Ile kolorów powinna mieć strona internetowa?

Weź pod uwagę, że 51% marek ma logo monochromatyczne, 39% używa dwóch kolorów, a tylko 19% firm preferuje logo w pełnym kolorze. Stąd widać, że strony internetowe z 1, 2 i 3 kolorami mają więcej sensu niż próba stworzenia strony internetowej w kolorach tęczy. Jednak marki takie jak Microsoft i Google wierzą w zaletę pracy z większą liczbą kolorów, ponieważ w swoich projektach używają co najmniej 4 jednolitych kolorów.

3. Gdzie powinienem używać kolorów?

Kolory przyciągające wzrok należy stosować oszczędnie, w przeciwnym razie stracą one swój efekt. Ten efekt musi znajdować się w punktach konwersji, takich jak przyciski „Kup teraz”.