Уеб цветови палитри

Какво представляват уеб цветовите палитри?

Цветовете са много важни за уеб дизайнерите и графичните дизайнери. Дизайнерите описват цветовете, които описваме като синьо, червено и зелено в ежедневието с кодове като #fff002, #426215. Без значение какъв тип проект за кодиране предприемате, вероятно ще започнете да работите с цветове в някакъв момент. Това ще бъде особено полезно, ако се научите да кодирате с помощта на HTML, както правят много хора, за да проектират уеб страници.

Какво означава шестнадесетичен код в цветове?

Hex кодът е начин за представяне на цвят в RGB формат чрез комбиниране на три стойности. Тези цветови кодове са неразделна част от HTML за уеб дизайн и остават важен начин за цифрово представяне на цветовите формати.

Шестнадесетичните цветни кодове започват със знака за паунд или хештаг (#), последван от шест букви или цифри. Първите две букви/цифри съответстват на червено, следващите две на зелено и последните две на синьо. Стойностите на цветовете се дефинират в стойности между 00 и FF.

Числата се използват, когато стойността е 1-9. Буквите се използват, когато стойността е по-голяма от 9. напр.:

• А = 10
• B = 11
• С = 12
• D = 13
• E = 14
• F = 15

Шестнадесетични цветови кодове и RGB еквиваленти

Запомнянето на някои от най-често срещаните шестнадесетични цветови кодове може да ви помогне да предвидите по-добре какви други цветове ще бъдат, когато видите шестнадесетичния цветен код, а не само когато искате да използвате тези точни цветове.

• Червено = #FF0000 = RGB (255, 0, 0)
• Зелено = #008000 = RGB (1, 128, 0)v
• Син = #0000FF = RGB (0, 0, 255)
• Бяло = #FFFFFF = RGB (255,255,255)
• Слонова кост = #FFFFF0 = RGB (255, 255, 240)
• Черно = #000000 = RGB (0, 0, 0)
• Сив = #808080 = RGB (128, 128, 128)
• Сребро = #C0C0C0 = RGB (192, 192, 192)
• Жълто = #FFFF00 = RGB (255, 255, 0)
• Лилаво = #800080 = RGB (128, 0, 128)
• Оранжев = #FFA500 = RGB (255, 165, 0)
• Бордо = #800000 = RGB (128, 0, 0)
• Фуксия = #FF00FF = RGB (255, 0, 255)
• Лайм = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Teal = #008080 = RGB (0, 128, 128)
• Маслина = #808000 = RGB (128, 128, 0)
• Морско синьо = #000080 = RGB (0, 0, 128)

Защо цветовете на уебсайта са важни?

Може да си мислите, че цветовете не ви влияят, но според проучване 85% от хората казват, че цветът оказва голямо влияние върху продукта, който купуват. Той също така казва, че когато някои компании променят цветовете на бутоните си, те са забелязали рязко увеличение или намаляване на реализациите си.

Например, Beamax, компания, която произвежда прожекционни екрани, забеляза огромно увеличение от 53,1% в кликванията върху червени връзки в сравнение със сините връзки.

Цветовете оказват огромно влияние не само върху кликванията, но и върху разпознаваемостта на марката. Проучване върху умственото въздействие на цветовете установи, че цветовете повишават разпознаваемостта на марката средно с 80%. Например, когато си помислите за Coca-Cola, вероятно ще си представите ярки червени кутии.

Как да изберем цветова схема за уебсайтове?

За да решите кои цветове да изберете на вашия уебсайт или уеб приложение, първо трябва да имате добро разбиране за това, което продавате. Например, ако се опитвате да постигнете изображение с по-високо качество и висок клас, цветът, който трябва да изберете, е лилав. Въпреки това, ако искате да достигнете до по-широка аудитория, синьо; Това е успокояващ и мек цвят, който е много подходящ за по-чувствителни теми като здраве или финанси.

Горните примери са доказани от много изследвания. Но цветът, който изберете за вашия уебсайт, зависи от сложността на вашия дизайн и видовете цветови комбинации. Например, ако използвате монохромна палитра за уеб дизайн, може да имате нужда от седем или повече нюанса на този цвят, за да получите достатъчно разнообразие на екрана. Трябва да зададете цветове за определени части от вашия сайт, като текст, фонове, връзки, цветове при задържане на курсора, бутони с CTA и заглавки.

Сега „Как да изберем цветова схема за уебсайтове и уеб приложения?“ Нека да го разгледаме стъпка по стъпка:

1. Изберете основните си цветове.

Най-добрият начин да вземете решение за основен цвят е да разгледате цветовете, които отговарят на настроението на вашия продукт или услуга.

По-долу сме изброили някои примери за вас:

• Червено: Означава вълнение или щастие.
• Оранжев: Означава приятелско, забавно време.
• Жълтото означава оптимизъм и щастие.
• Зелено: Означава свежест и природа.
• Синьо: означава надеждност и увереност.
• Лилаво: Представлява известна марка с история на качеството.
• Кафяв: Това означава надежден продукт, който може да се използва от всеки.
• Черното означава лукс или елегантност.
• Бяло: Отнася се за стилни, лесни за употреба продукти.

2. Изберете вашите допълнителни цветове.

Изберете един или два допълнителни цвята, които допълват основния ви цвят. В идеалния случай това трябва да са цветовете, които правят основния ви цвят „зашеметяващ“.

3. Изберете цвят на фона.

Изберете цвят на фона, който ще бъде по-малко „агресивен“ от основния ви цвят.

4. Изберете цвета на шрифта.

Изберете цвят за текста на вашия уебсайт. Имайте предвид, че плътният черен шрифт е рядък и не се препоръчва.

Най-добрите уеб цветови палитри за дизайнери

Ако не можете да намерите цвета, който търсите в колекцията от уеб цветови палитри на Softmedal, можете да разгледате сайтовете за алтернативни цветове по-долу:

Изборът на цвят е дълъг процес и често изисква много фина настройка, за да намерите правилните цветове. В този момент можете да спестите време, като използвате 100% безплатни уеб приложения, които създават съответните цветови схеми от нулата.

1. Paletton

Paletton е уеб приложение, което всички уеб дизайнери трябва да знаят. Просто въведете цвят на семената и приложението прави останалото вместо вас. Paletton е надежден избор и страхотно уеб приложение за тези, които не знаят нищо от дизайна и за начинаещи.

2. Безопасен за цвят

Ако WCAG е проблем в процеса на проектиране, Color Safe е най-добрият инструмент за използване. С това уеб приложение можете да създавате цветови схеми, които се смесват перфектно и предлагат богат контраст според указанията на WCAG.

Използвайки уеб приложението Color Safe, вие гарантирате, че вашият сайт отговаря на указанията на WCAG и е напълно достъпен за всички.

3. Adobe Color CC

Това е един от безплатните инструменти на Adobe, създадени за обществена употреба. Това е сложно уеб приложение, където всеки може да създава цветови схеми от нулата. Тя ви позволява да избирате от много различни цветови модели, които най-добре отговарят на вашите нужди. Интерфейсът може да изглежда малко объркващ в началото, но след като свикнете с него, не би трябвало да имате проблем с избора на красиви цветови опции.

4. Атмосфера

Ambiance, безплатно уеб приложение, предлага предварително направени уеб цветови палитри от други цветни сайтове в мрежата. Работи като традиционно уеб приложение, където можете да запазвате цветове в профила си и да създавате свои собствени схеми от нулата. Всички тези уеб цветови палитри идват от Colorlovers. Интерфейсът Ambiance улеснява сърфирането и поставя повече фокус върху взаимодействието на цветовете за дизайна на потребителския интерфейс.

5. 0 до 255

0to255 не е точно генератор на цветови схеми, но може да ви помогне да прецизирате съществуващите цветови схеми. Уеб приложението ви показва всички различни нюанси, за да можете да смесвате и съчетавате цветовете незабавно.

Ако ви е трудно да създадете използваема цветова схема, можете да прегледате някои от горните приложения.

Най-добрите уеб цветови палитри

Следните сайтове използват различни уеб цветови палитри за голям ефект. Те са внимателно подбрани за емоциите, които предизвикват, и емоциите, които предават.

1. Одопод

Odopod е проектиран с монотонна цветова палитра, но има за цел да не изглежда скучно с градиент на началната си страница. Голямата типография предлага страхотен контраст. Ясно е къде посетителите искат да щракнат.

2. Окото на Тори

Окото на Тори е чудесен пример за монохромна цветова схема. Тук се виждат ефектите от проста, но мощна цветова палитра, центрирана около нюанси на зелено. Тази цветова схема обикновено е лесна за изваждане, тъй като един нюанс на един цвят почти винаги работи с друг нюанс от същия цвят.

3. Комплект за оцеляване на сирене

Червеното е изключително популярен цвят за цветова палитра на уебсайт. Той може да предаде богат микс от емоции, което го прави универсален. Както можете да видите на уебсайта на Cheese Survival Kit, той е особено мощен, когато се използва в малки дози. Червеното е омекотено от по-неутрални цветове, а синьото помага при CTA и други области, където бизнесът иска да привлече вниманието на посетителя.

4. Ahrefs

Ahrefs е пример за уебсайт, който използва цветовата палитра свободно. Тъмно синьото действа като преобладаващ цвят, но има вариации в целия сайт. Същото важи и за цветовете оранжево, розово и тюркоаз.

Най-често задаваните въпроси относно цветовете

1. Кой е най-добрият цвят за уебсайт?

Синьото определено е най-сигурният избор, тъй като е най-популярният цвят с 35%. Въпреки това, ако всичките ви конкуренти използват синьо, може да има смисъл да „диференцирате“ вашата оферта и марка. Но трябва да сте сигурни, че не претоварвате посетителите.

2. Колко цвята трябва да има уебсайтът?

Имайте предвид, че 51% от марките имат монохромни лога, 39% използват два цвята, а само 19% от компаниите предпочитат пълноцветни лога. От тук можете да видите, че уебсайтове с 1, 2 и 3 цвята имат повече смисъл, отколкото да се опитвате да създадете уебсайт с цветове на дъгата. Въпреки това, марки като Microsoft и Google вярват в предимството да работят с повече цветове, тъй като използват поне 4 плътни цвята в дизайна си.

3. Къде да използвам цветовете?

Привличащите погледа цветове трябва да се използват пестеливо, в противен случай те ще загубят ефекта си. Този ефект трябва да бъде в точки за преобразуване, като бутоните „Купете сега“.