Veb dizaynerinə kömək etmək üçün palitra generatorları. Veb dizaynerinə kömək etmək üçün palitra generatorları Generator rəngləri necə yaradır

Veb dizaynerinin işinin vacib komponentlərindən biri palitranın yaradılması, bir-biri ilə ahəngdar birləşən rənglərin seçilməsidir. Proses kifayət qədər mürəkkəbdir və yaradıcı yanaşma tələb edir. Rənglə işləməyi asanlaşdıran bir sıra resurslar var.

Bu yaxınlarda siz haqqında ətraflı məqalə ilə rastlaşmısınız. Bir az əvvəl mən Kuler və ColorBlender-in nəzərdən keçirilməsi ilə seçim alətləri haqqında oxşar qeyd dərc etdim. Bu gün mövzunu genişləndirmək və sayt üçün rəng palitrası seçmək üçün bir az daha çox seçim təqdim etmək qərarına gəldim.

ColoRotate

ColoRotate aləti çoxlu sayda hazır təkliflər arasından ən uyğun rəng sxemlərini seçməyə və ya özünüz yaratmağa imkan verir. Fırlanan 3D palitrada müxtəlif yerlərdə rənglər seçməklə siz harmoniya və ya kontrast əsasında kombinasiyalar əldə edə, çalarlar, parlaqlıq, doyma ilə işləyə və müxtəlif rəngləri qarışdıra bilərsiniz. Siz həmçinin bitmiş şəkillərdən rənglər çıxara bilərsiniz. IPad üçün bir versiya var, Photoshop ilə sinxronizasiya mövcuddur. Çox gözəl xidmət.

Adobe Color CC

Adobe Color CC palitrası və rəng sxemi generatoru sizə imkan verir:

• interaktiv rəng çarxında rəng birləşmələri ilə təcrübə (7 növ rəng sistemi mövcuddur);
• əvvəlcədən təyin edilmiş üslublardan istifadə edərək rəng mövzuları yaratmaq;
• fotoşəkildən və ya hər hansı digər hazır təsvirdən rənglərdən istifadə edərək rəng sxemləri yaratmaq;
• işinizi paylaşın və onlardan ilham alaraq başqalarını tanıyın.

Yaradılmış rəng mövzuları PC və ya mobil qurğular üçün proqramlarda, həmçinin veb-saytdakı “Mənim Mövzularım” bölməsində saxlanıla bilər.

DeGraeve

DeGraeve veb-saytı əvvəlcədən hazırlanmış şəkillərə əsaslanan rəng sxemi generatoru da daxil olmaqla müxtəlif alətlər təklif edir. Etməli olduğunuz şey İnternetdə maraqlı rəng sxemi ilə bir şəkil tapmaq, bu şəklin URL-ni veb saytında müvafiq sətirə yükləmək və palitranın yaradılması düyməsini sıxmaqdır. Bir neçə saniyədən sonra proqram şəkli 5 səssiz (tutqun) və 5 parlaq (canlı) olmaqla 10 əsas rəngə parçalayacaq və hər birinə öz kodunu təyin edəcək. Yaradılmış palitradan veb-sayt dizaynı üzərində işləyərkən istifadə etmək rahatdır, rənglər bir-biri ilə mükəmməl birləşəcəkdir.

Kontrast-A

“Uyğun rəng kombinasiyasını tapın” şüarı ilə Kontrast-A uyğun rənglərlə təcrübə apararkən fərdi palitralar yaratmağınıza kömək etmək üçün nəzərdə tutulub. Proqram veb məzmunun (mətn və fon) rəng uyğunluğu haqqında bələdçiyə əsaslanır. Bununla işləmək üçün bu mövzuda əsas biliklər arzuolunandır.

Xidmət palitrada 2 rəng seçməyə və mətn və fon kimi istifadə edildikdə onların birlikdə necə görünəcəyini qiymətləndirməyə imkan verir. Bundan əlavə, normal rəng görmə və rəng korluğunun müxtəlif formaları üçün nəticələr nümayiş etdirilir.

ColorZilla

