Boya renk programı. Web tasarımcısına yardımcı olacak palet oluşturucular. Paleti erişilebilir hale getirme

Renkler web tasarımında büyük rol oynar. Sitenin renk şemasını doğru seçmek için özel hizmetler var. Eminim her web tasarımcısının yer imlerinde en az bir tane vardır.

Bazen oturur ve site için ana renk olarak hangi mavi tonunu seçeceğinizi düşünürsünüz, biraz daha açık veya biraz daha parlak veya belki daha koyu ... Ve bunun için hala ek olanları almanız gerekiyor. Tabii ki, bunu gözle yapabilirsiniz, ancak özel hizmetlerden birini kullanmak daha iyidir.

Renk teorisi hakkında konuşmayacağım (bu çok hacimli bir bilgi), ancak yer imlerimde bulunan ve kullandığım hizmetleri burada yayınlayacağım.

Bu enstrümanla uzun yıllardır arkadaşız. Renkleri seçmek için en uygun araç (bence). Birçok ek özelliği vardır. Örneğin, seçilen renklerle açık ve koyu bir sayfa örneğini görebilirsiniz.

Renk körlüğü ve diğer görme bozuklukları olan kişilerin renk düzeninizi nasıl göreceklerini değerlendirmek mümkündür. Web uyumlu renkler seçebilirsiniz.

Adobe Kuler, oldukça sık kullandığım ikinci web aracı. Renk şemasının seçimi, önceki sitedekiyle neredeyse aynı, ancak bunun için sevmiyorum. Kendiniz renk şemaları oluşturabilmenizin yanı sıra başkaları tarafından oluşturulan şemaları görüntüleyebilir ve kullanabilirsiniz.

Bunu yapmak için sol üst menüdeki "İzle" düğmesine tıklayın. Ve her çeşit renk kombinasyonundan oluşan bir galeri göreceksiniz.

Bu araç Colorscheme'e biraz benzer, ancak daha az özelliğe sahiptir, ancak renk bloklarının nasıl görüneceğini görmek mümkündür.

Bu siteyi pek kullanmıyorum ama zaten yer imlerimde olduğu için eklemeye karar verdim.

Aşağıdaki iki site, seçtiğiniz bir görüntüden bir palet oluşturur. Bu sihirdir :)

Renklerini beğendiğiniz herhangi bir resmi seçersiniz, servis onu analiz eder ve size bir renk paleti verir. Bu iki site, yalnızca onlara nasıl resim sağlanacağı konusunda farklılık gösterir.

Bu sitenin ihtiyacı indirmek bilgisayarınızdan resim.

Çok kullanışlı bir renk seçici. "Beğen - Beğenme" ilkesine dayanmaktadır.

Adından da anlaşılacağı gibi, burada artık moda olan düz tasarım için renkleri seçebilirsiniz. Site, bir palet seçerek Corel ve Photoshop programları için indirebilirsiniz.

Bir başka moda trendi de malzeme tasarımıdır. Bu site, kullanıcı arayüzü (kullanıcı arayüzü) için renk kombinasyonlarının seçilmesine yardımcı olur. Ek olarak, sitede çok sayıda simge vardır.

Ve son olarak, tekrar kullanıcı arayüzü. Bu sadece UI tasarımı için bir renk kümesidir. Herhangi bir renge tıklayarak, beyaz metnin belirli bir arka plana karşı nasıl okunacağını görebilirsiniz.

Bunlar yer imlerimde bulunan araçlar.

Web tasarımı için hangi renk eşleştirme sitelerini kullanıyorsunuz yorumlara yazın?

Bir web tasarımcısının çalışmasının önemli bileşenlerinden biri, birbiriyle uyumlu bir şekilde harmanlanan renklerin seçimi olan bir paletin oluşturulmasıdır. Süreç oldukça karmaşıktır ve yaratıcı bir yaklaşım gerektirir. Renkle çalışmayı çok daha kolay hale getirebilecek çok sayıda kaynak vardır.

Son zamanlarda hakkında detaylı bir yazıyla karşılaşmış olabilirsiniz. Ve biraz önce, Kuler ve ColorBlender'a genel bir bakışla seçim araçları hakkında benzer bir not yayınladım. Bugün temayı tamamlamaya ve site için renk paletleri seçmek için biraz daha fazla seçenek sunmaya karar verdim.

RenkDöndür

