it-swarm.asia

Renk şemaları oluşturma - teori ve algoritmalar

Grafikler ve diyagramlar oluşturacağım ve renk şemaları ve algoritma örnekleri hakkında bazı teoriler arıyorum.

Örnek sorular:

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

Uygulamam AS3'te olacak, ancak sözde koddaki herhangi bir örnek kabul edilebilir.

28
daniel.sedlacek

Bu soru hakkında daha fazla bilgi edinmek için (aynı zamanda mücadele ettiğim bir şey) buldum bu blog . Stefano Mazzocchi, programcıların neden UI tasarımı için renk seçiminde emdikleri hakkındaki teorisini açıklıyor ve bazı yararlı tavsiyeler ve bağlantılar sunuyor.

Sunduğu ilk tavsiye, tonları ve doygunlukları toplamak için temel oluşturan bu açık gerçektir:

Arkaplanlarına karşı aynı kontrastı olan iki bilgi aynı önem düzeyinde algılanacaktır (diğer tüm şeyler eşittir), daha fazla kontrast daha fazla önemi ve daha az kontrast daha az önemi tanımlar.

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

İlk bağlantı Kuler'e benzeyen bir site olan Renk Şeması Tasarımcısı . Kuler gibi, kullanışlı bir etkileşimli araç, ancak renklerin nasıl seçilmesi gerektiği, yani hangi sarıların hangi yeşillik veya mavilerle çalıştığı hakkında bir fikir sunmuyor.

Bir sonraki bağlantısı Bilgi Ekranı Grafiklerinde Rengi Kullanma başlıklı bir NASA Renk Kullanımı Araştırma Laboratuvarı web sitesidir. Bu site, uygun kontrast vb. İçin renklerin nasıl seçileceği hakkında çok daha fazla bilgi sağlar ve kontrast gibi şeyleri ölçmek için matematiksel formülleri listeler. Bu sitede henüz herhangi bir SW kodu veya sözde kod algoritması bulamadım, ancak sadece birkaç sayfaya baktım. Stefano ayrıca, NASA Renk Laboratuarı'nın HSV'ye benzeyen ancak rengin ölçülebilir özelliklerinden ziyade insan renk algısını daha doğru bir şekilde yansıtmak için ağırlıklı bir sistem olan Munsell Renk Sistemi kullandığına dikkat çekiyor.

Stefano'nun blogunda geçen son bir bağlantı Renk Eğilimleri + Paletler :: COLOURlovers adlı bir sitedir. Bu site, renk seçimi için Renk Düzeni Tasarımcısı veya Kuler'den daha fazla algoritma bulma konusunda daha fazla yardım sunmamaktadır, ancak belirli renk ve paletlerin kısa süreli kullanımındaki mevcut değişikliklerin daha az ölçülebilir kalitesini vurgular. Kullanıcı arayüzünüzün en son trendleri yansıtmasını istiyorsanız görülmeye değer.

Bir kez daha, NASA web sitesine bakın ve oradaki bazı sayfaları, özellikle de Renk Bilimi adresindeki sayfaları okuyun ve birlikte çalışan ve sağlayan renkleri seçmek için uygulanabilir bir algoritma bulabilmeniz gerekir. istenen kontrast.

DÜZENLEME: Onları bulduğumda bu alana başka yararlı bağlantılar ekleyeceğim.

  1. Colors.pdf için Etkileşimli Genetik Algoritma
  2. Algısal Bir Renk Segmentasyon Algoritması.pdf
  3. Harika Web Tasarımı için renk ve renk Şemalarını Birleştirme Kılavuzu.html
15
oosterwal

Renk oluşturma araçları gittikçe, http://kuler.Adobe.com en iyisini seviyorum.

enter image description here

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 özelleştirebilirsiniz. Her bir renk bloğu size RGB ve Onaltılı (CMYK/HSV/Lab) sayısal değerleri gösterir.

Tamamlayıcı veya benzer renkler nasıl oluşturulur?

Bu biraz daha fazla renk teorisi bilgisini içerir. Güzel (temel) bir açıklamaya bakabilirsiniz burada . Renk çarklarına bakın.

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

Genel olarak pastel renkler "yumuşak renklerdir". Bir renk tonunun daha yüksek ve daha düşük spektrumudur. Kuler'in kullanıcı tarafından oluşturulan pastel renk bölümüne bakın.

Herhangi bir sayıda rastgele ama farklı renk nasıl oluşturulur?

Grafik amacınız için rastgele renklerin çalışacağından emin değilim. Her renk seçimi elle seçilmelidir.

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

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

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

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

http://infosthetics.com

http://flowingdata.com

Zamanınız varsa, okuyun Renk Teorisi Dersleri

9
Jin

