Түс комбинациясын таңдауға арналған бағдарлама habr. Веб-дизайнерге көмектесетін палитра генераторлары

Түстер веб-дизайнда үлкен рөл атқарады. Сайттың түс схемасын дұрыс таңдау үшін арнайы қызметтер бар. Әрбір веб-дизайнердің бетбелгілерінде кем дегенде біреуі бар екеніне сенімдімін.

Кейде сіз отыруға және сайт үшін негізгі көк түстің қай реңкін таңдауға болатынын ойлайсыз, сәл ашықырақ немесе сәл ашықырақ немесе күңгіртірек болуы мүмкін ... Және ол үшін әлі де қосымшаларды таңдау керек. Әрине, сіз мұны көзбен жасай аласыз, бірақ арнайы қызметтердің бірін пайдалану жақсы.

Мен түс теориясы туралы айтпаймын (бұл тым көлемді ақпарат), бірақ бұл жерде менің бетбелгілерімде бар және мен пайдаланатын қызметтерді жариялаймын.

Мен бұл аспаппен көп жылдан бері дос болдым. Көпшілігі ыңғайлы құралтүсті сәйкестендіру үшін (менің ойымша). Оның көп нәрсесі бар қосымша мүмкіндіктер. Мысалы, таңдалған түстері бар ашық және күңгірт беттің мысалын көруге болады.

Түс соқырлығы және басқа да көру қабілеті бұзылған адамдар сіздің түс схемаңызды қалай көретінін бағалауға болады. Сіз веб-қауіпсіз түстерді таңдай аласыз.

Adobe Kuler - мен жиі қолданатын екінші веб-құрал. Түс схемасын таңдау алдыңғы сайттағыдай дерлік, бірақ мен оны ол үшін емес жақсы көремін. Сіз өзіңіз жасай алатын нәрселерге қосымша түс схемалары, басқа адамдар жасаған диаграммаларды көруге және пайдалануға болады.

Ол үшін жоғарғы сол жақ мәзірдегі «Көру» түймесін басыңыз. Және сіз барлық түрдегі галереяны ашпас бұрын түс комбинациялары.

Бұл құрал Түс схемасына сәл ұқсас, бірақ мүмкіндіктері аз, бірақ түс блоктарының қалай көрінетінін көруге болады.

Мен бұл сайтты әрең қолданамын, бірақ ол менің бетбелгілерімде бар болғандықтан, мен оны қосуды шештім.

Келесі екі сайт таңдаған кескіннен палитра жасайды. Бұл сиқыр :)

Түстері ұнайтын кез келген суретті таңдайсыз, қызмет оны талдап, түстер палитрасын береді. Бұл екі сайт бір-бірінен тек суретті қалай қамтамасыз ету керектігімен ерекшеленеді.

Бұл сайт қажет жүктеп алукомпьютерден сурет.

Өте ыңғайлы түс таңдау құралы. «Ұнады – Ұнамайды» принципі негізінде.

Аты айтып тұрғандай, мұнда сіз қазір сәнді, тегіс дизайн үшін түстерді таңдай аласыз. Сайт қызықты, палитраны таңдау арқылы оны Corel және Photoshop бағдарламалары үшін жүктеп алуға болады.

Тағы бір сән үрдісі - бұл материалды дизайн. Бұл сайт UI (пайдаланушы интерфейсі) үшін түс комбинацияларын таңдауға көмектеседі. Сонымен қатар, сайтта белгішелердің үлкен жиынтығы бар.

Ақырында, пайдаланушы интерфейсі қайтадан. Бұл UI дизайнына арналған түстер жиынтығы ғана. Кез келген түсті басу арқылы ақ мәтіннің белгілі бір фонда қалай оқылатынын көруге болады.

Бұл менің бетбелгілерімде бар құралдар.

Түсініктемелерге жазыңыз, сіз веб-дизайн үшін қандай түсті сәйкес сайттарды пайдаланасыз?

