Renk şemaları üretimi - teori ve algoritmalar [kapalı]

Grafikler ve şemalar üreteceğim ve renk şemaları ve algoritma örnekleri üzerine bazı teoriler arıyorum.

Örnek sorular:

• Tamamlayıcı veya benzer renkler nasıl üretilir?
• Pastel, soğuk ve sıcak renkler nasıl üretilir?
• Herhangi bir sayıda rasgele fakat farklı renk nasıl oluşturulur?
• Tüm bunlar onaltılı üçlüye nasıl çevrilir (web rengi)?

Uygulamam AS3'te olacak ancak sözde koddaki herhangi bir örnek açığız.

Bu soru hakkında daha fazla bilgi ararken (bu da uğraştığım bir şey) bu blogu buldum . Stefano Mazzocchi, programcıların neden UI tasarımı için renk seçtiklerini emdikleri konusundaki teorisini açıklıyor ve bazı yararlı tavsiyeler ve bağlantılar sunuyor.

Önerdiği ilk tavsiye, tonları ve doygunlukları seçmenin temelini oluşturan bu açık gerçektir:

Arka planlarına karşı aynı kontrasta sahip iki bilgi parçası aynı önem seviyesinde algılanacaktır (diğer tüm şeyler eşitdir), daha fazla kontrast daha fazla önemi ve daha az kontrast daha az önemi tanımlamaktadır.

Bu, ön ve arka plan için nasıl renk seçileceğine dair ilk ipucunu sunar - daha az önemli bilgi daha düşük kontrast kullanmalı ve daha önemli bilgi daha yüksek kontrast kullanmalıdır.

İlk bağlantı, Kuler'e benzer bir site olan Color Scheme Designer'a bağlı. Kuler gibi kullanışlı bir etkileşimli araçtır ancak renklerin nasıl seçilmesi gerektiği, yani hangi sarıların hangi yeşilliklerle veya mavilerle çalıştığı vs. hakkında bir fikir vermez.

Sunacağı bir sonraki bağlantı , Bilgi Görüntüleme Grafiklerinde Renk Kullanımı başlıklı bir NASA Renk Kullanımı Araştırma Laboratuarı web sitesidir . Bu site, uygun kontrast için vs. nasıl renk seçileceği hakkında çok daha fazla bilgi sağlar ve kontrast gibi şeyleri ölçmek için kullanılan matematiksel formülleri listeler. Bu sitede henüz herhangi bir SW kodu veya sözde kod algoritması bulamadım, ancak yalnızca birkaç sayfaya baktım. Stefano NASA Color Lab'in, HSV'ye benzeyen ancak rengin ölçülebilir özelliklerinden ziyade insanın renk algısını daha doğru yansıtacak şekilde ağırlıklandırılan Munsell Renk Sistemini kullandığına dikkat çekiyor .

Stefano'nun blogunda belirtilen son bağlantıdan biri Color Trends + Palettes :: COLOURlovers adlı siteye gitmektir . Bu site, Renk Seçme Tasarımcısı veya Kuler'den daha fazla renk seçmek için bir algoritma bulmakta daha fazla yardım sunmamakta, ancak belirli renk ve paletlerden oluşan filo eğlencemizdeki mevcut değişikliklerin daha düşük ölçülebilir kalitesini vurgulamaktadır. Kullanıcı arayüzünüzü en yeni trendleri yansıtmasını istiyorsanız görmeye değer.

Bir kez daha, NASA web sitesine göz atın ve oradaki bazı sayfaları, özellikle de Color Science hakkındaki sayfaları okuyun ve birlikte çalışan renkleri seçmek ve istenen kontrastı sağlamak için uygulanabilir bir algoritma geliştirebilmelisiniz.

EDIT: Bu alanda onları buldukça ek faydalı bağlantılar ekleyeceğim.

1. Colors.pdf için İnteraktif Genetik Algoritma
2. Algısal Bir Renk Bölümlendirme Algoritması.pdf
3. Great Web Design.html için renk ve renk şemalarını birleştirme kılavuzu

Renk üreten araçlar gittiğinde, http://kuler.adobe.com adresini en çok seviyorum .