ColoRotate aracı, çok sayıda hazır öneri arasından en uygun renk şemalarını seçmenize veya kendinizinkini oluşturmanıza olanak tanır. Dönen bir 3D palet üzerinde farklı yerlerde renkleri seçerek, uyum veya kontrast üzerine kurulmuş kombinasyonlar elde edebilir, tonlar, parlaklık, doygunluk ile çalışabilir, farklı renkleri karıştırabilirsiniz. Ayrıca bitmiş görüntülerden renkleri çıkarabilirsiniz. İPad için bir sürümü var, Photoshop ile senkronizasyon mevcut. Çok güzel hizmet.

Adobe Color CC

Adobe Color CC paleti ve renk şeması oluşturucu şunları yapmanızı sağlar:

• etkileşimli renk çarkında renk kombinasyonlarını deneyin (7 çeşit renk sistemi mevcuttur);
• önceden tanımlanmış stilleri kullanarak renk temaları oluşturun;
• bir fotoğraftan veya başka bir hazır görüntüden renkler kullanarak renk şemaları oluşturun;
• çalışmanızı paylaşın ve başkalarını tanıyın, onlardan ilham alın.

Oluşturulan renk temaları masaüstü veya mobil uygulamalara kaydedilebildiği gibi sitenin “Temalarım” bölümüne de kaydedilebilir.

alçalmak

DeGraeve web sitesi, hazır görüntülere dayalı bir renk şeması oluşturucu da dahil olmak üzere çeşitli araçlar sunar. İnternette ilginç bir renk şemasına sahip bir resim bulmanız, bu resmin URL'sini sitedeki uygun satıra yüklemeniz ve palet oluştur düğmesini tıklamanız yeterlidir. Birkaç saniye sonra, program resmi 10 ana renge, 5 sessiz (donuk) ve 5 parlak (canlı) olarak ayrıştırarak her birine kendi kodunu atayacaktır. Oluşturulan palet, web sitesi tasarımı üzerinde çalışırken kullanıma uygundur, renkler birbiriyle mükemmel uyum sağlar.

Kontrast-A

"Uygun fiyatlı bir renk kombinasyonu bulun" sloganı taşıyan Kontrast-A aracı, eşleşen renklerle denemeler yaparken özel paletler oluşturmak için tasarlanmıştır. Program, web içeriği renk eşleştirme kılavuzuna (metin ve arka plan) dayanmaktadır. Onunla çalışmak için, bu konuda temel bilgi arzu edilir.

Servis, palet üzerinde 2 renk seçmenize ve metin ve arka plan olarak kullanılarak bunların birlikte nasıl görüneceğini değerlendirmenize olanak tanır. Ayrıca, normal renk algısı ve çeşitli renk körlüğü biçimleri için sonuçlar gösterilmektedir.

ColorZilla

Firefox için ColorZilla uygulaması (Google Chrome için de bir sürümü vardır), web yöneticilerine ve renkle çalışan grafik tasarımcılarına yardımcı olur. Hem yeni başlayanlar hem de ileri düzey kullanıcılar için faydalı olacaktır. Program, tarayıcıdaki herhangi bir noktanın ve herhangi bir sayfanın renk analizini yapar, diğer uygulamalarda kullanılmak üzere istenen renkleri çıkarır. Sayfanın renk paletini belirlemek, önceden tanımlanmış bir kümeden renk seçmek, kullanıcı paletinin bir parçası olarak en sık kullanılanları kaydetmek - yeteneklerinin kümesi budur.

resimli

Pictaculous, başka bir görüntü tabanlı renk paleti üreticisidir. Seçilen resmi 500 KB'den fazla olmayan siteye yüklemeniz yeterlidir ve renk analizi hemen başlayacaktır. Görüntünün renk şemasının altında, bir düzine daha fazla palet görüntülenir, ancak bunlar Kuler ve COLOURLovers kaynak topluluklarının üyeleri tarafından zaten manuel olarak oluşturulmuştur. Ayrıca, geliştirilmekte olan site için bir renk şeması olarak da kullanılabilirler. Sonucu mailinize gönderebilir, sosyal ağlarda paylaşabilirsiniz.

Başka renk paleti oluşturucuları biliyorsanız, yorumlardaki bağlantıları paylaşın.