Rənglə işləyən vebmasterlərə və qrafik dizaynerlərə kömək etmək üçün Firefox üçün ColorZilla proqramı (Google Chrome üçün də mövcuddur). Həm yeni başlayanlar, həm də qabaqcıl istifadəçilər üçün faydalı olacaq. Proqram brauzerdə istənilən nöqtənin və istənilən səhifənin rəng analizini həyata keçirir və digər proqramlarda istifadə üçün lazımi rəngləri çıxarır. Səhifənin rəng palitrasının müəyyən edilməsi, əvvəlcədən təyin edilmiş dəstdən rənglərin seçilməsi, istifadəçi palitrasının bir hissəsi kimi ən çox istifadə olunanların saxlanması - bu, onun imkanlarının diapazonudur.

Şəkilli

Pictaculous, hazır şəkillərə əsaslanan başqa bir rəng palitrası generatorudur. Sadəcə olaraq sayta 500 KB-dan çox olmayan seçilmiş şəkli yükləmək lazımdır və onun rəng təhlili dərhal başlayacaq. Şəklin rəng sxemi ilə nəticədə Kuler və COLOURLovers resurs icmalarının üzvləri tərəfindən artıq əl ilə yaradılan onlarla daha çox palitra göstərilir. Onlar həmçinin hazırlanmaqda olan vebsayt üçün rəng sxemi kimi istifadə edilə bilər. Nəticəni e-poçtunuza göndərə və sosial şəbəkələrdə paylaşa bilərsiniz.

Hər hansı digər rəng palitrası generatorlarını bilirsinizsə, şərhlərdə bağlantıları paylaşın.

Rəng dizaynda geniş istifadə olunur - məzmunu "canlandırmağa" imkan verir - elementlər arasında semantik əlaqə yaratmaq, işi emosiyalar və əhval-ruhiyyə ilə doldurmaq. Başlayan dizaynerlər təsadüfi rənglər seçirlər, lakin rəngdən daha mənalı şəkildə istifadə etməyin yolları var. Sadədən mürəkkəbə prinsip üzrə təşkil edilmiş 4 belə üsulu nəzərdən keçirək.

1. Məlum miqyasdan istifadə edin

brandcolors.net saytında məşhur brendlərin 500-dən çox rəng kombinasiyası var. Yandex, Google, Burger King bütün məhsullarında eyni palitradan istifadə edir. Bu markalar və onların rəngləri çoxları tərəfindən tanış və sevilir. Axtarış çubuğuna adı yazın və ya səhifəni sürüşdürün, istədiyiniz marka və rəngə vurun: onun kodu panoya kopyalanacaq.

2. Hazır peşəkar palitranı seçin

Ən asan yol hazır rəng birləşməsini götürməkdir. Çarxı hər dəfə yenidən ixtira etmək lazım deyil, çünki harmonik birləşmələr çoxdan məlumdur. Colordrop.io saytına gedin və seçin. Saytda yüzlərlə peşəkar 4 rəng palitrası var. İstədiyiniz birini seçdikdən sonra sağda açılan paneldən rəng kodlarını klikləyin və kopyalayın.

Bundan əlavə, xidmət 24 düz dizayn rənginin hazır seçimini ehtiva edir. "Düz Rənglər" adı altında sola klikləyin və bəyəndiyiniz kölgə üçün kodu götürün.

3. Bəyəndiyiniz fotoşəkilin və ya şəklin rəng palitrasını müəyyənləşdirin

Bu üsul bir az daha mürəkkəbdir. Həm də daha təsirli.

• Coolors.co saytında, yuxarı sol paneldə kamera simgesini tapın və üzərinə klikləyin. Şəkil yükləmə pəncərəsi açılacaq.
• Siz kompüterinizdən bəyəndiyiniz rəng sxemi ilə şəkil və ya şəkil seçə və ya linki boş sütuna köçürə bilərsiniz.
• Xidmət rənglərin birləşməsini müəyyən edəcək (aşağıda yüklənmiş şəklin altında).
• Siz bu palitranın fərdi rənglərini onları işarələməklə və fotoşəkildə rəng almaq istədiyiniz nöqtəni seçməklə dəyişə bilərsiniz.
• “Kollaj” düyməsi əldə edilən palitranı rəng kodları ilə kompüterdə saxlayır.
• “Avtomatik” düyməsi eyni şəkil əsasında yeni kombinasiyalar yaradır.
• "Ok" düyməsini basın və palitra ilə daha çox işləmək üçün saytın əsas səhifəsinə keçin.