Bir süredir aklıma gelen bir fikir, olabildiğince çok renk için olabildiğince farklı (sınırlar dahilinde) renkler üretmektir. Ekstra güçlük, daha sonra aynı grafik için fazladan bir kaç renge ihtiyacım olursa (belki birkaç ekstra çubuk ekleniyor), mevcut şemaları aynı tutarak aynı şemaya uymaları gerekiyor.

Geldiğim fikir biraz uğraşmak. Bir renk çemberi düşünün (belki de her biri aynı doygunluk ve parlaklığa sahip farklı bir renk tonudur, ancak herhangi bir renkteki herhangi bir daireyi tanımlayabilirsiniz). Bu daire için derece cinsinden bir açı vermek yerine, sıfır ila 255 arasında bir aralığa sahip olun. İkili olarak, bu 00000000 ila 11111111 arasındadır. 8 bit 255'e bir tane ekleyin ve sıfıra geri taşar, bu yüzden doğal olarak bir "dairesel değer" görevi görür (teknik açıdan toplama ve çıkarma modulo 256'dır).

Hile, bu numaraları bit tersine çevirmek için renk sıfır, renk vb. Bunu C'de yapmak için ...

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

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

Mesele şu ki, 256 farklı renk var ve en eski olanları çok geniş aralıklı, daha sonraları daha az aralıklı olacak ve boşlukları dolduracak (64, 0 ile 128 arasında yarı yolda, 32 yarı yolda 0 ile 64 arasında).

Bit tersini uyarlarsanız belirli bir "açı" için herhangi bir bit genişliği çalışır ve elbette rengin farklı parametreleri için aynı anda birden fazla döngü çalıştırabilirsiniz (belki renk tonu hızla döner, ancak doygunluk daha yavaş döner).

Bu sadece "açılarınızı" belirli RGB numaralarına veya uzman olmadığım herhangi bir şeye nasıl eşlediğiniz sorusunu - oh ve ActionScript'in bit-kiddling'i destekleyip desteklemediği sorusunu bırakır.

4
Steve314

Bu konuda ilginç bir Stack Overflow sorusu var " Renk tekerleri oluşturma işlevi ". Ayrıca önerilen belgeler (PDF) 'den birini de okumak isteyebilirsiniz.

3
Gary Rowe

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

Temel olarak, renklerle hesaplamalar yapmak için HSL biçimi ile temsil edilen bir renk tekerleğinde işlemler yapmak en iyisidir.

bu gönderi yazarı, RGB'yi HSL'ye dönüştürme hakkında bazı bilgiler ve tamamlayıcı renklerin nasıl hesaplanacağıyla ilgili örnek kod sunacak kadar nazikti.

Şanslıysanız, bunu anlamanız gerekmeyecek, eğer garip bir şekilde adlandırılan AS3 kütüphanelerinden biri sizin için çalışıyorsa.

2
Steven Jeuris

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 bir renk damak oluşturmak istedim ve renkler yaklaşık olarak eşit aralıklı. "Me" parametresi, mümkün olan toplam numaranın hangi renginden oluşan renktir. Yaklaşık 91 ish rakamına kadar çalışır. Sıfırdan num-1'e koşmam gerektiğini unutmayın. Başka şeyler de mümkündür, yukarıda verilen kısıtlama oldukça keyfidir, ancak en azından farklı renklere neden olur - bunlardan çok fazlasına ihtiyacınız olmadığı varsayılır.

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üğü olan ara sıra kullanıcı ile ilgileniyorsanız, herhangi bir wat'da ilginin optimize edildiğine dair bir garanti yoktur.

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

1
Omega Centauri

Birden fazla renk seçebildiğiniz ve birbirleriyle ne kadar kötü çarpıştıklarını interaktif olarak değerlendirebileceğiniz için VisiBone'un çevrimiçi yardımcı programlarını her zaman sevdim: http://www.visibone.com/colorlab/

"Analog" sanat için geçerli olduğu için renk kontrastına aşina olduğum ve dijital sanatta seçtiğim rengin birbiriyle ne kadar kötü çarpıştığına şaşırdım. (Açıkçası ben tasarımcı değilim)

0
frogstarr78

Geçmişte bunu, onları üretmeye çalışmaktan ziyade sadece 20 renk seçerek yaptım. Grafikleriniz çok karmaşık olmadıkça, genellikle daha fazlasına ihtiyacınız yoktur. Bu yaklaşım basit olsa da, grafiğinizdeki aynı faktörlere aynı rengi atamanıza da izin verir (örneğin, 'satışları' her zaman aynı renk haline getirerek grafikleri daha kolay yorumlayabilirsiniz).

0
GrandmasterB

fotoğraflar renk örnekleme gibi. Tasarımcı olarak bunu elle yapıyorum. Bir programcı olarak genellikle rastgele bir piksel seçerim. Daha fazla kontrol istiyorsanız, belirli bir kural setine uyan kendi 'fotoğraflarınızı' oluşturabilirsiniz.

0
Les