Sitede bir renk paleti (5 renk) oluşturduğunuzda, seçenekleriniz Analog, Tek Renkli, Üçlü, Tamamlayıcı, Bileşik ve Gölgeler'dir. Elbette, renklerinizi otomatik oluşturmak yerine kişiselleştirebilirsiniz. Her renk bloğu, RGB ve Hex cinsinden sayısal değerleri gösterir (ayrıca CMYK / HSV / Lab).

Tamamlayıcı veya benzer renkler nasıl üretilir?

Bu biraz daha fazla renk teorisi bilgisi içerir. Burada güzel (temel) bir açıklamaya göz atabilirsiniz . Renk çarklarına bakın.

Pastel, soğuk ve sıcak renkler nasıl üretilir?

Genel olarak, pastel renkler "yumuşak renkler" dir. Onlar bir renk tonunun daha yüksek ve daha düşük spektrumlarıdır. Kuler'in kullanıcısı tarafından üretilen pastel renk bölümüne bakın.

Herhangi bir sayıda rasgele fakat farklı renk nasıl oluşturulur?

Çizelgeleme amacınız için rastgele renklerin işe yarayacağından emin değilim. Her renk seçeneği elle seçilmelidir.

Tüm bunlar onaltılı üçlüye nasıl çevrilir (web rengi)?

Grafik yazılımların çoğu renkler için onaltılık değerler görüntüler. Hex, ## (kırmızı), ## (yeşil), ## (mavi) ile oluşturulan bir RGB dizesidir.

Örneğin, saf kırmızı FF0000, saf mavi # 0000FF'dir. Mor (kırmızı ve mavi karışımından elde edersiniz) # FF00FF'dir.

Grafikler oluşturacağınızdan, ilham almak için aşağıdaki blogları ziyaret etmenizi öneririz:

http://infosthetics.com

http://flowingdata.com

Zamanınız varsa , Renk Teorisi derslerini okuyun.

Bir süredir aklımda olan bir fikir, olabildiğince farklı (sınırlar dahilinde) renkler için gerektiği kadar renk üretmek. Ekstra güçlük, aynı grafik için daha sonra birkaç renge ihtiyaç duyarsam (belki birkaç ekstra bar eklenirse), mevcut renkleri aynı tutarak, aynı şemaya uymaları gerekir.

Karşılaştığım fikir biraz hileli bir numara. Bir renk çemberi hayal edin (belki de her biri herhangi bir renk boşluğu ile tanımlayabilseniz de, her biri aynı doygunluk ve parlaklık ile farklı bir renk tonu olabilir). Bu daire için derece cinsinden bir açı vermek yerine, sıfırdan 255'e kadar bir aralığa sahip olun. İkili olarak, bu 00000000 - 11111111'e kadardır. (teknik açıdan toplama ve çıkarma, modulo 256'dır).

İşin püf noktası, bu sayıları bit-tersine çevirmek için sıfır rengi, bir rengi vb. Seçtiğinizde. Bunu C de yapmak için kullanırdım ...

value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);

Böylece dizisi 0, 1, 2, 3, 4, 0, 128, 64, 192, 32'ye dönüştürülür.

Mesele şu ki, 256 farklı renginiz var ve en erken olanlar çok geniş bir aralığa sahip, sonrakiler daha az geniş bir alana yayılıyor ve boşlukları dolduruyor (64 0 ile 128 arasında, yarı yarıya, 32 0 ile 64 arasında vb.).

Belirli bir "açı" için herhangi bir bit genişliği, bit tersini uyarlarsanız işe yarar ve tabii ki rengin farklı parametreleri için aynı anda birden fazla döngü çalıştırabilirsiniz (belki de renk tonu hızlı bir şekilde döner, ancak doygunluk daha yavaş olur).

Bu, yalnızca "açılarınızı", belirli RGB numaralarıyla nasıl eşleştireceğiniz sorusunu, neyin uzmanı olmadığımı - oh ve ActionScript'in bit-kiddling'i destekleyip desteklemediği sorusunu bırakıyor.