Бірегей және танымал дизайнды жасаудың маңызды факторларының бірі - түс. Түс схемасын дұрыс таңдау сайттың сәтті немесе сәтсіздігін анықтай алады. Келуші веб-бетке бірінші рет қараған кезде сіз таңдаған түстер оған бет туралы жедел хабарлама жібереді. Бақытымызға орай, дұрыс түс схемасын таңдауға көмектесетін көптеген құралдар бар. Міне, ең жақсы бесеуі.

1. Салқындатқыш

Күлер бастап Adobe авторыкәсіби веб-дизайнердің ең жақсы көмекшісі ретінде бұрыннан танылды. Бәсекелестерден айырмашылығы, мұнда кең қауымдастық бар және сіз жасалған палитраларды бөлісе аласыз немесе басқа адамдардың түс схемаларын алып, оларды қажеттіліктеріңізге қарай өзгерте аласыз. Қоғамдастықпен байланысу үшін тіркеліп, Adobe ID алу керек. Күлердегі түстер RGB, CMYK, LAB және HSV сияқты әртүрлі пішімдерде ұсынылған.

Шабыт ең күтпеген жағдайдың әсерінен пайда болуы мүмкін. Мысалы, сіз кезігуіңіз мүмкін әдемі суреттартымды түстермен. Бұл түстер палитрасының генераторы тек осындай фотосуреттерді өңдеуге арналған. JPG немесе PNG пішіміндегі файлдарды жүктеп салыңыз және негізгі түстер бойынша егжей-тегжейлі орналасуды алыңыз. Келушілеріңізде қандай реакция тудыруға тырыссаңыз да, түстер палитрасының генераторы бірегей жасауға көмектеседі сыртқы түрікез келген веб-сайт үшін.

Жеке түстер ешқашан вакуумда ілінбейді және әрбір реңк айналасындағыларға әсер етеді. Contrast-A құралы палитра конфигурациясына жоғары техникалық көзқарасты қамтамасыз етеді егжей-тегжейлі ақпарат o Жарықтық қатынасы және жарықтық пен түстегі айырмашылықтар. Бір-бірін толықтыратын бірнеше түстері бар минималистік веб-сайтты жасағыңыз келсе, бұл тамаша құрал.

Firefox-қа арналған бұл танымал плагин жеке түстердің мәндерін анықтауға және олардың арасындағы айырмашылықты тікелей шолғышта өлшеуге мүмкіндік береді. Алдын ала таңдалған жиынтықтардан жеке түстерді таңдау үшін «түс схемасы шолғышы» бар. Қолдану оңай және мүмкіндіктері өте бай ColorZilla плагині веб-дизайнерлер мен суретшілерге арналған браузер кеңейтімдерінің швейцариялық армиясының пышағы сияқты.

Басқа «түс дөңгелегі» түс схемасы генераторларынан айырмашылығы, Colorotate палитраны 3D конусында көрсетеді. Kuler сияқты, пайдаланушылар өздерінің түс схемаларын сақтай және өңдей алады, сонымен қатар басқа дизайнерлер жасаған палитраларды көре алады. Құрал танымал дизайнмен біріктірілген Adobe бағдарламаларыФейерверк және фотошоп.

Тиімді веб-дизайнға келетін болсақ, біз интуитивті пайдаланушы интерфейстері мен макеттері туралы айтамыз, бірақ түс схемалары көп болмаса да, соншалықты маңызды. Мұнда тізімделген құралдар бірінші әрекетте сайтыңыз үшін тамаша түстер палитрасын таңдау үшін сізге дұрыс бағытты көрсетуі керек. Интернетте басқа да пайдалы құралдар бар, бірақ бұл сіздің жеке стиліңізге сәйкес келетін тамаша арсенал құруды бастау үшін пайдалануға болатын құралдар. Сәттілік және бақытты дизайн!

Кез келген веб-дизайнер қаншалықты маңызды екенін түсінеді. Түстің көмегімен екпіндер қойылады - маңызды бөлшектерге баса назар аударылады және қосалқы бөлшектер жасырылады. Түс көңіл-күйді тудырады. Түс - сайтқа кіруші тіпті бір әріпті оқымай тұрып немесе белгілі бір фотосуретте не бейнеленгенін түсінбес бұрын көретін бірінші нәрсе. Түс палитрасыСіздің сайт келушіні кешіктіруі немесе оны қорқытуы мүмкін.