Özgün ve tanınabilir bir tasarım yaratmanın en önemli faktörlerinden biri renktir. Doğru renk şeması seçimi, bir sitenin başarısını veya başarısızlığını belirleyebilir. Bir ziyaretçi bir web sayfasına ilk baktığında, seçtiğiniz renkler ona sayfa hakkında bir anlık mesaj gönderir. Neyse ki, doğru renk şemasını seçmenize yardımcı olacak birçok araç var. İşte en iyilerinden beşi.

1. Soğutucu

Adobe'den Kuler, uzun süredir profesyonel bir web tasarımcısının en iyi yardımcısı olarak tanınmaktadır. Rakiplerin aksine, burada geniş bir topluluk var ve oluşturulan paletleri paylaşabilir veya başkalarının renk şemalarını alıp ihtiyaçlarınıza göre değiştirebilirsiniz. Toplulukta iletişim kurmak için kaydolmanız ve bir Adobe ID almanız gerekir. Kuler'deki renkler, RGB, CMYK, LAB ve HSV dahil olmak üzere çeşitli biçimlerde temsil edilir.

İlham, en beklenmedik durumun etkisi altında ortaya çıkabilir. Örneğin, çekici bir renk şemasına sahip güzel bir fotoğrafa rastlayabilirsiniz. Bu renk paleti oluşturucu, yalnızca bu tür fotoğrafları işlemek için tasarlanmıştır. Dosyaları JPG veya PNG formatlarında yükleyin ve ana renklere göre ayrıntılı bir düzen elde edin. Ziyaretçilerinizde hangi tepkiyi uyandırmaya çalışıyor olursanız olun, bir renk paleti oluşturucu herhangi bir web sitesi için benzersiz bir görünüm oluşturmanıza yardımcı olabilir.

Tek tek renkler asla boşlukta asılı kalmaz ve her renk tonunun etrafındakiler üzerinde bir etkisi vardır. Kontrast-A aracı, palet yapılandırmasına son derece teknik bir yaklaşım getirerek, Parlaklık Oranı ve parlaklık ve renk farklılıkları hakkında ayrıntılı bilgi sağlar. Birbirini tamamlayan birkaç renkle minimalist bir web sitesi oluşturmak istiyorsanız bu mükemmel bir araçtır.

Firefox için bu popüler eklenti, tek tek renklerin değerlerini belirlemenize ve aralarındaki farkı doğrudan tarayıcıda ölçmenize olanak tanır. Önceden seçilmiş kümelerden tek tek renkleri seçmek için bir "renk şeması tarayıcısı" vardır. Kullanımı kolay ve son derece zengin özelliklere sahip ColorZilla eklentisi, web tasarımcıları ve sanatçılar için tarayıcı uzantılarının İsviçre çakısı gibidir.

Diğer "renk çarkı" renk şeması oluşturucularının çoğunun aksine, Colorotate paleti bir 3B koni üzerinde gösterir. Kuler gibi, kullanıcılar da kendi renk şemalarını kaydedebilir ve düzenleyebilir, ayrıca diğer tasarımcılar tarafından yapılmış paletleri görüntüleyebilir. Araç, popüler tasarım programları Adobe Fireworks ve Photoshop ile entegre edilmiştir.

Etkili web tasarımı söz konusu olduğunda, sezgisel kullanıcı arayüzleri ve düzenleri hakkında konuşuruz, ancak renk şemaları daha fazla değilse de aynı derecede önemlidir. Burada listelenen araçlar, ilk denemede siteniz için harika bir renk paleti seçmeniz için sizi doğru yöne yönlendirmelidir. İnternette başka faydalı araçlar da var, ancak bunlar kişisel tarzınıza uygun mükemmel cephaneliği oluşturmaya başlamak için kullanabileceğiniz araçlar. İyi şanslar ve mutlu tasarım!

Renk, bir tasarımcının çalışmasında en önemli unsurlardan biridir. Ancak bir konsept olarak, ustalaşmak oldukça zordur: paletlerin birçok kombinasyonu genellikle web sayfalarının ve uygulamaların arayüzünün en iyi nasıl şekillendirileceğine karar vermeyi zorlaştırır. Daha önce, seçim araçlarının incelemelerini yayınlamıştık ve. Ve bugün, blogda Nick Babich'in UX Tasarımcıları için Temel Renk Araçları makalesinin bir çevirisini yayınlayarak konuyu genişletmek istiyoruz.

