it-swarm-eu.dev

Generování barevných schémat - teorie a algoritmy

Budu generovat grafy a diagramy a hledám nějakou teorii o barevných schématech a příkladech algoritmů.

Příklad otázek:

  • Jak generovat doplňkové nebo analogické barvy?
  • Jak generovat pastelové, studené a teplé barvy?
  • Jak vygenerovat libovolný počet náhodných, ale zřetelných barev?
  • Jak to všechno přeložit do hexadecimálního tripletu (barva webu)?

Moje implementace bude v AS3, ale všechny příklady v pseudokódu jsou vítány.

28
daniel.sedlacek

Při hledání více informací o této otázce (je to něco, s čím jsem také bojoval) jsem našel tento blog . Stefano Mazzocchi vysvětluje svou teorii o tom, proč programátoři sávají při výběru barev pro návrh uživatelského rozhraní, a nabízí několik užitečných rad a odkazů.

První kousek rady, kterou nabízí, je tento zřejmý fakt, který stanoví základ pro výběr odstínů a nasycení:

Dvě informace se stejným kontrastem proti jejich pozadí budou vnímány na stejné úrovni důležitosti (všechny ostatní věci jsou stejné), zatímco větší kontrast identifikuje větší význam a méně kontrast identifikuje menší význam.

To nabízí první vodítko, jak vybírat barvy pro popředí a pozadí - méně důležité informace by měly používat nižší kontrast a důležitější informace by měly používat vyšší kontrast.

První odkaz je na Color Scheme Designer , web podobný Kulerovi. Stejně jako Kuler je to šikovný interaktivní nástroj, ale nenabízí žádné informace o tom, jak by měly být vybírány barvy, tj. Které žluté barvy pracují s kterými zelenými nebo modrými atd.

Další odkaz, který nabízí, je na webovou stránku NASA Color Usage Research Lab nazvanou Používání barev v grafice zobrazení informací . Tento web poskytuje mnohem více informací o tom, jak vybírat barvy pro správný kontrast atd., A uvádí matematické vzorce pro měření věcí, jako je kontrast. Na tomto webu jsem zatím nenašel žádný SW kód ani algoritmy pseudokódů, ale podíval jsem se pouze na několik stránek. Stefano také poukazuje na to, že NASA Color Lab používá Munsell Color System , systém podobný HSV, ale vážený tak, aby přesněji odrážel lidské vnímání barev spíše než měřitelné vlastnosti barvy.

Jeden poslední odkaz uvedený v blogu Stefana je na web nazvaný Color Trends + Palettes :: COLOURlovers . Tento web již nepomáhá při hledání algoritmu pro výběr barev než Color Scheme Designer nebo Kuler, ale zdůrazňuje méně měřitelnou kvalitu současných změn v našem prchavém potěšení z určitých barev a palet. Stojí za návštěvu, pokud chcete, aby vaše uživatelské rozhraní odráželo nejnovější trendy.

Ještě jednou se podívejte na web NASA a přečtěte si tam některé stránky, zejména ty na Color Science , a měli byste být schopni přijít s funkčním algoritmem pro výběr barev, které spolupracují a poskytují požadovaný kontrast.

ÚPRAVA: Přidám další užitečné odkazy v této oblasti, jak je najdu.

  1. Interaktivní genetický algoritmus pro Colors.pdf
  2. Percepční algoritmus segmentace barev.pdf
  3. Průvodce kombinací barev a barevných schémat pro skvělý web Design.html
15
oosterwal

Pokud jde o nástroje pro generování barev, mám rád http://kuler.Adobe.com nejlepší.

enter image description here

Když na webu vytvoříte paletu barev (5 barev), máte na výběr analogové, monochromatické, trojité, doplňkové, složené a odstíny. Samozřejmě můžete své barvy upravit místo automatického generování. Každý barevný blok zobrazuje číselné hodnoty v RGB a Hex (stejně jako CMYK/HSV/Lab).

Jak generovat doplňkové nebo analogické barvy?

To vyžaduje trochu více znalostí teorie barev. Můžete se podívat na pěkné (základní) vysvětlení zde . Podívejte se na barevná kola.

Jak generovat pastelové, studené a teplé barvy?

Obecně jsou pastelové barvy „měkké barvy“. Jsou to vyšší a nižší spektrum odstínu. Viz část generovaná uživatelem Kuler pastelová barva .

Jak vygenerovat libovolný počet náhodných, ale zřetelných barev?

Pro váš účel mapování si nejsem jistý, že by náhodné barvy fungovaly. Každá volba barvy by měla být vybírána ručně.

Jak to všechno přeložit do hexadecimálního tripletu (barva webu)?

Většina grafického softwaru zobrazuje hex hodnoty barev. Hex je řetězec RGB tvořený ## (červený), ## (zelený), ## (modrý).

Například čistě červená je FF0000, čistě modrá je # 0000FF. Fialová (dostanete z míchání červené a modré) je # FF00FF.

Protože budete vytvářet grafy, doporučujeme vám pro inspiraci navštívit následující blogy:

http://infosthetics.com

http://flowingdata.com

Pokud máte čas, přečtěte si Lekce v teorii barev