Дұрыс түстер палитрасын таңдау- идеалды және мінсіз веб-сайт құру жолындағы алғашқы қадам. Әрбір бет элементінің түсі көрнекі түрде байланысты элементтермен ғана емес, сонымен қатар беттің және тұтастай алғанда сайттың жалпы түс схемасымен үйлесімді болуы керек.

Саяхат басында қателеспеу үшін біз шағын дайындадық түс схемасы генераторларына шолу, сайтты әзірлеу кезінде пайдаланатын негізгі түстердің дұрыс мөлшерін және комбинациясын таңдауға мүмкіндік береді. Олардың кейбіреулері өте қарапайым және стандартты функционалдылыққа ие, ал басқалары бірқатар бірегей мүмкіндіктерге ие. Бірақ олардың барлығы бірегей веб-сайт дизайнын әзірлеуде баға жетпес көмек көрсететіні сөзсіз.

Adobe Color CC

палитра

маған стиль беріңіз

салқындатқыштар

Түс - дизайнер жұмысындағы ең маңызды элементтердің бірі. Бірақ тұжырымдама ретінде оны меңгеру өте қиын: палитралардың көптеген комбинациясы көбінесе веб-беттер мен қолданбалардың интерфейсін қалай жақсы стильдеу керектігін шешуді қиындатады. Бұрын біз таңдау құралдарының шолуларын жариялады және. Ал бүгін біз блогта Ник Бабичтің UX дизайнерлеріне арналған негізгі түс құралдары мақаласының аудармасын жариялау арқылы тақырыпты кеңейткіміз келеді.

Ескертпе тізімді қамтиды ең жақсы қызметтервеб-сайттар мен UX дизайны үшін түс сәйкестігі, бұл сізге көп уақытты үнемдейді. Бұл жобалар арқылы сіз мыналарды үйренесіз:

• шабытты қайдан алуға болады;
• өз палитраңызды қалай жасауға болады;
• түсті көру қабілеті бұзылған адамдарға дизайнды қалай қол жетімді ету керек.

1. Шабыт іздеу

Табиғат түстері

Айналаңыздағы әлемнен сурет салыңыз. Сізге тек айналаңызға қарау керек. сәнді киім, кітап мұқабалары, интерьер дизайны... айналаңызда таңғажайып дүниелер көп. Бірақ ең жақсы түс комбинациясы - табиғаттың түстері. Әдемі сәтті суретке түсіріп, белгілі бір сурет негізінде өз таңдауыңызды жасауға тырысыңыз.

Ең жақсы түс комбинациясы табиғатта кездеседі. Кез келген фотосуреттен түс схемасын алуға болады

Behance

Танымал қызметте сіз таба аласыз қызықты жұмыс, өз саласындағы нағыз кәсіби мамандардың үздік онлайн портфолиоларына енгізілген. Бұл сайт та керемет шабыт көзі. Жобалардың жаңа лайықты мысалдарын көру үшін қажет түсті таңдаңыз.

Dribbble түстері

Dribbble - пайдаланушы интерфейсін жасау кезінде пайдалы болатын ең жақсылардың бірі. Басқалардың белгілі бір түсті қалай пайдаланғанын көрнекі түрде түсінгіңіз келсе, dribbble.com/colors сайтына өтіп, қажетті мәнді енгізіңіз.

Сайт үшін түсті таңдағанда, мұнда оның ең төменгі пайызын орнатуға болады - эксперимент, мысалы, 30% көк орнатуға тырысыңыз.

Dribbble қолданбасында белгілі бір түстің ең аз пайызын орнатып көріңіз

дизайн шабыты

дизайн шабыты - пайдалы құралең алдымен, түс комбинациялары туралы идеялары бар және осындай комбинациялардың мысалдарын көргісі келетіндер. 1-ден 5-ке дейінгі опцияларды таңдаңыз, сонда сіз көрсетілген параметрлерге сәйкес келетін суреттерді табасыз.

Designspiration бағдарламасында түс комбинацияларының әртүрлі мысалдарын таба аласыз

