ev borcu WordPress sitesi
Coolors Renk Paleti Oluşturucu Kılavuzu
Bu gönderi, günlük kullanıcıların ve profesyonel tasarımcıların güçlü renk şemaları oluşturmak için kullandığı Coolors.co aracına ilişkin kapsamlı bir kılavuzdur. Bu uygulamanın olası kullanım örneklerini, arkasındaki özellikleri ve bu aracı kullanarak iş akışımızı daha verimli hale getirmek için öğrendiğimiz ipuçlarını ve püf noktalarını tartışacağız. Bu kapsamlı makalenin ayrı bölümlerine atlamak için bu sayfanın üst kısmındaki tablo içindekiler özelliğini kullanmaktan çekinmeyin.
Bu araç yakın zamanda yeniden tasarlandı ve bu kılavuz, Coolors Renk Paleti oluşturucunun 2021 (geçerli) sürümüyle ilgili.
Coolors.co nedir?
Coolors.co, siz ve şirketiniz için renk şemaları oluşturmak için hızla kullanabileceğiniz gerçekten basit bir web uygulamasıdır. Tek yapmanız gereken boşluk çubuğuna basmak ve iyi bir renk şeması seçimi elde edeceksiniz. Mevcut olanı beğenmediyseniz, boşluk çubuğuna tekrar basabilirsiniz ve size yeni bir tane verecektir. Evren patlayana kadar bu işlemi tekrarlayabileceksiniz ve aynı renk düzenini iki kez elde edemeyeceksiniz.
Yeni yeniden tasarımla, görüntülerden renk şemaları oluşturmak, kolajlar oluşturmak ve degradeler oluşturmak gibi çok daha fazla işlevsellik elde edersiniz. Artık paletleri ve degradeleri CSS ve Adobe palet dosya formatlarında dışa aktarabileceğiniz için web tasarımcıları için çok daha fazla işlevsellik de var.
Bir ajans olarak bunu, marka bilinci oluşturma ve web sitesi projeleri için renk şeması fikirleri oluşturmak için kullanıyoruz. Bu, üzerinde çalışılacak beş veya altı renk paleti oluşturmak için harika bir başlangıç noktasıdır.
Genel Özellikler
Yakın zamanda bu araçta yeni bir güncelleme yapıldı; iki renk arasındaki bir sınırın üzerine geldiğinizde, başka bir renk eklemenize izin verecek bir düğme açılır. Bu, ekranınızda aynı anda 8, 9 veya 10 farklı renge sahip olabileceğiniz anlamına gelir.
Bir rengi seviyorsanız, ancak diğerlerini yenilemek istiyorsanız, istediğiniz rengi kilitleyebilirsiniz ve jeneratör kilitli bir gıda ile çalışan renkler oluşturacaktır, örneğin, açık maviyi seviyorsanız, ancak diğer tüm renkler. renkler size göre değil, açık maviyi kilitleyebilirsiniz ve etrafındaki renkler değiştikçe standart kalacaktır.
Izgara simgesine tıklamak, temel rengin bir dizi tonunu yükleyecektir. Malzeme çerçevesiyle (veya bir renge dayalı basit ihtiyaç gölgeleri) kullanıcı arayüzleri oluşturuyorsanız, daha koyu ve daha açık renkler oluşturabileceğiniz için bu özelliği kesinlikle beğeneceksiniz.
Rengin bir gölgesine tıklamak, orijinal rengi genel palet üzerindeki yeni renkle değiştirecektir.
Rengi gerçekten beğendiyseniz, favorilerinize ekleyebilir ve daha sonra kullanmak üzere kaydedebilirsiniz. Bunu çok yapıyoruz ve bir rengi kilitleyerek ve etrafındaki diğer renkleri yenileyerek şemalar oluşturacak 20 ayrı renkten oluşan bir taban setimiz var. Bu işlevi kullanmak ve diğer bazı işlevleri kullanmak için bu platformda ücretsiz bir hesabınızın olması gerektiğini unutmayın.
Birçok kişi bilmiyor, ancak bu uygulamanın Adobe Photoshop için bir eklentisi var. Bu, aracı doğrudan süper güçlü bir dijital tasarım platformuna dahil ederek iş akışınızı ciddi şekilde artırabilir. Aynı şeyi yapan bir iOS uygulaması da oluşturdular.
Coolors'un çok yakın zamanda piyasaya sürülen en yeni sürümü, daha temiz bir pakette çok daha gelişmiş özelliklerle geliyor. Bu blog gönderisinin geri kalanı, yeniden tasarlanan bu aracın sahip olduğu her bir özelliği inceleyecek ve onunla neler yapabileceğinizi, iş akışınız için ipuçları ve püf noktaları ve onu pratik olarak günlük durumlara nasıl uygulayacağınızı size bildirecek.
İlk düğme, size değiştirebileceğiniz bir dizi bireysel ayar sunan bir açılır menüyü değiştirir. Birincisi, renk şemalarınızı oluşturmak için kullanılan yöntemdir. Varsayılan olarak, yöntem otomatiktir, ancak belirli matematiksel denklemlere, stratejilere ve daha fazlasına dayalı olarak renkler oluşturacak şekilde ayarlayabilirsiniz.
bununla Google sizin arkadaşınızdır ve renklerin ardındaki üretim yöntemleri hakkında çok şey öğrenebilirsiniz. Bu uygulama, bilgisayarlardan beri kullanılan denenmiş ve gerçek yöntemleri alır ve basitçe dijitalleştirir. Örneğin, üretim yönteminiz için tamamlayıcı renkler seçseydiniz, bir renk tekerleğinde birbirini tamamlayan renkler elde edersiniz. İşte bir örnek, mavi ve turuncu:
Oluşturma modunuz altındaki açılır menüdeki bir sonraki seçenek lüminesans haritasıdır. Temel olarak paletinizin siyah beyaz bir versiyonunu oluşturacak ve her bir rengin parlaklığını gösterecektir.
Parlaklık, belirli bir yönde hareket eden ışığın birim alanı başına ışık yoğunluğunun fotometrik bir ölçüsüdür. Tek tek renkten yayılan ışık miktarını tanımlar.
Paleti Gradyan Olarak Görüntüle
Bir sonraki seçeneğiniz, renk paletinizi degrade olarak görüntülemektir. Paletimizde altı ayrı rengin olduğu bu kullanım durumunda, bu çok kullanışlı değil. Ancak, iki renkten degradeler oluşturmak istiyorsanız ve bunları web sitesi projenize veya tasarımınıza eklemeden önce önizlemek istiyorsanız, bunu bu araçla yapabilirsiniz.
İşte iyi bir örnek. Mor ve pembeden bir degrade yapmak ve herhangi bir tasarım konseptinde kullanmadan önce önizlemesini yapmak istiyoruz. Tabii ki, fotoğraf dükkanına gidebilir ve gradyanı ayarlamak için 30 saniyeye kadar harcayabiliriz ya da Coolors uygulamasında bulunan bu küçük aracı kullanabiliriz.
Triadik oluşturma yöntemini kullanarak iki renk üretiyoruz. Üçlü renk şeması, renk tekerleğinde eşit olarak ayrılmış üç renkten oluşan herhangi bir renk paletidir. Örneğin, kırmızı, sarı ve mavi. Tipik olarak, bir renk baskın renk olarak hareket ederken diğer ikisi vurgu görevi görür.
Bu örnek için, sağda gösterilen mavi menekşeyi bulana kadar bir sürü renkten geçtim. Bunu bulduktan sonra, onu kilitledim ve jeneratörü cennet pembesini oluşturana kadar çalıştırdım.
Şimdi, bunun bir gradyan olarak iyi görüneceğini düşünüyorum, ancak gerçekten birbirine karıştığını görene kadar emin olamam.
Bu, renklerin tek tıklamayla oluşturduğu degrade ve bana oldukça iyi görünüyor.
Açılır menümüzde sıradaki ek ayarlar kullanıcı arayüzüdür.
Zen Modu
Tüm üstbilgileri ve altbilgileri ortadan kaldıran ve yalnızca oluşturduğunuz renk paletini görüntüleyen Zen modunu değiştirmek için kullanabilirsiniz. Önerildiği gibi, bu mod çok Zen'dir ve daha da fazla odak için F-11 tuşuna basarak tarayıcınızla tam ekran modunu bile değiştirebilirsiniz.
Bu modda, göreceğiniz şey şudur:
Bu, ekranın sağ tarafında, renk paletinin üzerinde bulunan ana menüden değiştirilebilen ilk açılır menüdeki tüm öğeleri kapsar.
Görüntüden Renk Şeması Oluştur
Sırada, tek tek fotoğraflardan renk şemaları oluşturmanıza izin veren çok kullanışlı bir aracınız var. Web sitenizi bir fotoğraf koleksiyonu etrafında temalandırıyorsanız ve yazı tipi renkleri, vurgu renkleri ve daha fazlasını oluşturmanız gerekiyorsa, bu gerçekten yararlıdır.
Kullanıcı arayüzü bir resim virgül yüklemenize izin verir bir URL virgülden bir resim seçin bir resim virgül almak için kameranızı kullanın veya hatta bir tane arayın. Arama özelliği, görüntüleri toplamak için Unsplash API'sini kullanır.
Bu örnek için, kullanacağımız şey bu.
Diyelim ki okyanus manzaralı bir kiralık yazlık ev için bir web sitesi kuruyorsunuz. Ana sayfa kahramanınız olarak bir okyanus resmi kullanmak ve okyanusun etrafında bir renk şeması oluşturmak istiyorsunuz. Görüntü seç açılır penceresindeki işlevi kullanarak bir okyanus fotoğrafı arayabilirsiniz.
Daha da iyisi, tüm Unsplash fotoğrafları telifsizdir ve ticari uygulamalarda ücretsizdir. Renk düzeninizi tam olarak oluşturduğunuz resmi web sitenizde bir resim olarak kullanmayı seçebilirsiniz (Unsplash'taki orijinal resimlerin çoğu en az olduğundan, resmin çözünürlüğü veya boyutu hakkında endişelenmenize gerek yoktur. 6000 piksel genişliğinde. ).
Resminizi aldıktan sonra, fotoğraftaki tek tek renkler için damlalık görevi görmek için bu aracı kullanabilirsiniz. Altı renginizin her birinden geçebilir ve bu şekilde bir palet oluşturabilirsiniz. Temel paletinize sahip olduğunuzda, bir sonraki düğmeye basmak bir seçenekler menüsü getirecektir.
Jeneratörde açabilir, paleti görüntüleyebilir, paleti görüntü olarak dışa aktarabilir, kaydedebilir veya bir kolaj oluşturabilirsiniz. Bunların her biri ana menüdeki bir seçenektir ve bu makalenin ilerleyen kısımlarında tartışılacaktır, ancak tek bir görüntüden bir renk şeması oluşturmaya çalışıyorsanız, oluşturucuyu açmayı seçmek iyi bir fikirdir.
Artık jeneratörde açtığımıza göre, devam edip istediğimiz renkleri seçip kilitleyebiliriz. Bu örnekte hem Blues hem de Brown'ı tutmak istiyorum. Diğer Bages ve Yellow, göze daha çekici görünen bir şeyle değiştirilmelidir.
Renkler arasında biraz gezindikten sonra, okyanus temalı web sitemizde kullanılabilecek bu renk şemasını oluşturuyoruz. Bu, bir görüntüden bir renk şeması oluşturmak için bu aracı nasıl kullanabileceğinizin yalnızca bir örneğidir.
Görüntüden Renk Kolajı Oluştur
Sırada ana menü seçeneklerinde bir kolaj oluşturmak var. Buna tıklamak, bir görsel yükleyebileceğiniz veya Unsplash'ta arama yapmak için kullanabileceğiniz görsel kullanıcı arayüzünü tekrar yükleyecektir. Kolaj oluşturucu, orijinal görüntünün kolajda dışa aktarılabilmesi dışında, bir görüntüdeki palet oluşturucuya benzer şekilde hareket eder. Bir web sitesi tasarımcısı için renkler oluşturmaya çalışıyorsanız, istediğiniz renkleri ve bunlardan seçtiğiniz görüntüyü göstereceğinden, bunu kullanmak iyi bir fikir olabilir.
Gerçek paletin stilini ve boyutunu değiştirebilirsiniz, ancak renklerin sunduğu kolaj oluşturucu ile en işlevsel özellik palet özelliğidir. Kullanıcı arayüzünün sağ tarafında bulunan artı ve eksi butonları, renkleri tek tek eklemenizi ve çıkarmanızı sağlar. Paletinizde en fazla 10 ve en az iki renk olabilir. Kaydırıcı, bireysel renk kombinasyonları arasında geçiş yapar ve görüntüden seçim yapma seçeneğiniz olmasa da, bu, seçtiğiniz görüntüden otomatik olarak renk şemaları oluşturur.
Dışa aktarmaya basmak, resminizi bilgisayarınızda PNG olarak kaydeder.
Bu, Instagram fotoğrafları oluştururken kullanmak için güzel bir şey olabilir. Örneğin bir mimarlık stüdyosuysanız ve sosyal medya markanızı farklılaştırmaya çalışıyorsanız, bireysel çalışmalarınızdan bir renk paleti oluşturabilirsiniz.
İşte Instagram'da yayınlanabilecek, sizi rakiplerinizden farklı kılacak ve sosyal medyanızı perspektif müşteriler için daha akılda kalıcı hale getirecek bir mutfak renk paleti örneği. Aşağıdaki galeride gösterilen Coolors'un sunduğu çok büyük miktarda stil var.
Bunlardan bazıları gerçek kullanım için pratik değildir. Sanırım bu uygulamanın yaratıcıları, sosyal medyada paylaşılacak kolajlar oluşturmanızı amaçlıyor. Yaratıcıysanız, fotoğraflarınızı diğer sosyal medya gönderilerinden ayırmak için bu çok ilginç bir strateji olabilir.
Geri Al/Yinele
Sahip olduğunuz sonraki iki seçenek, renk oluşturma işleminizi geri alma ve yeniden yapma yeteneğidir. Bir grup renk şeması arasında çok hızlı geçiş yapıyorsanız ve beğendiğinizi görürseniz, içgüdüsel olarak boşluk tuşuna basabilir ve düzeni kaybedebilirsiniz. Geri al düğmesinin kullanılması önceki şemayı geri getirecektir. Bu işlevsellik ile oturum sırasında oluşturduğunuz tüm şemalar arasında ileri ve geri geçiş yapabilirsiniz. Aynı şeyi yapmak için yön tuşlarınızı da kullanabilirsiniz.
Renk körlüğü
Bir sonraki seçeneğiniz, birincil paletinizden 8 renk körlüğüne özel palet oluşturmanıza izin veren renk körlüğü aracıdır. Web sitenizi renk körü olanlar için erişilebilir kılmak istiyorsanız bu yardımcı olabilir. Emin değilim ama aynı zamanda ADA düzenlemeleri için harika bir araç olabilir.
Bu süper güçlü bir araçtır ve bir renk şemasını herkes için kolay anlaşılır hale getirmeye çalışıyorsanız size gerçekten yardımcı olabilecek bir araçtır. Bunu, web sitenizdeki mevcut renk düzeninizi kontrol etmek ve herhangi bir büyük değişiklik yapmanız gerekip gerekmediğini görmek için de kullanabilirsiniz.
Ana paletinizi güncellediğinizde veya herhangi bir değişiklik yaptığınızda renk körü alt paletini her zaman otomatik olarak güncelleyecek olan renk körlüğü ayarını açık tutabileceğinizi unutmayın.
Palet Ayarlama Aracı
Bir sonraki aracınız palet ayarlama aracıdır. Bu, şemanızın Tonunu, doygunluğunu, parlaklığını ve sıcaklığını değiştirmenize olanak tanır.
Renk körlüğü aracı gibi, bu Coolors aracı da doğrudan birincil paletinize dayanan ikincil bir palet açar. Herhangi bir değişiklik yaptığınızda, bunları ikincil palet üzerinde göstererek ilkiyle karşılaştırmanızı kolaylaştıracaktır.
Birincil renk şemamıza ve ardından doygunluğu 100 arttırırsak ne olacağını gösteren ikincil renk şemamıza sahip olduğumuzu görebilirsiniz.
Bu, renk paletinizi gerçekten değiştirmenize ve ince ayar yapmanıza izin veren araçların sonuna geliyor. Sonraki üç araç seti, paletinizi başkalarıyla görüntülemeye ve paylaşmaya adanmıştır.
Paleti Görüntüle
İlk seçenek olan görünüm paleti, oluşturduğunuz renk için tüm olası tanımlayıcıları listeleyen bir açılır gösteri oluşturacaktır. Hex ve RGB gibi temel seçenekleri virgülle gösterir, ancak aynı zamanda ürettikleri renge göre gerçek boya satın almaya çalışan iç mimarlar ve mimarlar için çok yardımcı olabilecek daha az bilinen seçenekleri de görüntüler.
Copic, Prismacolor, Pantone, Ral ve daha sonra renk tanımlaması gerektiren herhangi bir uygulamada kullanabileceğiniz bir dizi başka tanımlayıcı alacaksınız.
Paleti Dışa Aktar
Sonraki seçeneğiniz, renk düzenini birden çok biçimde kaydetmenize ve başkalarıyla paylaşmayı kolaylaştırmanıza olanak tanıyan dışa aktarma seçeneğidir.
Birine dijital olarak göndermek için URL'yi kopyalayabilir, yazdırma için iyi olabilecek bir PDF oluşturabilir, bilgisayarınıza bir PNG kaydedecek bir görüntü oluşturabilirsiniz (bu araç tarafından oluşturulan renk paletlerini bu araçta kullanmak için dışa aktarırken kullandığımız yöntem budur). Blog yazısı). SCSS seçeneği, web uygulamalarının CSS stilinde kullanılmak üzere bir stil sayfası oluşturacaktır.
Bu bizim için gerçekten yararlıdır (İzotropik), çünkü bunu sıfırdan oluşturmak yerine basitçe kopyalayıp yapıştırabiliriz.
ASC seçeneği, Adobe illustrator ve Photoshop'ta kullanmak üzere bir palet indirmenize izin verir. Bu paleti içe aktarabilirsiniz ve ardından iki uygulamanın renk paleti bölümünde görüntülenecektir. Bir grafik tasarımcıysanız, bu sizin için çok yararlı olabilir.
Bunu bir SVG olarak dışa aktarma seçeneğiniz de vardır.
Coolors Hesabına Kaydet
Son olarak, kaydet seçeneği, bu bireysel renk şemasını Coolors uygulamasıyla oluşturduğunuz bir hesaba kaydetmenize olanak tanır. Bunu, oluşturduğumuz ancak kullanmadığımız renk şemalarını kaydetmek için kullanırız ve bir marka bilinci oluşturma projesi veya bunun gibi bir şey için yeni bir renk şemasına ihtiyaç duyduğumuzda, hesabımızı inceleyeceğiz ve oluşturduğumuz şemayı seçeceğiz. geçmiş.
Coolors renk üreticisi için ana menünün sağındaki son hamburger menüsü simgesi Diğer kullanıcıların renk şemalarını keşfetmek için kullanabileceğiniz veya hizmette bir hesabınız varsa kendinizinkini gözden geçirmek için kullanabileceğiniz bir kenar çubuğunu değiştirir.
Bu Coolers'ın, kullanıcıların renk şemalarını oluşturup toplulukla paylaşabilecekleri sosyal bir yönü var. İyi tasarlanmış bir şema bulmak istiyorsanız, ancak bunların bir demeti arasında geçiş yapmak için zamanınız yoksa bu çok yardımcı olabilir.
Ve tam işimizin bittiğini düşündüğünüzde, bu uygulamanın üst çubuk menüsündeki daha fazla menüden bahsedelim.
Coolors.co ile Gradyanlar Oluşturun
Bu, daha önce tartıştığımız üç şeyi yapmanıza izin verir, aynı zamanda daha gelişmiş degrade oluşturma araçlarına erişmenizi sağlar. Degrade oluşturmayı seçerseniz, renkler uygulaması, degradeleri gerçek zamanlı olarak oluşturmak ve önizlemek için kullanabileceğiniz belirli bir aracı yükler. Bu, web tasarımcıları için son derece güçlü ve çok yararlıdır. Geçmişte, degradelerimizi oluşturmak için Adobe Photoshop kullanırdık, ancak bununla ilgili büyük bir kusur, ondan çok kolay bir CSS degrade çıktısı oluşturabilmenizdir.
Bu araçla, ana dışa aktarma seçeneğiniz bir CSS dışa aktarımıdır.
Ayrıca Coolors.co platformundan degradeyi bir resim olarak dışa aktarmayı, tam ekranda görüntülemeyi, hatta URL'yi kopyalayıp ekibinizdeki başka biriyle paylaşmayı seçebilirsiniz.
Bu uygulamanın amiral gemisi özelliği olan palet oluşturucu gibi, topluluk tarafından oluşturulan gradyanları da keşfedebilirsiniz. Bence bu, kendiniz bir degrade oluşturmaya çalışmaktan daha kolay.
Tek bir degradenin üzerine gelmek, onu oluşturan belirli renkleri görmenize olanak tanır.
Kontrast Denetleyicisi
Coolors'un size sunduğu son araca kontrast denetleyicisi denir. Bu araç, arka plan rengi ile yazı tipi rengi arasındaki kontrastı kontrol etmenizi sağlar. Bu, Erişilebilirlik kuralları ve düzenlemelerinin yanı sıra Google'ın Erişilebilirliği sıralaması ve bu sıralamayı arama motoru yerleşimlerinde kullanması nedeniyle özellikle önemlidir.
Web sitenizin arka planı ve yazı tipleri arasında yeterli kontrast yoksa, ziyaretçilerinizin okuması zor olmakla kalmaz, aynı zamanda Google, web sitenizi arama motorlarında daha alt sıralara yerleştirerek bunun için gerçekten ceza verebilir.
Arka plan renginde metin rengini girmenize, size gerçek kelimelerle her iki rengin bir önizlemesini göstermenize ve size bir kontrast puanı vermenize olanak tanır. En yüksek puan 10 civarında olur ve bu siyah beyazdan gelirdi.
Arka plan rengi ile yazı tipi rengi arasındaki zayıf karşıtlığa bir örnek:
Gördüğünüz gibi, bu okumak acı verici ve herhangi bir web sitesinin Erişilebilirliğini mahvediyor. Bu zayıf kontrast renk kombinasyonunu nasıl düzelteceğiniz konusunda size otomatik olarak önerilerde bulunmak için bu aracı kullanabilirsiniz. İçeri girip her iki rengi de değiştirebilir veya yalnızca tek bir rengi değiştirebilirsiniz.
Bu örnekte, hem arka plan rengini hem de yazı tipi rengini değiştirmeyi seçtik. Çıktı şuydu:
Çözüm
Bu son derece güçlü aracın kamu tüketimi için ücretsiz olduğunu düşünmek oldukça şaşırtıcı. Bunun kesinlikle ödenen hiçbir yönü yok, Skillshare ile ortaklık dışında hiçbir reklam yok, pop-up yok, hiçbir şey bilmiyor. Bu, sadece renklerle uğraşmak isteyenler ve profesyonel tasarımcılar için inanılmaz derecede güçlü bir araçtır. Web tasarımından mimari renk seçimine, sosyal medya üretimine kadar birçok uygulamaya sahiptir.
Bu blog gönderisinin size bu aracın arkasındaki özelliklere ve işlevselliğe ve bir web tasarım stüdyosu olarak yeni markalar oluştururken, markaları yeniden oluştururken veya web siteleri oluştururken günlük iş akışımızda nasıl kullandığımıza dair iyi bir genel bakış sağladığını umuyoruz.