9
Jin

Nápad, který jsem měl na mysli na chvíli, je generovat co nejrůznější barvy (v mezích) pro tolik barev, kolik je potřeba. Problém navíc spočívá v tom, že když později potřebuji o pár barev navíc pro stejný graf (možná se přidá několik dalších sloupců navíc), musí se zapadnout do stejného schématu a zachovat stávající barvy stejné.

Myšlenka, se kterou jsem přišel, je trochu trikový trik. Představte si kruh barev (každá z nich může být odlišným odstínem se stejnou saturací a jasem, i když můžete definovat libovolný kruh skrz jakýkoli barevný prostor). Místo udávání úhlu ve stupních pro tuto kružnici mějte rozsah nula až 255. V binárním formátu to je 00000000 až 11111111. Přidejte jeden k 8 bitům 255 a přeteče zpět zpět na nulu, takže funguje přirozeně jako „kruhová hodnota“ (z technického hlediska je sčítání a odčítání modulo 256).

Trik spočívá v tom, že když vyberete nulovou barvu, jednu barvu atd., Bitová čísla obrátíte. K tomu v C bych použil ...

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

Takže sekvence 0, 1, 2, 3, 4 je transformována na 0, 128, 64, 192, 32.

Jde o to, že máte 256 odlišných barev a nejstarší jsou velmi široce rozloženy, přičemž pozdější jsou méně rozložené a vyplňují mezery (64 je na polovině mezi 0 a 128, 32 na polovině mezi 0 a 64 atd.).

Jakákoli bitová šířka pro určitý "úhel" bude fungovat, pokud přizpůsobíte bitovou zpětnou vazbu, a samozřejmě byste mohli spustit více cyklů najednou pro různé parametry barvy (možná odstín odstínu rychle, ale saturace se točí pomaleji).

To jen ponechává otázku, jak mapujete své „úhly“ na konkrétní čísla RGB nebo na cokoli, na co nejsem odborník - oh, a otázku, zda ActionScript podporuje bit-fiddling.

4
Steve314

Je zde zajímavá otázka přetečení zásobníku " Funkce pro vytváření barevných koleček ". Možná si také budete chtít přečíst jeden z doporučené články (PDF).

3
Gary Rowe

Tato otázka mě fascinovala, takže jsem začal dělat nějaké googling. :) Neočekávejte odpověď na základě zkušeností.

V zásadě je pro výpočty s barvami nejlepší provádět operace na barevném kolečku, které je reprezentováno formát HSL .

Autor tento příspěvek byl natolik laskavý, aby poskytl nějaké informace o převodu RGB na HSL a ukázkový kód, jak vypočítat doplňkové barvy.

Pokud budete mít štěstí, nemusíte nic z toho pochopit, pokud pro vás pracuje jedna z následujících trapně pojmenovaných knihoven AS3.

2
Steven Jeuris

Použil jsem následující kód. Poznámka: nepoužívá žádnou teorii o tom, jak oko/mozek funguje, jen jsem chtěl být schopen vytvořit patro barev tak, že červená + zelená + modrá = 1, a barvy jsou přibližně rovnoměrně rozloženy. Parametr "já" je barva z celkového počtu možných. Funguje to na num přibližně 91 ish. Všimněte si, že bych měl běžet od nuly do num-1. Jsou možné i jiné věci, výše uvedené omezení je docela svévolné, ale přinejmenším generuje odlišné barvy - za předpokladu, že je příliš mnoho nepotřebujete.

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);
}

Opět nepoužívá žádnou teorii barev, takže neexistuje záruka, že disticntness je optimalizována v jakémkoli wat - zejména pokud se obáváte o příležitostného uživatele s částečnou slepotou barev.

Můžete také jednoduše nastavit primární barevné proměnné na náhodná čísla, ale je méně pravděpodobné, že vytvoří vizuálně odlišnou sadu.

1
Omega Centauri

Vždy se mi líbily online obslužné programy VisiBone, protože můžete vybrat více barev a interaktivně vyhodnotit, jak špatně se navzájem střetávají: http://www.visibone.com/colorlab/

Říkám, jak špatně se střetávají, protože jsem obeznámen s barevným kontrastem, protože se vztahuje na „analogové“ umění, a byl jsem překvapen tím, jak špatně jsem si vybral barvu, která se v digitálním umění střetla. (I když nejsem žádný návrhář)

0
frogstarr78

V minulosti jsem to udělal tak, že jsem ručně vybral asi 20 barev, než abych se je pokusil vygenerovat. Pokud nejsou vaše grafy velmi složité, obvykle nepotřebujete více. Tento přístup, i když jednoduchý, vám také umožňuje přiřadit stejnou barvu ke stejným faktorům v grafu (například můžete vždy provést „prodej“ stejnou barvu, což usnadňuje interpretaci grafů).

0
GrandmasterB

Líbí se mi vzorkování barev z fotografie. Jako designér to dělám ručně. Jako programátor obvykle volím náhodný pixel. Pokud chcete více kontroly, můžete si vytvořit vlastní „fotografie“, které odpovídají určité sadě pravidel.

0
Les