Tineye Multicolr

Tineye Multicolr түстерді сәйкестендіру қызметі арқылы сіз қалаған кескін гаммасын анықтай аласыз, тіпті олардың әрқайсысының пайызын (процентін) орнатуға болады. Сайт Flickr ұсынған 20 миллион Creative Commons фотосуреттерінің дерекқорымен біріктірілген. Бұл, әрине, ең бірі жылдам тәсілдертамаша палитрадан табыңыз.

Colorzilla

ColorZilla - орнатуға арналған кеңейтім Chrome браузерлеріжәне Mozilla Firefox. Ол тамшуыр, палитраны шолу, жасау және т.б. сияқты құралдарды қамтиды.

ColorZilla кеңейтімі Chrome және Firefox жүйелерінде қолжетімді

Shutterstock спектрі

Түс схемасы қандай болатыны туралы түсінік алудың ең жақсы тәсілдерінің бірі - сәйкес кескіндерді қарау. Көптеген веб-сайт дизайнының түс таңдауы осы мүмкіндікті қамтиды, бірақ Shutterstock Spectrum керемет мүмкіндіктерге ие пайдаланушыға ыңғайлы интерфейсжәне шынымен пайдалы болуы мүмкін алдын ала қарау.

Сонымен қатар, жазылудың қажеті жоқ, өйткені суретті алдын ала бағалау жеткілікті болады («су белгісі» болса да).

W3 мектептері

Жақында блог W3Schools таңдауын қарастырды. Ол тақырып бойынша көптеген ақпаратты қамтиды, олардың атаулары / реңктері кодтары, палитра комбинациялары теориясы және әртүрлі форматтардың сипаттамасымен аяқталады: HEX, RGB, CMYK, HWB және т.б. Сондай-ақ қарапайым генераторларды, түрлендіргіштерді таба аласыз. және осыған ұқсас «шағын қызметтер». Тұтастай алғанда, көру қызықты.

2. Түс палитрасын жасаңыз

Материалдық дизайн түс құралы

Material Design Color Tool веб-сайтының түстерді сәйкестендіру қызметі түс схемаларын жасауға, бөлісуге және алдын ала қарауға мүмкіндік береді. пайдаланушы интерфейсісіз таңдаған параметрлер үшін. Оның пайдалы функцияларының бірі - кез келген түс комбинациясының қолжетімділік деңгейін өлшеу.

салқындатқыштар

Coolors - көп түсті палитраны жасауға арналған сайт. Тек белгілі бір түсті түзетіп, бос орын пернесін басыңыз. Құрал сонымен қатар жақсы, өйткені сіз бірнеше нәтиже аласыз, бірақ сіз тек бастапқы деректерді өзгерту арқылы бірнеше опцияларды жасай аласыз.

Фотосуретке негізделген Coolors қолданбасындағы түс схемасы

Adobe Color CC

Түстерді сәйкестендіру қызметі Adobe Color CC (бұрынғы Kuler) қазір өте танымал. Ол Интернетте еркін қол жетімді, бірақ дескриптор нұсқасы да бар. Осы веб-қосымшаның көмегімен сіз өзіңіздің палитраңызды түс дөңгелегі арқылы жасайсыз:

Немесе дайын суреттен нақты нәтиже алуға болады:

Суретке сәйкес сайт үшін түс таңдау

Мұнда жүздеген дайын комбинациялар бар, оларды «Сағат» бөлімінен іздеңіз:

Жұмыс үстелі нұсқасын пайдалансаңыз, жасалған түс жүйесін InDesign, Photoshop және Illustrator бағдарламаларына бір рет басу арқылы экспорттай аласыз.

палитра

Ол көбінесе алдыңғы Adobe Color CC-мен салыстырылады, өйткені бұл дизайндар өте ұқсас. Жалғыз айырмашылық - Палеттонда сіз бес опциямен шектелмейсіз, бірақ сіз қосымша интерфейс реңктерімен тәжірибе жасай аласыз.