Saytın əsas səhifəsi daha az funksional deyil. Burada fərdi rənglərin çalarlarını seçə və ya fərdi rəngləri əvəz edərək yeni palitra yarada bilərsiniz.

4. Öz rəng sxeminizi onlayn olaraq yaradın

Eyni coolors.co saytına şəkil yükləməklə siz nəinki rəng kodunu müəyyən edə, həm də öz kombinasiyalarınızı yarada bilərsiniz. Bunu etmək üçün boşluq düyməsini basın - xidmət avtomatik olaraq 5 rəngin birləşməsini yaradır.

Hər rəngdə 4 nişan düyməsi:

• Alternativ çalarlar - Rəng çalarları (daha tünd və daha açıq),
• Çəkin (Rəngi ​​palitrada sağa və ya sola köçürün),
• Tənzimləyin (Rəng, doyma, parlaqlıq və s. tənzimləyin),
• Kilidləyin (rəngi düzəldin).

Rənglər veb dizaynında böyük rol oynayır. Veb sayt üçün rəng sxemini düzgün seçmək üçün xüsusi xidmətlər var. Əminəm ki, hər bir veb dizaynerinin əlfəcinlərində bunlardan ən azı biri var.

Bəzən oturub düşünürsən ki, sayt üçün əsas olaraq mavinin hansı çalarlarını seçmək lazımdır, bir az daha açıq və ya bir az daha parlaq, bəlkə də daha tünd... Və bunun üçün hələ də əlavə olanları seçmək lazımdır. Əlbəttə ki, bunu göz ilə edə bilərsiniz, ancaq xüsusi xidmətlərdən birini istifadə etmək daha yaxşıdır.

Rəng nəzəriyyəsi haqqında danışmayacağam (bu, çox məlumatdır), sadəcə olaraq əlfəcinlərimdə olan və istifadə etdiyim xidmətləri burada dərc edəcəyəm.

Mən uzun illərdir bu alətlə dost olmuşam. Rəngləri seçmək üçün ən əlverişli vasitədir (mənim fikrimcə). Bir çox əlavə xüsusiyyətlərə malikdir. Məsələn, seçilmiş rənglərlə açıq və qaranlıq səhifə nümunəsini görə bilərsiniz.

Rəng korluğu və digər görmə qüsurları olan insanların rəng sxeminizi necə görəcəyini qiymətləndirmək mümkündür. Veb təhlükəsiz rəngləri seçə bilərsiniz.

Adobe Kuler tez-tez istifadə etdiyim ikinci veb alətdir. Rəng sxemlərinin seçimi əvvəlki saytda olduğu kimi demək olar ki, eynidir, amma buna görə də onu sevmirəm. Rəng sxemlərini özünüz yaratmaqla yanaşı, digər insanların yaratdığı sxemlərə baxa və istifadə edə bilərsiniz.

Bunu etmək üçün yuxarı sol menyuda "Bax" düyməsini basın. Və qarşınızda hər cür rəng birləşmələrinin qalereyası açılacaq.

Bu alət Rəng sxeminə bir qədər bənzəyir, lakin daha az funksiyaya malikdir, lakin siz rəng bloklarının necə görünəcəyini görə bilərsiniz.

Mən praktiki olaraq bu saytdan istifadə etmirəm, lakin əlfəcinlərimdə olduğu üçün onu da əlavə etmək qərarına gəldim.

Aşağıdakı iki sayt seçdiyiniz şəkildən palitra yaradır. Bu sehrdir :)

Rənglərini bəyəndiyiniz istənilən şəkli seçirsiniz, xidmət onu təhlil edir və sizə rəng palitrası verir. Bu iki sayt arasındakı yeganə fərq onların görüntünü necə təqdim etməsidir.

Bu sayt tələb edir yükləyin kompüterinizdən şəkil.

Rəng seçimi üçün çox əlverişli vasitədir. "Bəyəndim - Bəyənmədim" prinsipinə əsaslanır.