Bu konuda ilginç bir Yığın Taşması sorusu " Renk tekerleği oluşturma işlevi " var. Ayrıca önerilen makalelerden birini de okumak isteyebilirsiniz (PDF).

Bu soru beni büyüledi, bu yüzden biraz googling yapmaya başladım. :) Tecrübeye dayalı bir cevap beklemeyin.

Temel olarak, renklerle hesaplamalar yapmak için, HSL biçiminde gösterilen renk tekerleğinde işlemler yapmak en iyisidir .

Yazarı bu yazı tamamlayıcı renkleri hesaplamak için nasıl HSL ve örnek kod RGB dönüşüm hakkında bazı bilgiler sağlamak için nezaketini gösterdi.

Şanslıysanız, bunlardan herhangi birini anlamanıza gerek kalmayacak, aşağıdaki garip olarak adlandırılan AS3 kitaplıklarından biri sizin için çalışırsa.

• Colorjizz
• Mojocolor

Aşağıdaki kodu kullandım. Not: gözün / beynin nasıl çalıştığı hakkında hiçbir teori kullanmaz, sadece kırmızı + yeşil + mavi = 1 olacak şekilde renklerden oluşan bir renk oluşturmak istedim ve renkler yaklaşık olarak eşit aralıklarla yerleştirildi. "Me" parametresi, toplamda olası olanlardan hangisinin rengini gösterir. Bu yaklaşık 91 ish numa kadar çalışır. Beni sıfırdan num-1'e koşmam gerektiğini unutmayın. Başka şeyler mümkündür, yukarıda verilen kısıtlama oldukça zordur, ama en azından çok fazla şeye ihtiyaç duymamanız şartıyla farklı renkler üretir.

void select_color(int me,int num){
  int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
  int j,nrows=0,irow=0,jcol=0;
  float del,red,grn,blu;
// we build a red/green triangle with an area>=num
  for(j=0;j<14;j++)if(me>=s[j])irow=j;
  for(j=13;j>0;j--)if(num<=s[j])nrows=j;
  jcol=me-s[irow];
  del=1./(nrows-.9);
  red=1.-del*irow;
  grn=del*jcol;
  blu=1.-red-grn;
  glColor3f(red,grn,blu);
}

Yine, renk teorisi kullanmaz, bu nedenle, özellikle kısmi renk körlüğü ile arada sırada olan kullanıcıyla ilgileniyorsanız, farklılığın herhangi bir suda ayırt ediciliğinin optimize edileceği garantisi yoktur.

Ayrıca birincil renk değişkenlerini rastgele sayılar olarak da ayarlayabilirsiniz, ancak görsel olarak farklı bir küme oluşturma olasılığı daha düşüktür.

Geçmişte, bunu elde etmeyi denemek yerine sadece 20 veya daha fazla renk seçerek yaptım. Grafikleriniz çok karmaşık değilse, genellikle daha fazlasına ihtiyacınız yoktur. Bu yaklaşım, basit olmasına rağmen, aynı rengi grafiğinizdeki aynı faktörlere atamanıza da izin verir (örneğin, 'satışları' her zaman aynı rengi yapabilir, böylece grafiklerin yorumlanmasını kolaylaştırır).

Fotoğraflardan renk örneklemeyi seviyorum . Bir tasarımcı olarak bunu el ile yapıyorum. Bir programcı olarak genellikle rastgele bir piksel seçerim. Daha fazla kontrol istiyorsanız, belirli bir kural kümesine uyan kendi 'fotoğraflarınızı' oluşturabilirsiniz.

VisiBone'un çevrimiçi uygulamalarını her zaman sevdim, çünkü birden fazla renk seçebiliyor ve birbirleriyle ne kadar çatışabildiklerini etkileşimli olarak değerlendiriyorsunuz: http://www.visibone.com/colorlab/

Ne kadar çarpıştığını söylüyorum çünkü "analog" sanat için geçerli olan renk kontrastına aşinayım ve rengin dijital sanatta birbirleriyle nasıl çarpıştığını görünce şaşırdım. (Açıkçası ben tasarımcı değilim ama)