Оған қоса, мынаны қарауға болады. Басқалармен бірге қолданба кез келген жерде, тек смартфонды пайдаланып жұмыс істеуге мүмкіндік береді. Түс палитраларын тікелей жасау/экспорттаумен қатар, мұнда суреттерден белгілі бір түстерді таңдауға немесе негізгі опцияларды пайдалануға болады.

3. Палитраны қолжетімді ету

Қазіргі уақытта түсті қабылдау бұзылыстары біз ойлағаннан әлдеқайда жиі кездеседі. Дүние жүзінде 285 миллионға жуық адам көру қабілетінен зардап шегеді. Сіз таңдағаныңыздың мұндай пайдаланушылар үшін қолжетімділігін әрқашан тексеруіңіз керек.

WebAIM Түс контрастын тексеру құралы

Кейбір тондар бір-бірімен тамаша үйлеседі, ал басқалары мүлдем керісінше. Көптеген жобалар A / A сынағынан өтпейді, бұл факт. Тексеру өте маңызды визуалды дизайнинтерфейс пен тон контрасты, әсіресе бетте көп мәтін болса. Осы мақсаттар үшін сайттың түстерін таңдаған кезде пайдаланыңыз.

WebAIM Түс контрастын тексеру құралы тексеретін веб-негізделген құрал түс кодтарыон алтылық мәндерде.

салқындатқыштар

О бұл қызметжоғарыда айттық. Басқа нәрселермен қатар, Coolors сонымен қатар ойлап тапқан бояғышты түс соқырлығын тексеруге көмектеседі.

Схемадағы түс соқырлығының түрі

«Қалыпты» режимінің орнына модельдегіңіз келетін көру мәселесінің түрін таңдаңыз. Нәтижесінде сіз белгілі бір түстерді ажырата алмайтын адамның дизайныңызды қалай көретінін нақты түсінесіз.

Протаномалиясы бар адам палитраны осылай көреді

Chrome үшін NoCoffee Vision Simulator

NoCoffee Vision Simulator веб-сайтының көмегімен сіз түс соқырлығы немесе нашар көретін адамдардың кейбір веб-беттерді қалай қабылдайтынын көре аласыз. Мысалы, «Түс тапшылығы» бөлімінде «Ахроматопсия» опциясын көрсету арқылы сіз веб-бетті сұр түспен көресіз.

Дейтеранопиясы бар адамға CNN жобасы осылай көрінеді

Қорытынды

Мақалада айтылған веб-сайттар мен UX дизайнына арналған түстерді сәйкестендірудің барлық қызметтері қызықты және тиімді ауқымды іздеуде сізге міндетті түрде көмектеседі. Бірақ есіңізде болсын: Ең жақсы жолтаңғажайып палитраларды жасауды үйреніңіз - көп тәжірибе жасаңыз және тәжірибе жасаңыз.

Өмір таңдады, ал дизайнерлер төртеуін сынады мобильді қосымшалар, бұл кез келген интерьерге түстерді таңдауға көмектесуі керек.

Көптеген адамдар үшін интерьер дизайны түс таңдаудан басталады. Негізгі реңкті таңдау қиын емес, бірақ оған көмекші түстерді таңдау қиынырақ. Түс туралы кәсіби біліміңіз болмаса ше? Әзірлеушілер бұл сұраққа түстер палитраларын жасауға арналған қосымшаларды енгізу арқылы жауап берді.

Не істеп жатыр: Шервин-Уильямс түстер палитрасының генераторы.

Ол немен жұмыс істейді: iOS және Android

Қанша тұрады: тегін

Мариана Багаутдинова, «Kitchen GeD cucine» жетекшісі, дизайнер:

«Бірінші сөйлемнен ColorSnap жеткілікті деп айта аламын қызықты қолданба. Негізгі идея - кез келген пайдаланушының бұл үшін бірнеше опцияларды пайдалана отырып, түс комбинацияларының жеке дерекқорын құру мүмкіндігі бар: шабыт блогынан ұсынылған суреттер, өзіңіздің фотосуретіңіз, ұсынылған түс макеттерінен палитра жасау.