Adından da göründüyü kimi, burada indi dəbdə olan düz dizayn üçün rənglər seçə bilərsiniz. Sayt maraqlıdır, çünki palitranı seçdikdən sonra onu Corel və Photoshop üçün yükləyə bilərsiniz.

Başqa bir moda meyli material dizaynıdır. Bu sayt UI (istifadəçi interfeysi) üçün rəng birləşmələrini seçməyə kömək edir. Bundan əlavə, saytda çoxlu nişanlar dəsti var.

Və nəhayət, yenidən istifadəçi interfeysi. Budur UI dizaynı üçün sadəcə rənglər dəsti. İstənilən rəngə klikləməklə, müəyyən fonda ağ mətnin necə oxunacağını görə bilərsiniz.

Əlfəcinlərimdə olan alətlər bunlardır.

Şərhlərdə yazın veb dizayn üçün hansı rəng seçim saytlarından istifadə edirsiniz?

Rəng dizaynerin işində ən vacib elementlərdən biridir. Ancaq bir konsepsiya olaraq, mənimsəmək olduqca çətin ola bilər: palitraların bir çox birləşməsinə görə, veb səhifələrin və tətbiqlərin interfeysinin necə ən yaxşı şəkildə dizayn ediləcəyinə qərar vermək çox vaxt çətindir. Biz əvvəllər seçim alətləri və . Və bu gün biz blogda Nik Babiçin UX Dizaynerləri üçün Essential Color Tools məqaləsinin tərcüməsini yerləşdirməklə mövzunu genişləndirmək istəyirik.

Qeyddə çox vaxta qənaət etməyə kömək edəcək vebsaytlar və UX dizaynı üçün ən yaxşı rəng seçimi xidmətlərinin siyahısı var. Bu layihələr vasitəsilə siz öyrənəcəksiniz:

• ilhamı haradan almaq olar;
• öz palitranızı necə yaratmaq olar;
• dizaynı rəng görmə qüsuru olan insanlar üçün necə əlçatan etmək olar.

1. İlham axtarır

Təbiətin rəngləri

Ətrafınızdakı dünyadan çəkin. Sizə lazım olan tək şey ətrafa baxmaqdır. Dəbli geyimlər, kitab üzlükləri, interyer dizaynı... ətrafınızda o qədər heyrətamiz şeylər var. Ancaq ən yaxşı rəng birləşmələri təbiətin rəngləridir. Gözəl bir anı çəkin və müəyyən bir şəkil əsasında öz seçiminizi yaratmağa çalışın.

Ən yaxşı rəng birləşmələri təbiətdə tapılır. İstənilən fotoşəkildən rəng sxemi əldə edə bilərsiniz

Behance

Bu populyar xidmətdə siz öz sahəsində real peşəkarların ən yaxşı onlayn portfelinə daxil edilmiş maraqlı əsərlər tapa bilərsiniz. Bu sayt həm də böyük bir ilham mənbəyidir. Layihələrin yeni layiqli nümunələrinə baxmaq üçün sadəcə istədiyiniz rəngi seçin.

Dribbble Rəngləri

Dribbble istifadəçi interfeysi yaratarkən lazımlı olacaq ən yaxşılarından biridir. Başqalarının müəyyən bir rəngdən necə istifadə etdiyini əyani şəkildə anlamaq istəyirsinizsə, dribbble.com/colors saytına daxil olun və istədiyiniz dəyəri daxil edin.

Sayt üçün rəng seçərkən, burada onun minimum faizini təyin edə bilərsiniz - təcrübə, məsələn, 30% mavi təyin etməyə çalışın.

Dribbble-da xüsusi rəngin minimum faizini təyin etməyə çalışın

Dizayn ilhamı

Designspiration ilk növbədə rəng birləşmələri üçün ideyaları olan və bu cür birləşmələrin nümunələrini görmək istəyənlər üçün faydalı vasitədir. 1-dən 5-ə qədər seçim seçin və siz göstərilən parametrlərə uyğun olan şəkilləri tapacaqsınız.

Designspiration-da siz rəng birləşmələrinin müxtəlif nümunələrini tapa bilərsiniz

Tineye Multicolr

