Най-добрите цветни инструменти за уеб дизайнери
Като уеб дизайнери, един от най-важните решения, които правим, е свързан с нашия избор на цветове. Изберете грешните и може просто да загубите една възможност. Вярно е - цветовете, които избираме, могат да окажат психологическо въздействие върху тези, които ги гледат.
Например червеното обикновено се разглежда като високоенергиен цвят, докато синьото предполага спокойствие и мир. За да илюстрирате това, помислете за цветовете, които бихте могли да използвате на уебсайт за продажба на детски играчки, вместо на сайт за адвокатска кантора. Шансовете са, че ще използвате ярки, живи цветове за първите и заглушени тонове на синьо и сиво за вторите.
Но как да разберете кои цветове работят добре заедно? За щастие не е нужно да сте майстор в теория на цветовете да съберем работеща цветова палитра. За да ви помогнем с важната задача за избор на цвят, ето някои от най-добрите безплатни цветове инструменти за уеб дизайн (плюс един специален бонус в края за потребители на Mac).
01. HueSnap
Вдъхновението може да порази по всяко време. Възможно е декорът на хотелска стая или светлината в парка една вечер да предизвика вдъхновението за следващата ви цветова схема на уебсайта. Защото когато това се случи, HueSnap е тук, за да помогне. Можете да направите снимка и да използвате HueSnap, за да извлечете цветовете от изображението и да ги направите в палитра.
Приложението е пригодено за мобилна употреба и можете да запазвате и споделяте палитрите си с други. Има много функции, които да ви помогнат да модифицирате палитра, като опции за избор на допълнителни и съставни цветове, а палитрите ви могат да имат до шест цвята всеки.
02. Khroma
Khroma е AI цветен инструмент, който има за цел да ви помогне лесно да разглеждате и сравнявате оригинални цветови комбинации. С него потребителите обучават AI алгоритъм да действа като продължение на мозъка си. Потребителите започват с избор на 50 цвята, които харесват, и тези цветове се използват за обучение на невронна мрежа, която може да разпознае стотици хиляди други подобни цветове. Научете повече за Khroma и как да го използвате тук .
03. Coolors.co
Coolors предлага голямо разнообразие от инструменти за регулиране на палитрата точно както искате. Освен това можете да експортирате окончателното си творение в много различни формати, за да можете да го използвате на практика, където пожелаете.
Coolors не е просто инструмент за създаване на цветна палитра, но също така ви позволява да видите други завършени творения от други потребители, така че да можете да черпите вдъхновение. Разделът „Изследване“ има стотици (ако не и хиляди) палитри, които можете да видите, запазите и редактирате сами. Още по-добре, Coolors се предлага на настолни компютри и като приложение за iOS, добавка за Adobe Photoshop и Illustrator - и дори разширение на Google Chrome за лесен достъп.
04. Adobe Color CC
Безплатният инструмент Adobe Color CC съществува от известно време и е един от най-добрите цветни инструменти за избор на цветова палитра. Не само можете да създадете свои собствени цветови схеми, но и да изследвате какво са създали другите.
Изберете цвят от колелото или от изображение и приложете цветови правила, като например да използвате само допълнителни цветове, едноцветни цветове или нюанси на цвета, който сте избрали, за да генерирате цветова палитра. Или кликнете върху всеки цвят и изследвайте цветното колело, за да персонализирате избора. Като допълнителен бонус можете да запазите създадените от вас теми във вашата библиотека на Adobe.
05. Colordot
Colordot от Hailpixel е отличен безплатен онлайн инструмент за създаване на цветова палитра. С помощта на прости жестове с мишката можете да избирате и запазвате цветове. Преместете мишката напред-назад за нюанс; нагоре и надолу за лекота; превъртете за насищане и щракнете, за да запазите цвят във вашата палитра. Щракнете върху иконата на превключвателя, за да видите стойностите на всеки цвят RGB и HSL. Той също така има $ 0,99 / £ 0,99 Приложение за iOS което ви позволява да заснемате цветове с вашия фотоапарат.
06. Градиенти
Eggradients предлага идеи за красиви градиенти, които да използвате в рамките на вашата дизайнерска работа, съставени от някой, който има едновременно страхотно око за цвят и интересно чувство за хумор. Всеки градиент, показан във форма на яйце, идва със свое собствено име, провокиращо мисли. Примерите включват „Разбитото сърце на Возняк“ за бледосиньо и „Милостив враг“ за преход от жълто към зелено.
07. 147 Цветове
Когато сте отговорни за генерирането лесен за четене CSS , понякога използването на стандартни цветове и имена на цветове е пътят. Благодарение на 147 цвята от Брайън Майер-младши, можете да разгледате всички тях и да изберете тези, които работят за вас.
Той съдържа 17-те стандартни цвята, плюс 130 други имена на CSS цветове. Филтрирайте резултатите по нюанси на синьо, зелено и т.н., или изберете от пълната дъга от 147 цвята.
08. Генератор на цветни палитри Canva
Генераторът на цветни палитри от Canva е идеален, ако искате да създадете цветна палитра, базирана на определено изображение. Въпреки че други инструменти предлагат подобни опции, Canva’s е супер лесна за използване: качвате изображение и генераторът ще върне палитра от петте основни цвята, съдържащи се в него. Можете да кликнете върху цветовете, които харесвате, и да копирате HEX стойността в клипборда си.
За съжаление тук свършва полезността на предлагането на Canva, тъй като това е всичко, което можете да направите с неговия генератор на палитри - не можете да регулирате цветовете на палитрата. Единствените други опции, които имате, са да копирате предоставените шестнадесетични стойности или да качите друга снимка.
09. Палитра за материален дизайн
С палитрата за материален дизайн можете да изберете два цвята, които след това се преобразуват в пълноцветна палитра, която да изтеглите, заедно с визуализация.
Компанията също предлага Цветове на материалния дизайн , което позволява на дизайнерите да видят различните нюанси на даден цвят, заедно със съответните им HEX стойности.
10. ColourCode
ColourCode от Tamino Martinius и Andreas Storm е подобен на Colordot, но предлага малко повече насоки. Този безплатен инструмент ви удря право в лицето, показвайки фон, който променя цветовете с движението на курсора. Освен това този инструмент предлага различни категории за палитрата (аналог, триада, четириъгълник, монохром, монохромна светлина и т.н.).
С ColourCode можете да зададете различни опции по цветното колело, за да създадете оригинална комбинация. Можете също да запазите палитрата си или да я експортирате като SCSS или ПО-МАЛКО файл. Можете дори да експортирате в PNG, ако искате.
единадесет. Цветен калкулатор
Калкулаторът на цветовете е ясен: избирате цвят и опция за хармония на цветовете. В замяна получавате резултатите от препоръчаната от вас цветова схема.
Хубавото на този сайт обаче е, че той също така навлиза в малко подробности за теорията на цветовете и как тя е свързана с вашия избор на цвят.
12. HTML цветен код
Този изпъкнал безплатен набор от инструменти на Dixon & Moe включва задълбочен избор на цветове с много обяснения на цветовите правила; поредица от цветни диаграми, включващи плосък дизайн на цветовете, схемата на Google за дизайн на материалите и класическата цветова палитра в мрежата; и списък със стандартни имена и кодове на цветове в HTML.
Този сайт предлага също уроци и други ресурси за уеб дизайнери, както и опции за експортиране на резултати от своите инструменти като HEX кодове, HTML, CSS и SCSS стилове.
13. W3Schools: Урок за цветове
Ако търсите цялостно решение, което включва ръководство за цветовете, както и редица различни инструменти, тогава Урокът за цветове в W3Schools е идеалният избор.
Не само можете да научите за теорията на цветовете, цветните колела и цветовите нюанси, но също така ще можете да използвате и другите инструменти, които има, като например Цветен конвертор . С този инструмент можете да конвертирате всякакви цветове в имена, HEX кодове, RGB, HSL, HWB и CMYK стойности.
14. Цифров измервател на цвета (Mac)
Добре, потребители на Mac ... това е за вас. С вградения във вашата машина инструмент за цифров измервател на цвят можете да „вземете“ цвят от всяко място на екрана, след което да получите стойностите за този цвят като десетична, шестнадесетична или процентна. Освен това можете дори да „копирате“ избрания цвят като текст или изображение.
Прочетете още:
- Ако знаменитостите бяха в цветовете на Pantone
- 3 огромни цветни тенденции за 2018 г.
- Как да избирате перфектната цветова палитра всеки път