Қолданба ұсынатын бірінші нәрсе - сандық түсті диаграммалар: «түстердің отбасылары» (мысалы: қызыл, сары, көк, табиғи), тарихи түстер, американдық бояу компаниясы Sherwin-Williams түс кестесі. Бір қызығы, егер сіз бір немесе басқа опцияны бассаңыз, суретте пайдаланылған түстер мен сандар, Шервин-Уильямстың коллекциялары мен бояуларының атаулары бар палитра пайда болады. Дизайнерлер үшін және Қарапайым адамдарбұл жаңа ештеңе ойлап табу емес, бұрыннан әзірленген шешімдерді пайдалану мүмкіндігі. Сіз қабырғаларды ұсынылған негізгі интерьер нұсқалары бойынша бояуға тырысуға болады, олардың ішінде жеткілікті - бұл асүйлер, қонақ бөлмелері, жатын бөлмелері және балалар бөлмелері.

«Сахнаны бояу» бөлімі, менің ойымша, көңіл көтеруге арналған. Құралдар жиынтығы бөлшектермен, түстермен және түсті қолдану тәсілімен еркін импровизациялауға мүмкіндік береді. Paint-қа өте ұқсас. Егер сіз сурет салуға арналған арнайы электронды гаджеттердің иесі болмасаңыз, саусағыңызбен әдемі сызық сызу үшін сізге көп күш салу керек. Сіз кәсіби интерьер безендірушісі болсаңыз да, өз кеңістігін жасап, жобалайсыз ба, ColorSnap көмегімен қай жерде болсаңыз да жақсы шешімдерді таба аласыз, содан кейін оларды іс жүзінде қолдана аласыз. Менің жауабым: көріңіз!

түске сай

Не істеп жатыр: Кез келген нысан үшін дұрыс түстерді таңдауға көмектеседі - камераны нысанға бағыттап, ол үшін таңдаулы түс комбинацияларын таңдау жеткілікті. Бонус ретінде қолданба киіміңіздегі түстерді таңдауға көмектеседі.

Ол немен жұмыс істейді: iOS

Қанша тұрады: 75 рубль

Александра Осминина, сарапшы:

Әзірлеуші ​​ойлағандай, қолданба түсірілген фотосурет үшін түсті шешімдерді ұсынуы керек, бірақ бағдарлама жұмыс істейтін түстер, айтпақшы, аз, өте қарапайым және тапсырмаға мүлдем сәйкес келмейді. Интерфейс ыңғайсыз, ұсынылған түс схемаларын сақтау функциясы жоқ.

Түс таңдаушы сияқты жақсы емес және көңіл көтеру үшін тым қызықсыз».

түсті түсіруБенджамин Мур

Не істеп жатыр: Қолданба Бенджамин Мур бояуларының арасында әдемі реңк комбинациясын таңдайды. Ол басқалардан сізге ұнайтын реңктерді сатып алу мүмкіндігімен ерекшеленеді, өйткені компания Ресейде ұсынылған.

Ол немен жұмыс істейді: iOS және Android

Қанша тұрады: тегін

Елена Платон, интерьер дизайнері, сәулетші :

"Сүйкімді қолданба, пайдалану оңай және интуитивті. Бірден шабыттандырады. Кәсіби палитралар және әдемі түс схемасын тез және оңай жасауға қажет барлық нәрсе. Міндетті түрде пайдаланады."

Нағыз түстер

Не істеп жатыр: Қолданба түстер палитрасының генераторы болып табылады. Керемет жасау үшін шабыттандыратын фотосуретті таңдау (немесе түсіру) керек - оның негізінде бір-біріне сәйкес келетін бірнеше реңк таңдалады.

Ол немен жұмыс істейді: iOS және Android

Қанша тұрады: демо - тегін/280$

Ольга Осминина, дизайн студиясының жетекшісі:

"Real Colors қолданбасы мені таңдандырмады. Мен жаңа ештеңе көрмедім. Мен тек демо-нұсқасын сынағанымды бірден түсіндіргім келеді. Бірақ 280 долларға мен кәсіби нұсқаны сатып алғым келмеді. Coloristics ғылым, ал қарапайым адам - ​​түстердің жеке сезімдеріне сүйену.