Bu gönderi, size çok zaman kazandıracak web siteleri ve UX tasarımı için en iyi renk eşleştirme hizmetlerinin bir listesini içerir. Bu projeler sayesinde şunları öğreneceksiniz:

• ilham nereden alınır;
• kendi paletinizi nasıl oluşturabilirsiniz;
• renk görme bozukluğu olan insanlar için tasarımın nasıl erişilebilir hale getirileceği.

1. İlham almak

Doğanın renkleri

Çevrenizdeki dünyadan çizin. Tek ihtiyacınız olan sadece etrafa bakmak. Moda giysiler, kitap kapakları, iç tasarım... Çevrenizde çok şaşırtıcı şeyler var. Ancak en iyi renk kombinasyonları doğanın renkleridir. Güzel bir anı yakalayın ve belirli bir görüntüye dayalı olarak kendi seçiminizi oluşturmaya çalışın.

En iyi renk kombinasyonları doğada bulunur. Herhangi bir fotoğraftan bir renk şeması elde edebilirsiniz.

Behance

Popüler hizmette, kendi alanlarındaki gerçek profesyonellerin en iyi çevrimiçi portföylerinde yer alan ilginç çalışmaları bulacaksınız. Bu site aynı zamanda harika bir ilham kaynağı. Yeni değerli proje örneklerini görmek için istediğiniz rengi seçmeniz yeterli.

Top Sürme Renkleri

Dribbble, bir kullanıcı arayüzü oluştururken kullanışlı olacak en iyilerden biridir. Başkalarının belirli bir rengi nasıl kullandığını görsel olarak anlamak istiyorsanız, dribbble.com/colors adresine gidin ve istediğiniz değeri girin.

Site için bir renk seçerken, burada minimum yüzdesini ayarlayabilirsiniz - deneme, örneğin %30 mavi ayarlamayı deneyin.

Dribbble'da belirli bir rengin minimum yüzdesini ayarlamayı deneyin

tasarım ilhamı

Designspiration, öncelikle renk kombinasyonu fikirleri olan ve bu tür kombinasyonların örneklerini görmek isteyenler için kullanışlı bir araçtır. 1 ila 5 seçenek arasından seçim yapın ve belirtilen parametrelerle eşleşen resimler bulacaksınız.

Designspiration'da farklı renk kombinasyonları örnekleri bulacaksınız.

Tineye Çok Renkli

Tineye Multicolr renk eşleştirme hizmeti ile istediğiniz görüntü gamını belirleyebilir hatta her birinin yüzdesini (oranını) belirleyebilirsiniz. Site, Flickr'dan alınan 20 milyon Creative Commons fotoğrafından oluşan bir veritabanı ile entegre edilmiştir. Bu kesinlikle mükemmel paleti bulmanın en hızlı yollarından biridir.

Renk Zilla

ColorZilla, Chrome ve Mozilla Firefox tarayıcılarında kurulum için bir uzantıdır. Damlalık, palet tarama, oluşturma ve daha fazlası gibi araçları içerir.

ColorZilla uzantısı Chrome ve Firefox'ta mevcuttur

Shutterstock Spektrumu

Renk şemasının nasıl görüneceği hakkında fikir edinmenin en iyi yollarından biri, ilgili resimlere bakmaktır. Web sitesi tasarımı renk seçenekleri sunan çoğu çözüm bu özelliği içerir, ancak Shutterstock Spectrum, gerçekten kullanışlı olabilecek inanılmaz derecede kullanıcı dostu bir arayüze ve önizlemeye sahiptir.

Ayrıca, bir aboneliğe ihtiyacınız yoktur, çünkü resmin ön değerlendirmesi oldukça yeterli olacaktır ("filigran" olmasına rağmen).

W3Okulları

Son zamanlarda, bir blog W3Schools'dan bir seçimi inceledi. Konuyla ilgili, adlarından / gölge kodlarından, palet kombinasyonları teorisinden ve farklı biçimlerin bir açıklamasıyla biten birçok bilgi var: HEX, RGB, CMYK, HWB, vb. Ayrıca basit jeneratörler, dönüştürücüler bulacaksınız. ve benzeri "mini hizmetler". Hepsi bir arada, görmek ilginç.

2. Bir renk paleti oluşturun

Malzeme Tasarımı Renk Aracı