Tineye Multicolr rəng uyğunlaşdırma xidmətindən istifadə edərək, siz təsvirin istədiyiniz qammasını müəyyən edə və hətta onların hər birinin faizini (nisbət) təyin edə bilərsiniz. Sayt Flickr-dan 20 milyon Creative Commons fotoşəkillərindən ibarət məlumat bazası ilə inteqrasiya olunub. Bu, şübhəsiz ki, mükəmməl palitranı tapmağın ən sürətli yollarından biridir.

Colorzilla

ColorZilla Chrome və Mozilla Firefox brauzerlərində quraşdırma üçün əlavədir. Buraya damcı damcısı, palitraya baxış, yaratma və s. kimi alətlər daxildir.

ColorZilla uzantısı Chrome və Firefox-da mövcuddur

Shutterstock Spektr

Rəng sxeminin necə görünəcəyini təsəvvür etməyin ən yaxşı yollarından biri müvafiq şəkillərə baxmaqdır. Veb sayt dizaynları üçün rəng seçimi təklif edən həllərin əksəriyyətinə bu xüsusiyyət daxildir, lakin Shutterstock Spectrum həqiqətən faydalı ola biləcək inanılmaz dərəcədə istifadəçi dostu interfeysə və ön baxışa malikdir.

Üstəlik, abunəyə ehtiyacınız olmayacaq, çünki şəklin ilkin qiymətləndirilməsi kifayət qədər olacaq ("su nişanı" olsa da).

W3 Məktəbləri

Bu yaxınlarda blog W3Schools-dan bir seçimi nəzərdən keçirdi. Orada mövzu ilə bağlı çoxlu məlumat toplanmışdır, onların adlarından/çalar kodlarından başlayaraq, palitraların birləşdirilməsi nəzəriyyəsi və müxtəlif formatların təsviri ilə bitən: HEX, RGB, CMYK, HWB və s. generatorlar, çeviricilər və analoji “mini-xidmətlər”. Ümumiyyətlə, izləmək maraqlıdır.

2. Rəng palitrası yaradın

Material Dizayn Rəng Aləti

Material Dizayn Rəng Aləti sizə rəng sxemlərini yaratmağa, paylaşmağa və seçimləriniz üçün kobud istifadəçi interfeysinə baxmağa imkan verir. Onun faydalı funksiyalarından biri istənilən rəng birləşməsinin əlçatanlıq səviyyəsini ölçməkdir.

Rənglər

Coolors çoxrəngli palitrası yaratmaq üçün saytdır. Sadəcə müəyyən bir rəngi bağlayın və boşluq düyməsini basın. Alət də yaxşıdır, çünki birdən çox nəticə əldə edəcəksiniz, lakin yalnız ilkin məlumatları dəyişdirərək bir neçə variant yarada bilərsiniz.

Şəkil əsasında Coolors-da rəng sxemi

Adobe Color CC

Rəng uyğunlaşdırma xidməti Adobe Color CC (keçmiş Kuler) indi kifayət qədər populyardır. İnternetdə sərbəst mövcuddur, lakin desektor versiyası da var. Bu veb tətbiqi ilə siz rəng çarxından istifadə edərək öz palitranızı yaradacaqsınız:

Və ya bitmiş görüntüdən müəyyən bir nəticə əldə edə bilərsiniz:

Şəkil əsasında vebsayt üçün rənglərin seçilməsi

Burada yüzlərlə hazır kombinasiya var, onları "Bax" bölməsində axtarın:

İş masası versiyasından istifadə edirsinizsə, yaratdığınız rəng sistemini bir kliklə InDesign, Photoshop və Illustrator proqramlarına ixrac edə bilərsiniz.

Paletton

Dizaynları çox oxşar olduğu üçün tez-tez əvvəlki Adobe Color CC ilə müqayisə edilir. Yeganə fərq ondan ibarətdir ki, Paletton-da siz beş parametrlə məhdudlaşmırsınız, lakin əlavə interfeys tonları ilə sınaq keçirə bilərsiniz.

Əlavə olaraq baxa bilərsiniz. Başqaları ilə birlikdə proqram sizə sadəcə olaraq smartfondan istifadə etməklə istənilən yerdə işləməyə imkan verir. Rəng palitralarının yaradılması/ixracının birbaşa tapşırıqlarına əlavə olaraq, burada şəkillərdən xüsusi rənglər seçə və ya əsas seçimlərdən istifadə edə bilərsiniz.