Malzeme Tasarımı Renk Aracı site renk seçici hizmeti, seçimleriniz için renk şemaları oluşturmanıza, paylaşmanıza ve önizlemenize olanak tanır. Kullanışlı işlevlerinden biri, herhangi bir renk kombinasyonunun erişilebilirlik düzeyini ölçmektir.

soğutucular

Coolors, çok renkli bir palet oluşturmak için bir sitedir. Sadece belirli bir rengi düzeltin ve boşluk çubuğuna basın. Araç ayrıca, birden fazla sonuç alacağınız için iyidir, ancak yalnızca ilk verileri değiştirerek birkaç seçenek oluşturabilirsiniz.

Fotoğrafa dayalı Coolors'ta renk şeması

Adobe Color CC

Renk eşleştirme hizmeti Adobe Color CC (eski adıyla Kuler) artık oldukça popüler. İnternette ücretsiz olarak bulunur, ancak bir tanımlayıcı sürümü de vardır. Bu web uygulaması ile renk tekerleğini kullanarak paletinizi oluşturacaksınız:

Veya bitmiş görüntüden belirli bir sonuç alabilirsiniz:

Resme göre site için renk seçimi

Burada yüzlerce hazır kombinasyon var, onları "İzle" bölümünde arayın:

Masaüstü sürümünü kullanıyorsanız, oluşturduğunuz renk sistemini tek tıkla InDesign, Photoshop ve Illustrator'a aktarabilirsiniz.

palet

Bu tasarımlar çok benzer olduğu için genellikle önceki Adobe Color CC ile karşılaştırılır. Tek fark, Paletton'da beş seçenekle sınırlı olmamanız, ancak ek arayüz tonlarıyla denemeler yapabilmenizdir.

Ek olarak inceleyebilirsiniz. Diğerleriyle birlikte uygulama, yalnızca akıllı telefonunuzu kullanarak her yerde çalışmanıza olanak tanır. Renk paletlerini doğrudan oluşturmaya / dışa aktarmaya ek olarak, burada resimlerden belirli renkleri seçebilir veya temel seçenekleri kullanabilirsiniz.

3. Paleti erişilebilir kılmak

Şu anda renk algılama bozuklukları düşündüğümüzden çok daha yaygın. Dünyada yaklaşık 285 milyon insan görme sorunları yaşıyor. Seçtiğinizin bu tür kullanıcılar için uygun olup olmadığını her zaman kontrol etmelisiniz.

WebAIM Renk Kontrast Denetleyicisi

Bazı tonlar birbiriyle mükemmel bir şekilde birleştirilirken, diğerleri tam tersidir. Çok sayıda proje A / A testini geçmiyor ve bu bir gerçek. Özellikle sayfada çok fazla metin varsa, arayüzün görsel tasarımını ve tonların kontrastını kontrol etmek çok önemlidir. Bu amaçlar için, sitenin renklerini seçerken kullanın.

WebAIM Color Contrast Checker, renk kodlarını onaltılık değerlerde kontrol eden web tabanlı bir araçtır.

soğutucular

Bu hizmetten yukarıda bahsetmiştik. Coolors, diğer şeylerin yanı sıra, renk körlüğü için icat ettiğiniz paleti kontrol etmenize de yardımcı olacaktır.

Bir şemadaki renk körlüğü türü

"Normal" mod yerine, simüle etmek istediğiniz görme problemi tipini seçin. Sonuç olarak, belirli renkleri ayırt edemeyen bir kişinin tasarımınızı nasıl göreceğini tam olarak anlayacaksınız.

Protanomalisi olan bir kişi bir paleti böyle görür

Chrome için NoCoffee Vision Simulator

NoCoffee Vision Simulator web sitesi yardımıyla, renk körü veya az gören kişilerin belirli web sayfalarını nasıl algılayacağını görebilirsiniz. Örneğin, "Renk Eksikliği" bölümünde "Akromatopsi" seçeneğini belirterek web sayfasını gri olarak göreceksiniz.

Döteranopisi olan bir kişi için CNN projesi böyle görünüyor

Çözüm

Makalede bahsedilen web siteleri ve UX tasarımı için tüm renk eşleştirme hizmetleri, ilginç ve etkili bir dizi aramanızda kesinlikle size yardımcı olacaktır. Ancak unutmayın, harika paletler oluşturmayı öğrenmenin en iyi yolu çok fazla pratik yapmak ve deney yapmaktır.