3. Palitranın əlçatan olması

İndiki vaxtda rəng görmə pozğunluqları düşündüyümüzdən daha çox yayılmışdır. Dünyada təxminən 285 milyon insan görmə problemi yaşayır. Siz həmişə seçdiyiniz birinin belə istifadəçilər üçün əlçatan olub-olmadığını yoxlamalısınız.

WebAIM Rəng Kontrast Yoxlayıcısı

Bəzi tonlar bir-biri ilə yaxşı gedir, digərləri isə tamamilə əksinədir. Çox sayda layihə A/A testindən keçə bilmir və bu bir faktdır. Xüsusilə səhifədə çoxlu mətn varsa, interfeysin vizual dizaynını və tonların kontrastını yoxlamaq çox vacibdir. Bu məqsədlər üçün veb sayt rənglərini seçərkən istifadə edin.

WebAIM Rəng Kontrast Yoxlayıcısı rəng kodlarını onaltılıq dəyərlərdə yoxlayan veb əsaslı bir vasitədir.

Rənglər

Bu xidməti yuxarıda qeyd etdik. Digər şeylərlə yanaşı, Coolors da icad etdiyiniz palitranızı rəng korluğunu yoxlamağa kömək edəcək.

Diaqramda rəng korluğunun növü

Normal rejim əvəzinə simulyasiya etmək istədiyiniz görmə probleminin növünü seçin. Nəticədə müəyyən rəngləri ayırd edə bilməyən bir insanın dizaynınızı necə görəcəyini dəqiq anlayacaqsınız.

Protanomaliyalı insan palitranı belə görür

Chrome üçün NoCoffee Vision Simulator

NoCoffee Vision Simulator veb saytından istifadə edərək siz rəng korluğu və ya zəif görmə qabiliyyətinə malik insanların müəyyən veb səhifələri necə qəbul edəcəyini görə bilərsiniz. Məsələn, "Rəng çatışmazlığı" bölməsində "Axromatopsia" parametrini göstərsəniz, veb səhifəni boz rəngdə görəcəksiniz.

Deuteranopiya olan bir insan üçün CNN layihəsi belə görünür.

Nəticə

Məqalədə qeyd olunan bütün vebsayt rəng uyğunluğu və UX dizayn xidmətləri maraqlı və effektiv palitra axtarışınızda sizə mütləq kömək edəcəkdir. Ancaq unutmayın: heyrətamiz palitralar yaratmağı öyrənməyin ən yaxşı yolu çox məşq etmək və təcrübə etməkdir.

Hər hansı bir veb dizayneri nə qədər vacib olduğunu başa düşür. Rəngin köməyi ilə vurğular yerləşdirilir - vacib detallar vurğulanır və köməkçi olanlar gizlənir. Rəng əhval yaradır. Rəng, veb-sayt ziyarətçisinin hətta bir məktubu oxumadan və ya müəyyən bir fotoşəkildə göstərilənləri dərk etməzdən əvvəl gördüyü ilk şeydir. Rəng palitrası Saytınız ziyarətçini gecikdirə bilər və ya onu qorxuda bilər.

Doğru rəng palitrasının seçilməsi- ideal və qüsursuz veb-sayt yaratmaq yolunda ilk addım. Hər bir səhifə elementinin rəngi təkcə vizual olaraq əlaqəli elementlərlə deyil, həm də səhifənin və bütövlükdə saytın ümumi rəng sxemi ilə uyğun olmalıdır.

Səfərin əvvəlində səhv etməmək üçün kiçik bir şey hazırladıq rəng sxemi generatorlarına ümumi baxış, saytınızı inkişaf etdirərkən istifadə edəcəyiniz əsas rənglərin düzgün sayını və birləşməsini seçməyə imkan verir. Onlardan bəziləri olduqca sadədir və standart funksionallığa malikdir, digərləri isə bir sıra unikal funksiyalara malikdir. Lakin onların hamısı, şübhəsiz ki, unikal veb-sayt dizaynının hazırlanmasında əvəzsiz yardım göstərəcək.

Adobe Color CC

Paletton

Məni üslublandır

Rənglər